| name | design-system-builder |
| description | Scaffold, build, and extend the DZIRE design system. Use when the user asks to create tokens, components, layouts, or patterns. |
| category | build |
| version | v1.0 |
| inputs | ["user request","existing design-system structure","brand palette and typography specs"] |
| outputs | ["Token files","Component files","Layout files","Pattern files","Barrel index.ts exports"] |
Design System Builder Skill
Purpose
Build and extend the centralized DZIRE design system, from raw token definitions to composed UI patterns.
When To Use
Use this skill when the user asks to:
- Scaffold the full
frontend/src/design-system/ folder structure
- Add a new token category
- Create a new UI component, layout, or pattern
- Update existing tokens or components to match new brand specs
- Export new components from barrel files
Inputs
- User request
frontend/src/design-system/ structure (current state)frontend/src/index.css (Tailwind theme variables)phases/step-6.md (specification)- Stack: React 19, Vite, TypeScript, Tailwind CSS v4
Workflow
- Identify target sub-folder:
tokens/, components/, layouts/, or patterns/.
- Create or update the
.ts / .tsx file.
- Follow the existing prop/variant/export pattern.
- Update the sub-folder
index.ts barrel export.
- Run
npm run build inside frontend/ to verify compilation.
- Update
docs/design-system.md if the public API changes.
Output Format
frontend/src/design-system/
├── tokens/[token].ts + index.ts
├── components/[Component].tsx + index.ts
├── layouts/[Layout].tsx + index.ts
└── patterns/[Pattern].tsx + index.ts
Quality Checklist
Reference
References
