@dedesfr/prompter 0.9.0 → 1.0.0

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.

package/skills/doc-builder/SKILL.md

@@ -1,115 +0,0 @@
----
-name: doc-builder
-description: Generate interactive system flowchart documentation pages with Mermaid.js diagrams. Use this skill whenever the user asks to create documentation, document architecture, generate flowcharts, visualize system flows, or create technical diagrams for any scope — a single page, feature, module, or entire project/repo. Also use when the user says things like "create documentation for ...", "document this module", "generate system diagrams", or "visualize the architecture".
----
-
-# System Flowcharts Generator
-
-Generate interactive, self-contained HTML documentation pages with Mermaid.js flowchart diagrams. The pages follow a Mintlify-inspired design system with a sidebar, top navbar, module cards, and lazy-rendered diagrams.
-
-## When to use
-
-- User asks to document a system, module, feature, or entire repo
-- User wants flowcharts, architecture diagrams, or system visualizations
-- User says "create documentation", "document the flows", "generate diagrams", etc.
-
-## Workflow
-
-### 1. Determine Scope and Output Strategy
-
-Ask the user (or infer from context) what they want documented. Then, after exploring the codebase, **recommend** whether to use a single file or multiple files — but let the user decide.
-
-When making your recommendation, consider:
-- **Number of flows/sections**: A feature with 3 flows fits comfortably in one file. A module with 12+ flows gets unwieldy.
-- **Content density**: If each flow has detailed diagrams and step timelines, even a few flows can make a single page very long.
-- **Navigability**: A single file with sidebar sections is simpler to share and browse. Multiple files are easier to maintain and load faster individually.
-
-Present your recommendation like: "This module has 8 major flows — I'd suggest splitting into separate pages per domain area with an index page, but I can also put it all in one file if you prefer. What do you think?"
-
-For multi-file output, create an `index.html` that links to each module's page. Each module page is fully self-contained (all CSS/JS inline).
-
-### 2. Explore the Codebase
-
-Investigate the target scope to understand:
-- System architecture and module boundaries
-- Data flows and request lifecycles
-- Key processes, workflows, and decision points
-- External integrations and dependencies
-- Error handling paths
-
-### 3. Identify Flowchart Content
-
-For each section/module, identify:
-- **Overview**: What the module does, its key components (rendered as module cards)
-- **Flows**: The major workflows worth diagramming (each becomes a sidebar section with a Mermaid flowchart)
-- **Steps**: Key process steps (rendered as timeline flow steps)
-
-### 4. Generate the HTML
-
-Read the full design system spec from `references/ui-patterns.md` in this skill's directory. Follow it exactly — all design tokens, components, typography, responsive breakpoints, and JavaScript behavior.
-
-Key requirements:
-- Single self-contained HTML file per page (all CSS and JS inline)
-- Google Fonts loaded via `<link>` tag (Inter + Geist Mono)
-- Mermaid.js loaded via CDN
-- Left sidebar navigation with sections for Overview + each flow
-- Lazy Mermaid rendering (diagrams render only when their tab is activated)
-- Tab switching updates breadcrumbs and scrolls to top
-- Scroll animations via IntersectionObserver
-- Mobile responsive (sidebar collapses below 1024px)
-
-### 5. Output Location
-
-Save output to `docs/` directory by default:
-- Single scope: `docs/flowcharts.html` or `docs/<name>-flowcharts.html`
-- Multi-file: `docs/flowcharts/index.html` + `docs/flowcharts/<module>.html`
-
-Ask the user if they want a different location.
-
----
-
-## Mermaid Diagram Conventions
-
-Use consistent node styling to communicate meaning:
-
-| Color | Meaning | Mermaid Style |
-|-------|---------|---------------|
-| Cyan (`#06B6D4`) | Start/Entry point | `style A fill:#06B6D4,color:#fff` |
-| Green (`#18E299`) | System process | `style B fill:#18E299,color:#0F172A` |
-| Amber (`#F59E0B`) | Approval/Decision requiring human input | `style C fill:#F59E0B,color:#0F172A` |
-| Red (`#EF4444`) | Error/Rejection | `style D fill:#EF4444,color:#fff` |
-| White (`#ffffff`) | Standard process step | (default, no override needed) |
-
-Always include a legend after each diagram explaining the color conventions used.
-
-## Mermaid Tips
-
-- Use `flowchart TD` (top-down) for most flows
-- Use descriptive node labels in quotes: `A["User Submits Form"]`
-- Use edge labels for conditions: `C -->|"Valid"| D`
-- Keep diagrams focused — if a flow has more than ~15 nodes, split into sub-flows
-- Use subgraphs to group related steps: `subgraph "Authentication" ... end`
-
----
-
-## Index Page (Multi-file Output)
-
-When generating multiple module pages, create an `index.html` that:
-- Uses the same design system (topbar, styling)
-- Shows a grid of module cards (one per module page)
-- Each card links to the module's HTML file
-- Includes a brief project overview at the top
-
----
-
-## Design System Reference
-
-The complete UI pattern specification is bundled at `references/ui-patterns.md`. Read it before generating any HTML. It contains:
-- All design tokens (colors, spacing, dimensions)
-- Typography specs (Inter + Geist Mono)
-- Component HTML/CSS patterns (topbar, sidebar, flowchart containers, module cards, flow steps, badges, legends)
-- Mermaid.js configuration block
-- JavaScript for tab switching, lazy rendering, scroll animations
-- Responsive breakpoints
-
-Follow the spec precisely — do not improvise styles or deviate from the documented patterns.