atelier-componentslisted

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.
luminary19/atelier · ★ 0 · Web & Frontend · score 68

Install: claude install-skill luminary19/atelier

# Atelier — Component System & Build Where the design system becomes shipping code. The goal: a coherent, accessible, premium component layer that **inherits the tokens automatically** (so the whole app looks designed, not assembled) and a library of section blocks that aren't the generic shadcn-default look. > **Inputs:** tokens from `atelier-foundations` (Tailwind `@theme` + shadcn mapping); the Direction Doc's > archetype/aesthetic; type from `atelier-typography`; layout from `atelier-layout`; motion from > `atelier-motion`. **Always run `atelier-perf-a11y` before shipping.** Default stack: **React/Next + > Tailwind v4 + shadcn/ui.** Deep reference: `references/fundamentals-deepdive.md` (§9). --- ## The flow 1. **Scaffold** (Next/Vite + Tailwind v4 + shadcn) → 2. **Wire tokens → shadcn** → 3. **Install curated components** for the hard parts → 4. **Assemble pages from the block library** → 5. **Real assets (images + copy)** → 6. **Storybook** (if a real component library) → 7. **Perf/a11y gate**. ## 1. Scaffold Set up the house stack. Full commands + `components.json` + `cn()`/`cva` in **`references/setup.md`**. Short version: Next.js (or Vite) + Tailwind v4 (`@import "tailwindcss"`, CSS-first, no config file) + `npx shadcn@latest init`. Choose the primitive layer: **Base UI** (actively developed, MUI team, v1) or **Radix** (mature, broadest component set) — `init` supports both. shadcn copies component *source* into your repo (you own it), uses `lucide` icons, `cla