@dedesfr/prompter 0.8.23 → 1.0.0

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*

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

@@ -1,321 +0,0 @@
-# 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.