design-system-generator

# Design System Generator

## Overview

This skill generates a project-specific **`DESIGN_SYSTEM.md`** that enforces consistent UI/UX across:
- SPAs (React/Vue/Svelte/Angular)
- Traditional server-rendered sites (Laravel, Rails, Django, WordPress, etc.)
- Hybrid systems (admin + marketing + docs)

The design system must be **component-based**, portable, and practical for real implementation.

**When to use this skill:**
- Setting up UI consistency rules for a new project
- Standardizing component patterns across teams
- Establishing design tokens (colors, typography, spacing)
- Defining accessibility and performance requirements

## Interactive Workflow

### Required Questions

Ask these questions before generating the document:

```
1. Project type: SPA / Traditional / Hybrid

2. Primary framework(s): React/Vue/Svelte/Angular/None + backend/framework

3. Existing UI/template/design system already in use? (yes/no)

4. CSS approach preference:
   a) Tailwind/utility-first
   b) SCSS/SASS
   c) CSS Modules
   d) styled-components/emotion
   e) Component library (MUI/Ant/etc.)

5. Do you need light mode only, light+dark, or multi-theme?

6. Accessibility target (recommend WCAG AA) and keyboard support expectations

7. Browser/device support constraints

8. i18n/RTL requirements (if any)

9. Do you want design tokens exported? (CSS vars / JSON / both)

Reply examples:
- Short: `1a 2b 3no 4a 5b 6aa 7modern 8no 9both`
- Detailed: `SPA with Vue 3, no existing design system, using Tailwind, light+dark theme, WCAG AA, modern browsers only, no RTL, export both CSS vars and JSON`
```

### Optional Questions (ask only if relevant)

- Figma link or brand guide?
- Multi-tenant theming?
- Mobile app alignment?

## Decision Policy

### Rule 1: Prefer existing stack
If the project already uses a template or styling system, adapt to it.

### Rule 2: Choose one best-fit direction
Do not provide 3-5 "options" unless the user requests comparison. Pick one approach and commit.

### Safe