@dedesfr/prompter 0.9.0 → 1.1.0

package/skills/design-system-generator/SKILL.md

@@ -1,324 +0,0 @@
----
-name: design-system-generator
-description: Generate a structured design system document from HTML pages, React components, or screenshots. Extracts colors, typography, spacing, shadows, borders, breakpoints, and component patterns into a reusable design system specification. Use when creating a design system from existing UI, auditing design consistency, or bootstrapping a new project's design tokens from reference material.
----
-
-# Design System Generator
-
-Analyze UI input (HTML, React, screenshots, or live URLs) and produce a comprehensive design system document with extracted design tokens and component patterns.
-
-## Quick Start
-
-1. **DETERMINE INPUT TYPE** — Ask user for source material (files, URLs, or screenshots)
-2. **COLLECT INPUT** — Read files, scrape URLs, or analyze screenshots
-3. **EXTRACT TOKENS** — Pull colors, typography, spacing, shadows, borders, radii, breakpoints
-4. **IDENTIFY COMPONENTS** — Catalog reusable UI components and their variants
-5. **GENERATE DOCUMENT** — Output design system using the template in `assets/design-system-template.md`
-6. **SAVE OUTPUT** — Write to user-specified path or default `prompter/design-system.md`
-
----
-
-## Step 0: Determine Input Type (REQUIRED)
-
-Present the following options:
-
-```
-What source material should I analyze?
-
-1. **HTML file(s)** — Static HTML pages with inline/linked CSS
-2. **React component(s)** — JSX/TSX files with CSS/Tailwind/styled-components
-3. **Live URL** — Scrape a live webpage for design tokens
-4. **Screenshot(s)** — Analyze visual design from images
-5. **CSS/SCSS file(s)** — Extract tokens directly from stylesheets
-6. **Tailwind config** — Parse tailwind.config.js/ts for design tokens
-7. **Mixed** — Combination of the above
-
-Please select (1-7) or describe your input:
-```
-
-Wait for user response before proceeding.
-
----
-
-## Step 1: Collect & Parse Input
-
-### For HTML Files
-1. Read the HTML file(s) with `read_file`
-2. Extract all `<style>` blocks and inline `style` attributes
-3. Identify linked stylesheets via `<link rel="stylesheet">` and read those files
-4. Note all CSS custom properties (`--var-name`) declarations
-
-### For React Components
-1. Read JSX/TSX file(s)
-2. Detect styling approach:
-   - **CSS Modules** → read associated `.module.css` files
-   - **Tailwind CSS** → read `tailwind.config.js/ts`, catalog utility classes used
-   - **Styled-components/Emotion** → extract template literals
-   - **Inline styles** → extract style objects
-   - **CSS-in-JS (other)** → extract theme objects
-3. Identify component props that affect visual appearance (variant, size, color)
-
-### For Live URLs
-1. Use the scrape tool with `formats: ["html"]` to fetch the page
-2. Also request `formats: ["branding"]` if available for automated brand extraction
-3. Parse the returned HTML as if it were an HTML file input
-
-### For Screenshots
-1. Analyze the image for visual design elements
-2. Extract approximate color values using visual analysis
-3. Identify typography patterns (relative sizes, weights)
-4. Note spacing patterns and layout structure
-5. Catalog visible UI components
-
-### For CSS/SCSS Files
-1. Read the stylesheet(s) directly
-2. Parse CSS custom properties, SCSS variables, mixins
-3. Extract all token-relevant declarations
-
-### For Tailwind Config
-1. Read `tailwind.config.js` or `tailwind.config.ts`
-2. Extract `theme.extend` and base `theme` values
-3. Map Tailwind tokens to design system categories
-
----
-
-## Step 2: Extract Design Tokens
-
-For detailed extraction patterns per CSS property, see [extraction-patterns.md](references/extraction-patterns.md).
-
-Extract tokens in this order of priority:
-
-### 2.1 Colors
-- Background colors, text colors, border colors
-- Group into semantic categories: `primary`, `secondary`, `accent`, `neutral`, `success`, `warning`, `error`, `info`
-- Identify color scales (50–950 shades) when present
-- Extract opacity/alpha variants
-- Note dark mode / alternate theme colors if detected
-
-### 2.2 Typography
-- Font families (heading, body, mono)
-- Font sizes (map to scale: xs, sm, base, lg, xl, 2xl, etc.)
-- Font weights used
-- Line heights
-- Letter spacing
-- Text transform patterns
-
-### 2.3 Spacing
-- Padding and margin values used
-- Gap values in flex/grid layouts
-- Map to a consistent scale (0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24...)
-- Identify base unit (commonly 4px or 8px)
-
-### 2.4 Layout & Breakpoints
-- Container max-widths
-- Media query breakpoints (sm, md, lg, xl, 2xl)
-- Grid column counts and gutter widths
-
-### 2.5 Borders & Radii
-- Border widths
-- Border styles
-- Border radius values (none, sm, md, lg, full)
-
-### 2.6 Shadows
-- Box shadow definitions
-- Map to elevation scale (sm, md, lg, xl)
-- Note any colored or inset shadows
-
-### 2.7 Transitions & Animation
-- Transition durations
-- Easing functions
-- Named animations/keyframes
-
-### 2.8 Z-Index Scale
-- All z-index values used
-- Assign semantic names (dropdown, modal, tooltip, etc.)
-
----
-
-## Step 3: Identify Components
-
-Catalog reusable UI patterns found in the input:
-
-For each component, document:
-- **Name** — PascalCase identifier
-- **Variants** — visual or behavioral variations (e.g., `primary`, `outline`, `ghost`)
-- **Sizes** — available size options (sm, md, lg)
-- **States** — hover, focus, active, disabled appearances
-- **Tokens used** — which design tokens the component references
-
-Common components to look for:
-- Button, Input, Select, Checkbox, Radio, Toggle
-- Card, Badge, Tag, Avatar, Alert
-- Modal, Dropdown, Tooltip, Popover
-- Table, List, Tabs, Accordion
-- Navigation (Navbar, Sidebar, Breadcrumb)
-- Form layouts, Grid systems
-
----
-
-## Step 4: Generate Design System Document
-
-1. Read the template: `assets/design-system-template.md`
-2. Fill in all extracted tokens and component documentation
-3. Apply these rules:
-   - **Deduplicate** — Merge identical or near-identical values
-   - **Normalize** — Convert all color values to hex (with HSL in comments)
-   - **Scale** — Organize values into logical scales where possible
-   - **Name** — Apply semantic names to raw values
-   - **Omit empty sections** — Remove sections with no extracted tokens
-
-### Output Formats
-
-Offer the user a choice of output format:
-
-```
-Which output format would you like?
-
-1. **Markdown** (default) — Structured document for documentation
-2. **CSS Variables** — Ready-to-use :root custom properties
-3. **Tailwind Config** — tailwind.config.js theme object
-4. **JSON Tokens** — Design token JSON (W3C format compatible)
-5. **All** — Generate all formats
-
-Please select (1-5) or press Enter for Markdown:
-```
-
-### Markdown Output
-- Use the template from `assets/design-system-template.md`
-- Include color swatches using inline HTML: `<span style="background:COLOR;width:24px;height:24px;display:inline-block;border-radius:4px;vertical-align:middle"></span>`
-- Save to user-specified path or `prompter/design-system.md`
-
-### CSS Variables Output
-- Generate a `:root` block with all tokens as custom properties
-- Use `--ds-` prefix for namespacing
-- Group by category with comments
-- Save to `design-tokens.css`
-
-### Tailwind Config Output
-- Generate a `theme.extend` object with all tokens mapped
-- Save to `design-tokens.tailwind.js`
-
-### JSON Tokens Output
-- Follow W3C Design Tokens format where applicable
-- Nest by category → token name → `{ value, type, description }`
-- Save to `design-tokens.json`
-
----
-
-## Step 5: Save & Report
-
-After generating the document:
-
-1. Save to the specified output path (default: `prompter/design-system.md`)
-2. Update `AGENTS.md` files (see Step 6 below)
-3. Print a summary:
-
-```
-✅ Design System Generated
-
-📄 Output: <file-path>
-🎨 Colors: <count> tokens extracted
-🔤 Typography: <count> tokens extracted
-📐 Spacing: <count> tokens extracted
-🧩 Components: <count> identified
-📊 Source: <input-type description>
-
-Next steps:
-- Review and adjust token names for your conventions
-- Add component usage examples as needed
-- Import tokens into your project's theme configuration
-```
-
----
-
-## Step 6: Update AGENTS.md Files (REQUIRED)
-
-After saving the design system document, update both AGENTS.md files in the project so AI assistants know the design system exists and where to find it.
-
-### 6.1 Update root `AGENTS.md`
-
-Check if `AGENTS.md` exists in the project root. If it does:
-
-1. Look for an existing "Design System" section — if found, update it; if not, add it.
-2. Also update the `prompter/` directory tree if one is shown (add `design-system.md` to it).
-
-Add or update this block (place it near the Prompter Workflow or Output Location section):
-
-```markdown
-## Design System
-
-A project-level design system is generated and maintained at `prompter/design-system.md`.
-
-- Generated by the `design-system-generator` skill (`prompter/skills/design-system-generator/`)
-- Contains design tokens: colors, typography, spacing, borders, shadows, breakpoints, and components
-- Consult this file when building UI components or making styling decisions to ensure consistency
-- Regenerate it by invoking the `design-system-generator` skill with updated source material
-```
-
-If the root `AGENTS.md` has a directory tree like:
-
-```
-prompter/
-├── project.md
-└── ...
-```
-
-Add `design-system.md` to it:
-
-```
-prompter/
-├── project.md              # Project context (edit this!)
-├── design-system.md        # Generated design system (see Design System section)
-└── ...
-```
-
-### 6.2 Update `prompter/AGENTS.md`
-
-Check if `prompter/AGENTS.md` exists. If it does:
-
-1. In the **Directory Structure** section, add `design-system.md` to the `prompter/` tree if not already present:
-
-```
-prompter/
-├── project.md              # Project conventions
-├── design-system.md        # Generated design system (colors, typography, spacing, components)
-├── specs/
-...
-```
-
-2. In the **Before Any Task** > **Context Checklist**, add this entry if not already present:
-
-```markdown
-- [ ] Read `prompter/design-system.md` for UI/styling decisions (if task involves frontend)
-```
-
-3. After the checklist, add or update a **Design System** block if not already present:
-
-```markdown
-**Design System:**
-
-The project design system lives at `prompter/design-system.md`. It is generated by the `design-system-generator` skill and contains design tokens (colors, typography, spacing, borders, shadows, breakpoints) and component patterns.
-
-- Consult it before building or modifying UI components to stay consistent with established tokens
-- Regenerate it with the `design-system-generator` skill when the visual design changes significantly
-```
-
-### 6.3 Skip gracefully if files don't exist
-
-If either AGENTS.md file does not exist in the target project, skip that file silently — do not create it.
-
----
-
-## Edge Cases
-
-- **Insufficient input**: If very little design information is extractable, note gaps and suggest what the user should provide additionally
-- **Conflicting values**: When similar but not identical values exist (e.g., `#333` and `#2d2d2d`), consolidate and note the original values
-- **No components found**: If input is pure CSS variables or a config file, skip the Components section
-- **Screenshot-only input**: Mark all extracted values as "approximate" and recommend verification
-
----
-
-## Resources
-
-- **Template**: [design-system-template.md](assets/design-system-template.md) — Output document template
-- **Extraction patterns**: [extraction-patterns.md](references/extraction-patterns.md) — CSS property-to-token mapping rules and regex patterns

