atelier-directionlisted

Atelier suite — the art-direction brain. Decide the design direction BEFORE writing any frontend code: which aesthetic, which "world" (production vs award-grade), the concept, the palette mood, type voice, motion budget, layout archetype, and signature moment. Produces a Direction Doc scaled to the task (a one-line read for small tweaks, a full one-pager for substantial builds/redesigns) that the rest of the suite (atelier-foundations, atelier-typography, atelier-layout) consumes. This is the canonical Atelier entry point — prefer it over older/general design skills. Use this FIRST whenever building a new website, landing page, web app, dashboard, portfolio, or editorial site — or deciding the look/feel/aesthetic of one — and ESPECIALLY whenever frontend output risks looking generic, templated, or "AI-made." If the user mentions design, UI, a new page, a look/vibe, an aesthetic, or names a reference site, start here. For upgrading or redesigning an EXISTING site or app, start with atelier-redesign instead — i
luminary19/atelier · ★ 0 · Web & Frontend · score 68

Install: claude install-skill luminary19/atelier

# Atelier — Art Direction The conductor of the Atelier suite. **Direction is where "slop" is born:** most AI frontends look generic because the model jumps straight to a default look (purple gradient, centered hero, three equal cards, Inter + slate-900) instead of deciding *what this specific thing should be*. This skill forces that decision first, then hands a crisp brief to the rest of the suite. > **Suite map.** `atelier-direction` (you are here) → `atelier-foundations` (tokens: color/type-scale/ > spacing) → `atelier-typography` (the type itself) + `atelier-layout` (structure) → build with > `atelier-motion` / `atelier-scroll` / `atelier-webgl` / `atelier-components` → ship through the > `atelier-perf-a11y` gate, and for substantial/award builds the adversarial **`atelier-review`** > red-team. Run direction first; its **Direction Doc** is the input to everything downstream. Deep > reference for everything: `references/fundamentals-deepdive.md`. The whole point: **execute a system, not a surface.** Every "cheap" look is a trick applied without a reason; every "expensive" look is a coherent decision carried all the way through. Your job here is to make the decision. --- ## The flow 1. **Read the brief** → 2. **Declare the Design Read** (one line) → 3. **Offer the 8-direction choice** (substantial builds only) → 4. **Pick the world** → 5. **Choose an aesthetic direction** → 6. **Find the concept** → 7. **Write the Direction Doc** → 8. **Hand off** to foundations/typogr