What this prompt does
This prompt builds a React design system library so a product can stay visually consistent across many screens without copy-pasting components. For each component it generates a TypeScript props interface, a compound-component pattern where appropriate, styling driven by design tokens, WAI-ARIA compliance with keyboard navigation, defined variants, animations, Storybook stories, and unit tests. It also adds a theme provider, dark mode, CSS custom properties for tokens, tree-shakeable packaging, and a Figma-aligned token file.
The variables name the system and its surface. [library_name] is the package, and [components] lists what to build — Button, Input, Modal, DataTable, and so on. [styling_approach] sets how components are styled (Tailwind with class-variance-authority), [variants] defines the size and intent options each component exposes, [animation_lib] powers motion, and [bundler] packages it for tree-shaking. The load-bearing ideas are design tokens and compound-component patterns, which are what let the system scale, and WAI-ARIA compliance treated as non-negotiable rather than optional. Storybook plus tree-shakeable packaging is what turns the result into something other teams can actually adopt.
When to use it
- Building a shared UI library so screens stay consistent without duplicated components
- Establishing design tokens that map to a Figma source of truth
- Creating accessible primitives with proper keyboard navigation from the start
- Standardizing component variants (sizes, intents) across a product
- Packaging components for tree-shaking so consumers only bundle what they import
- Documenting components in Storybook so other teams can adopt them
Example output
You get a component per entry in [components], each with a typed props interface, compound subcomponents where it fits, [styling_approach] styling tied to design tokens, the [variants] you specified, animations via [animation_lib], WAI-ARIA roles and keyboard handling, a Storybook story with controls, and a unit test. Supporting pieces include a theme provider, dark mode through CSS custom properties, a [bundler] setup for tree-shaking, and a Figma-aligned token file. The output reads as an adoptable package, not a folder of loose components.
Pro tips
- Keep
[components]to genuine primitives and a few composites; building a kitchen-sink list at once dilutes quality across every component - Define
[variants]deliberately (size sm/md/lg, variant primary/secondary/ghost/destructive) so class-variance-authority generates a clean, predictable API - Treat WAI-ARIA and keyboard navigation as acceptance criteria, not nice-to-haves — accessibility retrofitted later is far more expensive
- Drive everything from the token file so dark mode and theming flow from CSS custom properties rather than scattered overrides
- Verify the
[bundler]output actually tree-shakes; a barrel export done wrong can pull the whole library into every consumer - Use the Storybook stories as the contract with other teams, and keep them current when a component's props change