package/skills/design-system-generator/assets/design-system-template.md

@@ -1,348 +0,0 @@
-# {{PROJECT_NAME}} Design System
-
-> **Generated:** {{TIMESTAMP}}
-> **Source:** {{INPUT_DESCRIPTION}}
-> **Format Version:** 1.0
-
----
-
-## Table of Contents
-
-- [Colors](#colors)
-- [Typography](#typography)
-- [Spacing](#spacing)
-- [Layout & Breakpoints](#layout--breakpoints)
-- [Borders & Radii](#borders--radii)
-- [Shadows & Elevation](#shadows--elevation)
-- [Transitions & Animation](#transitions--animation)
-- [Z-Index Scale](#z-index-scale)
-- [Components](#components)
-
----
-
-## Colors
-
-### Primary
-
-| Token | Value | Swatch | HSL |
-|-------|-------|--------|-----|
-| `--ds-primary-50` | `{{VALUE}}` | <span style="background:{{VALUE}};width:24px;height:24px;display:inline-block;border-radius:4px;vertical-align:middle"></span> | `{{HSL}}` |
-| `--ds-primary-100` | `{{VALUE}}` | <span style="background:{{VALUE}};width:24px;height:24px;display:inline-block;border-radius:4px;vertical-align:middle"></span> | `{{HSL}}` |
-| `--ds-primary-200` | `{{VALUE}}` | <span style="background:{{VALUE}};width:24px;height:24px;display:inline-block;border-radius:4px;vertical-align:middle"></span> | `{{HSL}}` |
-| `--ds-primary-300` | `{{VALUE}}` | <span style="background:{{VALUE}};width:24px;height:24px;display:inline-block;border-radius:4px;vertical-align:middle"></span> | `{{HSL}}` |
-| `--ds-primary-400` | `{{VALUE}}` | <span style="background:{{VALUE}};width:24px;height:24px;display:inline-block;border-radius:4px;vertical-align:middle"></span> | `{{HSL}}` |
-| `--ds-primary-500` | `{{VALUE}}` | <span style="background:{{VALUE}};width:24px;height:24px;display:inline-block;border-radius:4px;vertical-align:middle"></span> | `{{HSL}}` |
-| `--ds-primary-600` | `{{VALUE}}` | <span style="background:{{VALUE}};width:24px;height:24px;display:inline-block;border-radius:4px;vertical-align:middle"></span> | `{{HSL}}` |
-| `--ds-primary-700` | `{{VALUE}}` | <span style="background:{{VALUE}};width:24px;height:24px;display:inline-block;border-radius:4px;vertical-align:middle"></span> | `{{HSL}}` |
-| `--ds-primary-800` | `{{VALUE}}` | <span style="background:{{VALUE}};width:24px;height:24px;display:inline-block;border-radius:4px;vertical-align:middle"></span> | `{{HSL}}` |
-| `--ds-primary-900` | `{{VALUE}}` | <span style="background:{{VALUE}};width:24px;height:24px;display:inline-block;border-radius:4px;vertical-align:middle"></span> | `{{HSL}}` |
-| `--ds-primary-950` | `{{VALUE}}` | <span style="background:{{VALUE}};width:24px;height:24px;display:inline-block;border-radius:4px;vertical-align:middle"></span> | `{{HSL}}` |
-
-<!-- Repeat for: Secondary, Accent, Neutral, Success, Warning, Error, Info -->
-<!-- Remove any color group that has no extracted tokens -->
-
-### Secondary
-
-| Token | Value | Swatch | HSL |
-|-------|-------|--------|-----|
-| `--ds-secondary-*` | ... | ... | ... |
-
-### Accent
-
-| Token | Value | Swatch | HSL |
-|-------|-------|--------|-----|
-| `--ds-accent-*` | ... | ... | ... |
-
-### Neutral
-
-| Token | Value | Swatch | HSL |
-|-------|-------|--------|-----|
-| `--ds-neutral-*` | ... | ... | ... |
-
-### Semantic
-
-| Token | Value | Swatch | Usage |
-|-------|-------|--------|-------|
-| `--ds-success` | `{{VALUE}}` | <span style="background:{{VALUE}};width:24px;height:24px;display:inline-block;border-radius:4px;vertical-align:middle"></span> | Positive actions, confirmations |
-| `--ds-warning` | `{{VALUE}}` | <span style="background:{{VALUE}};width:24px;height:24px;display:inline-block;border-radius:4px;vertical-align:middle"></span> | Caution states, alerts |
-| `--ds-error` | `{{VALUE}}` | <span style="background:{{VALUE}};width:24px;height:24px;display:inline-block;border-radius:4px;vertical-align:middle"></span> | Error states, destructive actions |
-| `--ds-info` | `{{VALUE}}` | <span style="background:{{VALUE}};width:24px;height:24px;display:inline-block;border-radius:4px;vertical-align:middle"></span> | Informational states |
-
-### Surface & Background
-
-| Token | Value | Swatch | Usage |
-|-------|-------|--------|-------|
-| `--ds-bg-base` | `{{VALUE}}` | <span style="background:{{VALUE}};width:24px;height:24px;display:inline-block;border-radius:4px;vertical-align:middle;border:1px solid #ddd"></span> | Page background |
-| `--ds-bg-surface` | `{{VALUE}}` | <span style="background:{{VALUE}};width:24px;height:24px;display:inline-block;border-radius:4px;vertical-align:middle;border:1px solid #ddd"></span> | Card/panel background |
-| `--ds-bg-muted` | `{{VALUE}}` | <span style="background:{{VALUE}};width:24px;height:24px;display:inline-block;border-radius:4px;vertical-align:middle;border:1px solid #ddd"></span> | Subtle background fills |
-| `--ds-bg-overlay` | `{{VALUE}}` | <span style="background:{{VALUE}};width:24px;height:24px;display:inline-block;border-radius:4px;vertical-align:middle"></span> | Modal/dialog overlays |
-
-### Text Colors
-
-| Token | Value | Swatch | Usage |
-|-------|-------|--------|-------|
-| `--ds-text-primary` | `{{VALUE}}` | <span style="background:{{VALUE}};width:24px;height:24px;display:inline-block;border-radius:4px;vertical-align:middle"></span> | Primary body text |
-| `--ds-text-secondary` | `{{VALUE}}` | <span style="background:{{VALUE}};width:24px;height:24px;display:inline-block;border-radius:4px;vertical-align:middle"></span> | Secondary/muted text |
-| `--ds-text-disabled` | `{{VALUE}}` | <span style="background:{{VALUE}};width:24px;height:24px;display:inline-block;border-radius:4px;vertical-align:middle"></span> | Disabled state text |
-| `--ds-text-inverse` | `{{VALUE}}` | <span style="background:{{VALUE}};width:24px;height:24px;display:inline-block;border-radius:4px;vertical-align:middle;border:1px solid #ddd"></span> | Text on dark backgrounds |
-
----
-
-## Typography
-
-### Font Families
-
-| Token | Value | Usage |
-|-------|-------|-------|
-| `--ds-font-heading` | `{{VALUE}}` | Headings, display text |
-| `--ds-font-body` | `{{VALUE}}` | Body text, paragraphs |
-| `--ds-font-mono` | `{{VALUE}}` | Code, technical content |
-
-### Font Sizes
-
-| Token | Value (px) | Value (rem) | Usage |
-|-------|-----------|-------------|-------|
-| `--ds-text-xs` | `{{PX}}` | `{{REM}}` | Fine print, captions |
-| `--ds-text-sm` | `{{PX}}` | `{{REM}}` | Secondary text, labels |
-| `--ds-text-base` | `{{PX}}` | `{{REM}}` | Body text (default) |
-| `--ds-text-lg` | `{{PX}}` | `{{REM}}` | Emphasized body text |
-| `--ds-text-xl` | `{{PX}}` | `{{REM}}` | Section headers |
-| `--ds-text-2xl` | `{{PX}}` | `{{REM}}` | Page headers |
-| `--ds-text-3xl` | `{{PX}}` | `{{REM}}` | Large display text |
-| `--ds-text-4xl` | `{{PX}}` | `{{REM}}` | Hero text |
-
-### Font Weights
-
-| Token | Value | Usage |
-|-------|-------|-------|
-| `--ds-font-light` | `300` | Light emphasis |
-| `--ds-font-normal` | `400` | Body text |
-| `--ds-font-medium` | `500` | Subtle emphasis |
-| `--ds-font-semibold` | `600` | Strong emphasis |
-| `--ds-font-bold` | `700` | Headings, CTAs |
-
-### Line Heights
-
-| Token | Value | Usage |
-|-------|-------|-------|
-| `--ds-leading-tight` | `{{VALUE}}` | Headings, compact text |
-| `--ds-leading-normal` | `{{VALUE}}` | Body text |
-| `--ds-leading-relaxed` | `{{VALUE}}` | Long-form reading |
-
-### Letter Spacing
-
-| Token | Value | Usage |
-|-------|-------|-------|
-| `--ds-tracking-tight` | `{{VALUE}}` | Large headings |
-| `--ds-tracking-normal` | `{{VALUE}}` | Body text |
-| `--ds-tracking-wide` | `{{VALUE}}` | Uppercase labels, buttons |
-
----
-
-## Spacing
-
-**Base unit:** `{{BASE_UNIT}}px`
-
-| Token | Value (px) | Value (rem) | Multiplier |
-|-------|-----------|-------------|------------|
-| `--ds-space-0` | `0` | `0` | 0× |
-| `--ds-space-1` | `{{VALUE}}` | `{{REM}}` | 1× |
-| `--ds-space-2` | `{{VALUE}}` | `{{REM}}` | 2× |
-| `--ds-space-3` | `{{VALUE}}` | `{{REM}}` | 3× |
-| `--ds-space-4` | `{{VALUE}}` | `{{REM}}` | 4× |
-| `--ds-space-5` | `{{VALUE}}` | `{{REM}}` | 5× |
-| `--ds-space-6` | `{{VALUE}}` | `{{REM}}` | 6× |
-| `--ds-space-8` | `{{VALUE}}` | `{{REM}}` | 8× |
-| `--ds-space-10` | `{{VALUE}}` | `{{REM}}` | 10× |
-| `--ds-space-12` | `{{VALUE}}` | `{{REM}}` | 12× |
-| `--ds-space-16` | `{{VALUE}}` | `{{REM}}` | 16× |
-| `--ds-space-20` | `{{VALUE}}` | `{{REM}}` | 20× |
-| `--ds-space-24` | `{{VALUE}}` | `{{REM}}` | 24× |
-
----
-
-## Layout & Breakpoints
-
-### Breakpoints
-
-| Token | Value | Description |
-|-------|-------|-------------|
-| `--ds-screen-sm` | `{{VALUE}}` | Small devices (phones landscape) |
-| `--ds-screen-md` | `{{VALUE}}` | Medium devices (tablets) |
-| `--ds-screen-lg` | `{{VALUE}}` | Large devices (desktops) |
-| `--ds-screen-xl` | `{{VALUE}}` | Extra large devices (wide desktops) |
-| `--ds-screen-2xl` | `{{VALUE}}` | Ultra wide displays |
-
-### Container
-
-| Token | Value | Usage |
-|-------|-------|-------|
-| `--ds-container-sm` | `{{VALUE}}` | Narrow content (articles) |
-| `--ds-container-md` | `{{VALUE}}` | Standard content |
-| `--ds-container-lg` | `{{VALUE}}` | Wide content |
-| `--ds-container-xl` | `{{VALUE}}` | Full-width content |
-
----
-
-## Borders & Radii
-
-### Border Widths
-
-| Token | Value | Usage |
-|-------|-------|-------|
-| `--ds-border-0` | `0px` | No border |
-| `--ds-border-1` | `1px` | Default borders |
-| `--ds-border-2` | `2px` | Emphasized borders |
-| `--ds-border-4` | `4px` | Heavy borders |
-
-### Border Radii
-
-| Token | Value | Preview | Usage |
-|-------|-------|---------|-------|
-| `--ds-radius-none` | `0px` | <span style="width:24px;height:24px;display:inline-block;background:#6366f1;border-radius:0px"></span> | Sharp corners |
-| `--ds-radius-sm` | `{{VALUE}}` | <span style="width:24px;height:24px;display:inline-block;background:#6366f1;border-radius:{{VALUE}}"></span> | Subtle rounding |
-| `--ds-radius-md` | `{{VALUE}}` | <span style="width:24px;height:24px;display:inline-block;background:#6366f1;border-radius:{{VALUE}}"></span> | Default rounding |
-| `--ds-radius-lg` | `{{VALUE}}` | <span style="width:24px;height:24px;display:inline-block;background:#6366f1;border-radius:{{VALUE}}"></span> | Prominent rounding |
-| `--ds-radius-xl` | `{{VALUE}}` | <span style="width:24px;height:24px;display:inline-block;background:#6366f1;border-radius:{{VALUE}}"></span> | Heavy rounding |
-| `--ds-radius-full` | `9999px` | <span style="width:24px;height:24px;display:inline-block;background:#6366f1;border-radius:9999px"></span> | Circular/pill shapes |
-
----
-
-## Shadows & Elevation
-
-| Token | Value | Usage |
-|-------|-------|-------|
-| `--ds-shadow-sm` | `{{VALUE}}` | Subtle depth (cards at rest) |
-| `--ds-shadow-md` | `{{VALUE}}` | Medium depth (dropdowns) |
-| `--ds-shadow-lg` | `{{VALUE}}` | Strong depth (modals, popovers) |
-| `--ds-shadow-xl` | `{{VALUE}}` | Maximum depth (floating elements) |
-| `--ds-shadow-inner` | `{{VALUE}}` | Inset shadow (pressed states) |
-
----
-
-## Transitions & Animation
-
-### Durations
-
-| Token | Value | Usage |
-|-------|-------|-------|
-| `--ds-duration-fast` | `{{VALUE}}` | Micro-interactions (hover, focus) |
-| `--ds-duration-normal` | `{{VALUE}}` | Standard transitions |
-| `--ds-duration-slow` | `{{VALUE}}` | Complex animations, page transitions |
-
-### Easing Functions
-
-| Token | Value | Usage |
-|-------|-------|-------|
-| `--ds-ease-default` | `{{VALUE}}` | General purpose |
-| `--ds-ease-in` | `{{VALUE}}` | Elements exiting view |
-| `--ds-ease-out` | `{{VALUE}}` | Elements entering view |
-| `--ds-ease-in-out` | `{{VALUE}}` | Elements moving in view |
-
----
-
-## Z-Index Scale
-
-| Token | Value | Usage |
-|-------|-------|-------|
-| `--ds-z-base` | `0` | Default stacking |
-| `--ds-z-dropdown` | `{{VALUE}}` | Dropdown menus |
-| `--ds-z-sticky` | `{{VALUE}}` | Sticky headers |
-| `--ds-z-overlay` | `{{VALUE}}` | Backdrop overlays |
-| `--ds-z-modal` | `{{VALUE}}` | Modal dialogs |
-| `--ds-z-popover` | `{{VALUE}}` | Popovers, tooltips |
-| `--ds-z-toast` | `{{VALUE}}` | Toast notifications |
-
----
-
-## Components
-
-<!-- Repeat this block for each identified component -->
-
-### {{ComponentName}}
-
-**Description:** {{Brief description of the component}}
-
-#### Variants
-
-| Variant | Preview | Usage |
-|---------|---------|-------|
-| `primary` | {{visual or code example}} | Main CTA |
-| `secondary` | {{visual or code example}} | Secondary actions |
-| `outline` | {{visual or code example}} | Tertiary actions |
-| `ghost` | {{visual or code example}} | Subtle actions |
-
-#### Sizes
-
-| Size | Font Size | Padding | Height |
-|------|-----------|---------|--------|
-| `sm` | `{{VALUE}}` | `{{VALUE}}` | `{{VALUE}}` |
-| `md` | `{{VALUE}}` | `{{VALUE}}` | `{{VALUE}}` |
-| `lg` | `{{VALUE}}` | `{{VALUE}}` | `{{VALUE}}` |
-
-#### States
-
-| State | Background | Border | Text | Shadow |
-|-------|-----------|--------|------|--------|
-| Default | `{{VALUE}}` | `{{VALUE}}` | `{{VALUE}}` | `{{VALUE}}` |
-| Hover | `{{VALUE}}` | `{{VALUE}}` | `{{VALUE}}` | `{{VALUE}}` |
-| Focus | `{{VALUE}}` | `{{VALUE}}` | `{{VALUE}}` | `{{VALUE}}` |
-| Active | `{{VALUE}}` | `{{VALUE}}` | `{{VALUE}}` | `{{VALUE}}` |
-| Disabled | `{{VALUE}}` | `{{VALUE}}` | `{{VALUE}}` | `{{VALUE}}` |
-
-#### Tokens Used
-
-```
---ds-primary-500, --ds-primary-600 (hover)
---ds-radius-md
---ds-shadow-sm
---ds-font-medium
---ds-text-sm (sm), --ds-text-base (md), --ds-text-lg (lg)
-```
-
-<!-- End component block -->
-
----
-
-## Dark Mode
-
-<!-- Include only if dark mode tokens were detected -->
-
-| Light Token | Light Value | Dark Value | Swatch (Dark) |
-|-------------|------------|------------|----------------|
-| `--ds-bg-base` | `{{LIGHT}}` | `{{DARK}}` | <span style="background:{{DARK}};width:24px;height:24px;display:inline-block;border-radius:4px;vertical-align:middle"></span> |
-| `--ds-bg-surface` | `{{LIGHT}}` | `{{DARK}}` | <span style="background:{{DARK}};width:24px;height:24px;display:inline-block;border-radius:4px;vertical-align:middle"></span> |
-| `--ds-text-primary` | `{{LIGHT}}` | `{{DARK}}` | <span style="background:{{DARK}};width:24px;height:24px;display:inline-block;border-radius:4px;vertical-align:middle"></span> |
-
----
-
-## Quick Reference — CSS Variables
-
-```css
-:root {
-  /* Colors */
-  {{COLOR_VARIABLES}}
-
-  /* Typography */
-  {{TYPOGRAPHY_VARIABLES}}
-
-  /* Spacing */
-  {{SPACING_VARIABLES}}
-
-  /* Borders & Radii */
-  {{BORDER_VARIABLES}}
-
-  /* Shadows */
-  {{SHADOW_VARIABLES}}
-
-  /* Transitions */
-  {{TRANSITION_VARIABLES}}
-
-  /* Z-Index */
-  {{ZINDEX_VARIABLES}}
-}
-```
-
----
-
-*Generated by Design System Generator skill*