Atelier - a premium, anti-slop frontend design skill suite for Claude Code: 11 skills + a deepdive knowledge base.
Skill Claude CodeCodex
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…
Skill Claude CodeCodex
Atelier suite — the UX-writing & microcopy layer. The words inside the interface are part of the design: button and action labels, form labels and helper text, error messages, empty-state and loading copy, confirmation and destructive-action dialogs, tooltips, onboarding lines, and notifications. Write copy that's…
Skill Claude CodeCodex
On-demand reference DATA for the Atelier suite — a local, searchable (BM25) library of per-industry color palettes, font pairings, UI-style definitions, product-type design reasoning, landing-page patterns, chart guidance, and current Next.js / React / shadcn / Vue / Three.js do-and-don't tables. Use it to look up…
Skill Claude CodeCodex
Atelier suite — the data-visualization layer. Turn data into charts that read clear and premium, not rainbow slop: choose the right chart for the question, encode values honestly (position > length > color), build on the house stack (shadcn Charts/Recharts → Tremor → visx/D3 → ECharts), strip to signal (restrained…
Skill Claude CodeCodex
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…
Skill Claude CodeCodex
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…
Skill Claude CodeCodex
Atelier suite — the production-resilience pass. Make a beautiful build survive the real world: text overflow and truncation at every breakpoint, internationalization (30-40% text expansion, RTL mirroring via logical properties, locale-aware number/date/currency formatting, pluralization), the full set of error states…
Skill Claude CodeCodex
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…
Skill Claude CodeCodex
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…
Skill Claude CodeCodex
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…
Skill Claude CodeCodex
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 →…
Skill Claude CodeCodex
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…
Skill Claude CodeCodex
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)…
Skill Claude CodeCodex
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), tune font loading for zero layout shift, and animate…
Skill Claude CodeCodex
Atelier suite — the UX architecture & flows layer (planning-first). Decide how a product is STRUCTURED before any page is styled: the information architecture (content/feature inventory, grouping, sitemap, labels in the user's words), the navigation model (top-nav / sidebar / tab-bar / hub-and-spoke, URL structure…
Skill Claude CodeCodex
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, Gaussian splatting, faux-3D, and WebGL…
Skill Claude CodeCodex
Atelier suite — the entry point, router & orchestrator. START HERE when you're not sure which Atelier skill to reach for, want the suite to take a project from where it is to where it should be, or want to set up / read this project's design memory. With no argument it probes project state, decides which skills the…
Skill Claude CodeCodex
Premium, anti-slop DESIGN layer over /codex-imagegen: turn a brief into an art-directed, one-image-per-section website comp (landing page, hero, full mockup, design reference) by injecting a taste preamble + a locked house style into EACH call of the codex-imagegen helper. This is the BRAIN (what to draw, how…
Skill Claude CodeCodex
Generate and edit raster images by driving the locally-installed OpenAI Codex CLI headlessly and invoking its FIRST-PARTY built-in imagegen 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"…
Skill Claude CodeCodex
Forge suite — animation craft layer. Authors keyframes and F-curves, sets interpolation and easing (BEZIER/BACK/ELASTIC/BOUNCE), builds NLA clip libraries, bakes IK/constraint/sim motion to raw TRS keys, and exports skeletal + morph (blend-shape) animation to glTF/GLB, FBX, and USD formats — all headlessly from bpy…
Skill Claude CodeCodex
Forge suite — define the 3D asset brief and write FORGE.md (the project-memory file every other Forge skill reads). Produces: a completed FORGE.md at the project root with target engine, coordinate system, poly/texel budgets, render settings, PBR workflow, the determinism contract (seed + sample counts for idempotent…
Skill Claude CodeCodex
On-demand reference DATA for the Forge 3D suite — a local, searchable (BM25) library of.
Skill Claude CodeCodex
Forge suite — format matrix, glTF/GLB/USD/FBX export, and engine import conventions. Produces a validated, engine-ready asset (GLB, USDC, FBX, or USDZ) from any Forge working file. Use whenever: exporting a Blender scene or procedural mesh to glTF/GLB; converting FBX, OBJ, or STL to GLB; building a USD stage for…
Skill Claude CodeCodex
Forge suite — physical-world and AI-world 3D intake. Converts real-world photo sequences into production-ready meshes or Gaussian splats (photogrammetry via COLMAP/Meshroom/ RealityScan), trains and exports Gaussian-splat / NeRF scenes (gsplat, Nerfstudio Splatfacto), and turns AI-generated raw geometry into clean…