luminary19

atelier-components

Atelier suite — turn the design system into real, accessible, production code. Scaffold a premium React/Next + Tailwind v4 + shadcn/ui project, wire the atelier-foundations tokens into shadcn's theme variables, install the best-in-class single-purpose components (Vaul drawer, Sonner toast, cmdk command palette, Tremor dashboards), set up Storybook, and assemble pages from a copy-paste premium section-block library (hero variants, bento, feature rows, pricing, nav, footer, dashboard shell, data tables, forms, empty states). Use whenever building/scaffolding a frontend project, implementing components or page sections, setting up shadcn/Tailwind, adding a drawer/toast/command-palette/charts, or assembling marketing or app UI. Default stack: React/Next + Tailwind v4 + shadcn. Part of the Atelier suite.

atelier-direction

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

atelier-foundations

Atelier suite — the design-system engine. Build the token foundation that makes a frontend look coherent and "expensive": a perceptual OKLCH color system (ramps + semantic tokens + accessible dark mode), a modular + fluid type scale, an 8-point spacing scale, and depth (radii, shadows, grain). Outputs ready-to-use CSS custom properties, Tailwind v4 @theme, or W3C/DTCG design tokens. Use this whenever starting any frontend that needs a consistent visual system, when building a color palette / design tokens / theme / dark mode, or when colors, spacing, or sizing feel inconsistent, muddy, or generic. Run after atelier-direction; before building components. (Choosing and setting the actual fonts → atelier-typography; scaffolding and building components → atelier-components.)

atelier-layout

Atelier suite — premium layout & composition. Structure pages and sections so they read intentional and "expensive": choose the right layout archetype, build it with modern CSS (Grid, Subgrid, Flexbox, container queries), apply composition models (rule of thirds, F/Z patterns, asymmetry/broken grid), use Gestalt grouping and clear visual hierarchy, and deploy generous active whitespace. Use this whenever laying out a page or section, building a grid / bento / dashboard / hero, making something responsive, or when a layout feels cramped, flat, centered-and-boring, or templated. Run after atelier-direction (layout archetype) using atelier-foundations spacing tokens.

atelier-motion

Atelier suite — motion & micro-interactions (the "feel" layer). Add animation that reads premium, not gimmicky: correct easing/spring defaults, the right durations, the 12 animation principles applied to UI, component/gesture/layout/exit animation with Motion (motion/react), micro-interactions (buttons, toggles, likes), and the often-skipped states (skeleton/shimmer, optimistic UI, empty/loading/error). Use whenever adding or fixing UI animation, transitions, hover/press feedback, loading states, or when motion feels janky, abrupt, excessive, or cheap. Default stack: Motion for React UI; defer scroll-driven work to atelier-scroll and pre-ship checks to atelier-perf-a11y. Part of the Atelier suite.

atelier-perf-a11y

Atelier suite — the performance & accessibility gate. The cross-cutting quality bar every Atelier build passes before it ships: animate only compositor-safe properties, hit Core Web Vitals (LCP ≤2.5s, CLS ≤0.1, INP ≤200ms), respect prefers-reduced-motion, meet WCAG 2.2 AA (contrast, focus, keyboard, target size, semantics, screen readers), and give canvas/WebGL accessible fallbacks. Use whenever finishing or reviewing a frontend, optimizing performance / Core Web Vitals / Lighthouse, fixing jank or layout shift, doing an accessibility/a11y audit, handling reduced motion, or running a pre-ship check. This is the canonical home for the perf/a11y rules the other Atelier skills reference. Part of the Atelier suite.

atelier-redesign

Atelier suite — audit & upgrade existing sites/apps to premium without breaking them. Audit-first: inventory the current brand/IA/stack, name the specific AI-slop tells and the missing "expensive" levers, score gaps by impact vs risk, then apply the Atelier suite (direction → foundations → type → layout → motion → components → scroll/webgl) selectively, preserving functionality, content, SEO, and accessibility, and verifying with the perf/a11y gate. Use whenever improving, modernizing, polishing, or redesigning an existing website or app, fixing a design that looks dated/generic/templated/cheap, or doing a UI audit. This is the front door for EXISTING-site work — start here rather than atelier-direction when the site/app already exists; it brings the rest of the suite (direction included) in as needed. Supersedes older redesign skills. Default stack: Tailwind v4 + shadcn. Part of the Atelier suite.

atelier-review

Atelier suite — the adversarial pre-ship review. A full multi-step red-team of a FINISHED frontend build: fan out independent reviewers across dimensions (accessibility, performance, motion/reduced- motion, design-integrity/anti-slop, code quality), adversarially verify every finding to kill false positives, verify live in a real browser, synthesize a prioritized fix list, apply serially, and re-verify. Built to run with the ordinary Task/subagent tool — it does NOT require ultracode/Workflow. Use whenever a substantial build is "done" and needs a real audit before shipping, when asked to review / red-team / audit / "is this ready to ship" / find problems / pre-ship review a frontend. This is the heavyweight, adversarial counterpart to the atelier-perf-a11y self-checklist. Part of the Atelier suite.

atelier-scroll

Atelier suite — scroll choreography & advanced interaction. Build award-grade scroll experiences: smooth/inertia scroll (Lenis), scroll-triggered reveals, scrubbing, pinning, horizontal sections, sticky-stacking cards, parallax, native CSS scroll-driven animations, page/route transitions (View Transitions API), infinite marquees, magnetic buttons, and custom cursors. Use whenever adding scroll-based animation or storytelling, smooth scrolling, parallax, pinned/horizontal sections, page transitions, marquees, or custom/magnetic cursors — or when scroll feels static, abrupt, or janky. Default stack: GSAP + ScrollTrigger + Lenis, with native CSS scroll-driven animations as progressive enhancement. Honors prefers-reduced-motion. Part of the Atelier suite.

atelier-typography

Atelier suite — expensive typography. Choose and pair fonts with a point of view, build a fluid modular type scale, control tracking/leading/measure, switch on the right OpenType + variable-font features, set editorial detail (drop caps, pull quotes, hierarchy), and animate type (kinetic / scroll-driven) tastefully. Use this whenever typography matters: picking or pairing fonts, headings that feel generic or "default Inter/Playfair," body readability, display type, variable fonts, numbers in tables, or animated/kinetic text. Run after atelier-direction (type voice) and alongside atelier-foundations (which owns the scale tokens).

atelier-webgl

Atelier suite — 3D, WebGL & shader craft (the flagship layer). Build award-grade 3D and generative graphics: React Three Fiber + Drei scenes, hand-written GLSL/TSL shaders (fresnel, fbm noise, mesh gradients, distortion, dithering), WebGPU via WebGPURenderer, Spline integration, faux-3D, and WebGL image hover/scroll distortion — always with lazy-loading, static fallbacks, and accessibility. Use whenever building 3D scenes, WebGL/Three.js/R3F, shaders/GLSL, a 3D or generative hero, product viewers, shader gradients/grain/distortion, Spline scenes, or interactive 3D graphics. Default stack: React Three Fiber + Drei. Gate everything with atelier-perf-a11y. Part of the Atelier suite.

codex-imagegen

Generate and edit raster images by driving the locally-installed OpenAI Codex CLI headlessly and invoking its FIRST-PARTY built-in `image_gen` tool (gpt-image) — using the ChatGPT Plus/Pro login Codex is already authenticated with, NO OpenAI API key, no reverse-engineered routes. Use when asked to "generate an image", "make a logo/icon/ texture/mockup", "edit this PNG", "use codex to create an image", or "/codex-imagegen". Wraps `codex exec` and parses output via a PowerShell helper so files are reliably found.