@dedesfr/prompter 0.7.8 → 0.7.9

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

@@ -0,0 +1,348 @@
+# {{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*

package/skills/design-system-generator/references/extraction-patterns.md

@@ -0,0 +1,321 @@
+# Extraction Patterns Reference
+
+Mapping rules and regex patterns for extracting design tokens from CSS, HTML, React, and Tailwind sources.
+
+---
+
+## CSS Custom Properties
+
+Extract all `--` prefixed declarations from `:root`, `html`, `body`, or theme selectors.
+
+```regex
+--[\w-]+\s*:\s*[^;]+
+```
+
+Group by prefix conventions:
+- `--color-*`, `--c-*` → Colors
+- `--font-*`, `--text-*`, `--fs-*` → Typography
+- `--space-*`, `--spacing-*`, `--gap-*` → Spacing
+- `--radius-*`, `--rounded-*`, `--br-*` → Border Radii
+- `--shadow-*`, `--elevation-*` → Shadows
+- `--z-*`, `--zindex-*` → Z-Index
+- `--duration-*`, `--transition-*`, `--ease-*` → Transitions
+
+---
+
+## Color Extraction
+
+### From CSS declarations
+
+Target properties:
+```
+color, background-color, background, border-color, outline-color,
+fill, stroke, text-decoration-color, accent-color, caret-color,
+box-shadow (color component), --*-color
+```
+
+### Color format normalization
+
+Convert all formats to hex with HSL annotation:
+- `#RGB` → expand to `#RRGGBB`
+- `rgb(R, G, B)` → convert to hex
+- `rgba(R, G, B, A)` → note alpha separately
+- `hsl(H, S%, L%)` → convert to hex, keep HSL as annotation
+- `oklch(L C H)` → convert to hex equivalent
+- Named colors (`red`, `blue`) → convert to hex
+
+### Semantic color grouping heuristics
+
+| CSS Pattern | Likely Category |
+|-------------|----------------|
+| `--primary*`, `--brand*`, `--accent*` | Primary/Accent |
+| `--secondary*` | Secondary |
+| `--gray*`, `--grey*`, `--neutral*`, `--slate*` | Neutral |
+| `--success*`, `--green*`, `--positive*` | Success |
+| `--warning*`, `--yellow*`, `--amber*`, `--caution*` | Warning |
+| `--error*`, `--red*`, `--danger*`, `--destructive*` | Error |
+| `--info*`, `--blue*` | Info |
+| `--bg*`, `--background*`, `--surface*` | Surface |
+| `--text*`, `--fg*`, `--foreground*` | Text |
+
+### Color scale detection
+
+If multiple shades of the same hue exist, sort by lightness and assign scale numbers:
+- Lightest → 50
+- Darkest → 950
+- Map intermediate values to nearest: 100, 200, 300, 400, 500, 600, 700, 800, 900
+
+---
+
+## Typography Extraction
+
+### Font family detection
+
+Target properties: `font-family`, `--font-*`
+
+Classify by usage:
+- Serif/Sans-serif → heading or body
+- Monospace → code/mono
+- If only one family found → assign to both heading + body
+
+### Font size scale building
+
+Target properties: `font-size`, `--text-*`, `--fs-*`
+
+1. Collect all unique `font-size` values
+2. Sort ascending
+3. Map to scale:
+
+| Range (px) | Token |
+|-----------|-------|
+| 10–11 | `xs` |
+| 12–13 | `sm` |
+| 14–16 | `base` |
+| 17–19 | `lg` |
+| 20–23 | `xl` |
+| 24–29 | `2xl` |
+| 30–35 | `3xl` |
+| 36+ | `4xl` |
+
+### Font weight mapping
+
+Collect all `font-weight` values. Map to named tokens:
+- `100` → thin, `200` → extralight, `300` → light
+- `400` → normal, `500` → medium, `600` → semibold
+- `700` → bold, `800` → extrabold, `900` → black
+
+---
+
+## Spacing Extraction
+
+### Collecting spacing values
+
+Target properties:
+```
+margin, margin-top/right/bottom/left,
+padding, padding-top/right/bottom/left,
+gap, row-gap, column-gap, grid-gap,
+top, right, bottom, left (when used for spacing)
+```
+
+### Base unit detection
+
+1. Collect all spacing values
+2. Find GCD (Greatest Common Divisor) of the most common values
+3. Typical base units: `4px`, `8px`
+4. If values follow `4, 8, 12, 16, 20, 24, 32` → base = 4px
+5. If values follow `8, 16, 24, 32, 40, 48, 64` → base = 8px
+
+### Scale normalization
+
+Sort unique values and assign multipliers relative to base:
+```
+0px   → space-0  (0×)
+4px   → space-1  (1×)
+8px   → space-2  (2×)
+12px  → space-3  (3×)
+16px  → space-4  (4×)
+...
+```
+
+---
+
+## Border & Radius Extraction
+
+### Border radius values
+
+Target: `border-radius`, `border-*-radius`, `--radius-*`
+
+Map to scale:
+| Range (px) | Token |
+|-----------|-------|
+| 0 | `none` |
+| 1–3 | `sm` |
+| 4–7 | `md` |
+| 8–11 | `lg` |
+| 12–15 | `xl` |
+| 16+ | `2xl` |
+| 9999px, 50% | `full` |
+
+---
+
+## Shadow Extraction
+
+Target: `box-shadow`, `text-shadow`, `--shadow-*`
+
+Parse shadow values into components:
+```
+box-shadow: <offset-x> <offset-y> <blur> <spread> <color>
+```
+
+Map to elevation scale by blur radius:
+| Blur (px) | Token |
+|----------|-------|
+| 1–4 | `sm` |
+| 5–10 | `md` |
+| 11–20 | `lg` |
+| 21+ | `xl` |
+| `inset` keyword | `inner` |
+
+---
+
+## Breakpoint Extraction
+
+Target: `@media` queries with `min-width` or `max-width`
+
+```regex
+@media\s*\([^)]*(?:min|max)-width\s*:\s*([\d.]+(?:px|em|rem))[^)]*\)
+```
+
+Common breakpoint conventions:
+| Value | Token |
+|-------|-------|
+| 640px / 40em | `sm` |
+| 768px / 48em | `md` |
+| 1024px / 64em | `lg` |
+| 1280px / 80em | `xl` |
+| 1536px / 96em | `2xl` |
+
+---
+
+## Transition Extraction
+
+Target: `transition`, `transition-duration`, `transition-timing-function`, `animation-duration`
+
+### Duration bucketing
+
+| Range (ms) | Token |
+|-----------|-------|
+| 50–100 | `fast` |
+| 150–300 | `normal` |
+| 300–500 | `slow` |
+
+### Easing classification
+
+| Value | Token |
+|-------|-------|
+| `ease` | `default` |
+| `ease-in`, `cubic-bezier(0.4, 0, 1, 1)` | `in` |
+| `ease-out`, `cubic-bezier(0, 0, 0.2, 1)` | `out` |
+| `ease-in-out`, `cubic-bezier(0.4, 0, 0.2, 1)` | `in-out` |
+
+---
+
+## Z-Index Extraction
+
+Target: `z-index`, `--z-*`
+
+### Semantic assignment heuristics
+
+Assign names based on context (selector or class name):
+| Selector Pattern | Token |
+|-----------------|-------|
+| `.dropdown*`, `.menu*`, `.select*` | `dropdown` |
+| `.sticky*`, `.fixed-header*` | `sticky` |
+| `.overlay*`, `.backdrop*` | `overlay` |
+| `.modal*`, `.dialog*` | `modal` |
+| `.popover*`, `.tooltip*` | `popover` |
+| `.toast*`, `.notification*`, `.snackbar*` | `toast` |
+
+---
+
+## Tailwind Class Extraction
+
+When input uses Tailwind utility classes, map classes to tokens:
+
+### Color classes
+```regex
+(?:bg|text|border|ring|fill|stroke)-(?:[\w]+-)?(?:\d{2,3}|black|white)
+```
+Map to theme colors via `tailwind.config.js` or default palette.
+
+### Spacing classes
+```regex
+(?:m|p|gap|space-[xy])-(?:\d+(?:\.\d+)?|px|auto)
+```
+Convert Tailwind spacing units: multiply by 4px (default).
+
+### Typography classes
+```regex
+(?:text|font|leading|tracking)-(?:xs|sm|base|lg|xl|[\d]xl|thin|light|normal|medium|semibold|bold|extrabold|black|tight|snug|normal|relaxed|loose|tighter|wider)
+```
+
+### Border/Radius classes
+```regex
+rounded(?:-(?:sm|md|lg|xl|2xl|3xl|full|none))?
+border(?:-(?:\d+))?
+```
+
+---
+
+## React/JSX Pattern Extraction
+
+### Styled-components / Emotion
+
+Extract template literals from `styled.*` or `css` tagged templates:
+```regex
+styled\.(\w+)`([^`]*)`
+css`([^`]*)`
+```
+
+### Style objects
+
+Extract from `style={{ }}` JSX attributes:
+```regex
+style=\{\{([^}]*)\}\}
+```
+
+Convert camelCase properties to kebab-case for token extraction.
+
+### Theme objects
+
+Look for theme/token files:
+- `theme.ts`, `theme.js`, `tokens.ts`, `tokens.js`
+- `ThemeProvider` usage pointing to theme config
+- `createTheme()`, `extendTheme()` calls
+
+Extract nested token objects and flatten to design tokens.
+
+---
+
+## Dark Mode Detection
+
+### CSS strategies
+- `@media (prefers-color-scheme: dark)` blocks
+- `.dark` class selector overrides
+- `[data-theme="dark"]` attribute selectors
+
+### Tailwind dark mode
+- `dark:` prefix classes
+- Check `darkMode` config in `tailwind.config.js`
+
+When dark mode is detected, create a parallel token set documenting both light and dark values.
+
+---
+
+## Deduplication Rules
+
+1. **Near-identical colors**: Merge colors within ΔE < 3 (perceptual difference). Keep the more frequently used value.
+2. **Similar spacing**: If two values differ by ≤1px, keep the one that fits the base unit grid.
+3. **Duplicate fonts**: Same family with different quoting → keep one.
+4. **Shadow variants**: If two shadows only differ by color, document as one shadow with color token reference.