@dedesfr/prompter 0.8.23 → 1.0.0

package/skills/design-md/examples/DESIGN.md

@@ -1,154 +0,0 @@
-# Design System: Furniture Collections List
-**Project ID:** 13534454087919359824
-
-## 1. Visual Theme & Atmosphere
-
-The Furniture Collections List embodies a **sophisticated, minimalist sanctuary** that marries the pristine simplicity of Scandinavian design with the refined visual language of luxury editorial presentation. The interface feels **spacious and tranquil**, prioritizing breathing room and visual clarity above all else. The design philosophy is gallery-like and photography-first, allowing each furniture piece to command attention as an individual art object.
-
-The overall mood is **airy yet grounded**, creating an aspirational aesthetic that remains approachable and welcoming. The interface feels **utilitarian in its restraint** but elegant in its execution, with every element serving a clear purpose while maintaining visual sophistication. The atmosphere evokes the serene ambiance of a high-end furniture showroom where customers can browse thoughtfully without visual overwhelm.
-
-**Key Characteristics:**
-- Expansive whitespace creating generous breathing room between elements
-- Clean, architectural grid system with structured content blocks
-- Photography-first presentation with minimal UI interference
-- Whisper-soft visual hierarchy that guides without shouting
-- Refined, understated interactive elements
-- Professional yet inviting editorial tone
-
-## 2. Color Palette & Roles
-
-### Primary Foundation
-- **Warm Barely-There Cream** (#FCFAFA) – Primary background color. Creates an almost imperceptible warmth that feels more inviting than pure white, serving as the serene canvas for the entire experience.
-- **Crisp Very Light Gray** (#F5F5F5) – Secondary surface color used for card backgrounds and content areas. Provides subtle visual separation while maintaining the airy, ethereal quality.
-
-### Accent & Interactive
-- **Deep Muted Teal-Navy** (#294056) – The sole vibrant accent in the palette. Used exclusively for primary call-to-action buttons (e.g., "Shop Now", "View all products"), active navigation links, selected filter states, and subtle interaction highlights. This sophisticated anchor color creates visual focus points without disrupting the serene neutral foundation.
-
-### Typography & Text Hierarchy
-- **Charcoal Near-Black** (#2C2C2C) – Primary text color for headlines and product names. Provides strong readable contrast while being softer and more refined than pure black.
-- **Soft Warm Gray** (#6B6B6B) – Secondary text used for body copy, product descriptions, and supporting metadata. Creates clear typographic hierarchy without harsh contrast.
-- **Ultra-Soft Silver Gray** (#E0E0E0) – Tertiary color for borders, dividers, and subtle structural elements. Creates separation so gentle it's almost imperceptible.
-
-### Functional States (Reserved for system feedback)
-- **Success Moss** (#10B981) – Stock availability, confirmation states, positive indicators
-- **Alert Terracotta** (#EF4444) – Low stock warnings, error states, critical alerts
-- **Informational Slate** (#64748B) – Neutral system messages, informational callouts
-
-## 3. Typography Rules
-
-**Primary Font Family:** Manrope  
-**Character:** Modern, geometric sans-serif with gentle humanist warmth. Slightly rounded letterforms that feel contemporary yet approachable.
-
-### Hierarchy & Weights
-- **Display Headlines (H1):** Semi-bold weight (600), generous letter-spacing (0.02em for elegance), 2.75-3.5rem size. Used sparingly for hero sections and major page titles.
-- **Section Headers (H2):** Semi-bold weight (600), subtle letter-spacing (0.01em), 2-2.5rem size. Establishes clear content zones and featured collections.
-- **Subsection Headers (H3):** Medium weight (500), normal letter-spacing, 1.5-1.75rem size. Product names and category labels.
-- **Body Text:** Regular weight (400), relaxed line-height (1.7), 1rem size. Descriptions and supporting content prioritize comfortable readability.
-- **Small Text/Meta:** Regular weight (400), slightly tighter line-height (1.5), 0.875rem size. Prices, availability, and metadata remain legible but visually recessive.
-- **CTA Buttons:** Medium weight (500), subtle letter-spacing (0.01em), 1rem size. Balanced presence without visual aggression.
-
-### Spacing Principles
-- Headers use slightly expanded letter-spacing for refined elegance
-- Body text maintains generous line-height (1.7) for effortless reading
-- Consistent vertical rhythm with 2-3rem between related text blocks
-- Large margins (4-6rem) between major sections to reinforce spaciousness
-
-## 4. Component Stylings
-
-### Buttons
-- **Shape:** Subtly rounded corners (8px/0.5rem radius) – approachable and modern without appearing playful or childish
-- **Primary CTA:** Deep Muted Teal-Navy (#294056) background with pure white text, comfortable padding (0.875rem vertical, 2rem horizontal)
-- **Hover State:** Subtle darkening to deeper navy, smooth 250ms ease-in-out transition
-- **Focus State:** Soft outer glow in the primary color for keyboard navigation accessibility
-- **Secondary CTA (if needed):** Outlined style with Deep Muted Teal-Navy border, transparent background, hover fills with whisper-soft teal tint
-
-### Cards & Product Containers
-- **Corner Style:** Gently rounded corners (12px/0.75rem radius) creating soft, refined edges
-- **Background:** Alternates between Warm Barely-There Cream and Crisp Very Light Gray based on layering needs
-- **Shadow Strategy:** Flat by default. On hover, whisper-soft diffused shadow appears (`0 2px 8px rgba(0,0,0,0.06)`) creating subtle depth
-- **Border:** Optional hairline border (1px) in Ultra-Soft Silver Gray for delicate definition when shadows aren't present
-- **Internal Padding:** Generous 2-2.5rem creating comfortable breathing room for content
-- **Image Treatment:** Full-bleed at the top of cards, square or 4:3 ratio, seamless edge-to-edge presentation
-
-### Navigation
-- **Style:** Clean horizontal layout with generous spacing (2-3rem) between menu items
-- **Typography:** Medium weight (500), subtle uppercase, expanded letter-spacing (0.06em) for refined sophistication
-- **Default State:** Charcoal Near-Black text
-- **Active/Hover State:** Smooth 200ms color transition to Deep Muted Teal-Navy
-- **Active Indicator:** Thin underline (2px) in Deep Muted Teal-Navy appearing below current section
-- **Mobile:** Converts to elegant hamburger menu with sliding drawer
-
-### Inputs & Forms
-- **Stroke Style:** Refined 1px border in Soft Warm Gray
-- **Background:** Warm Barely-There Cream with transition to Crisp Very Light Gray on focus
-- **Corner Style:** Matching button roundness (8px/0.5rem) for visual consistency
-- **Focus State:** Border color shifts to Deep Muted Teal-Navy with subtle outer glow
-- **Padding:** Comfortable 0.875rem vertical, 1.25rem horizontal for touch-friendly targets
-- **Placeholder Text:** Ultra-Soft Silver Gray, elegant and unobtrusive
-
-### Product Cards (Specific Pattern)
-- **Image Area:** Square (1:1) or landscape (4:3) ratio filling card width completely
-- **Content Stack:** Product name (H3), brief descriptor, material/finish, price
-- **Price Display:** Emphasized with semi-bold weight (600) in Charcoal Near-Black
-- **Hover Behavior:** Gentle lift effect (translateY -4px) combined with enhanced shadow
-- **Spacing:** Consistent 1.5rem internal padding below image
-
-## 5. Layout Principles
-
-### Grid & Structure
-- **Max Content Width:** 1440px for optimal readability and visual balance on large displays
-- **Grid System:** Responsive 12-column grid with fluid gutters (24px mobile, 32px desktop)
-- **Product Grid:** 4 columns on large desktop, 3 on desktop, 2 on tablet, 1 on mobile
-- **Breakpoints:** 
-  - Mobile: <768px
-  - Tablet: 768-1024px  
-  - Desktop: 1024-1440px
-  - Large Desktop: >1440px
-
-### Whitespace Strategy (Critical to the Design)
-- **Base Unit:** 8px for micro-spacing, 16px for component spacing
-- **Vertical Rhythm:** Consistent 2rem (32px) base unit between related elements
-- **Section Margins:** Generous 5-8rem (80-128px) between major sections creating dramatic breathing room
-- **Edge Padding:** 1.5rem (24px) mobile, 3rem (48px) tablet/desktop for comfortable framing
-- **Hero Sections:** Extra-generous top/bottom padding (8-12rem) for impactful presentation
-
-### Alignment & Visual Balance
-- **Text Alignment:** Left-aligned for body and navigation (optimal readability), centered for hero headlines and featured content
-- **Image to Text Ratio:** Heavily weighted toward imagery (70-30 split) reinforcing photography-first philosophy
-- **Asymmetric Balance:** Large hero images offset by compact, refined text blocks
-- **Visual Weight Distribution:** Strategic use of whitespace to draw eyes to hero products and primary CTAs
-- **Reading Flow:** Clear top-to-bottom, left-to-right pattern with intentional focal points
-
-### Responsive Behavior & Touch
-- **Mobile-First Foundation:** Core experience designed and perfected for smallest screens first
-- **Progressive Enhancement:** Additional columns, imagery, and details added gracefully at larger breakpoints
-- **Touch Targets:** Minimum 44x44px for all interactive elements (WCAG AAA compliant)
-- **Image Optimization:** Responsive images with appropriate resolutions for each breakpoint, lazy-loading for performance
-- **Collapsing Strategy:** Navigation collapses to hamburger, grid reduces columns, padding scales proportionally
-
-## 6. Design System Notes for Stitch Generation
-
-When creating new screens for this project using Stitch, reference these specific instructions:
-
-### Language to Use
-- **Atmosphere:** "Sophisticated minimalist sanctuary with gallery-like spaciousness"
-- **Button Shapes:** "Subtly rounded corners" (not "rounded-md" or "8px")
-- **Shadows:** "Whisper-soft diffused shadows on hover" (not "shadow-sm")
-- **Spacing:** "Generous breathing room" and "expansive whitespace"
-
-### Color References
-Always use the descriptive names with hex codes:
-- Primary CTA: "Deep Muted Teal-Navy (#294056)"
-- Backgrounds: "Warm Barely-There Cream (#FCFAFA)" or "Crisp Very Light Gray (#F5F5F5)"
-- Text: "Charcoal Near-Black (#2C2C2C)" or "Soft Warm Gray (#6B6B6B)"
-
-### Component Prompts
-- "Create a product card with gently rounded corners, full-bleed square product image, and whisper-soft shadow on hover"
-- "Design a primary call-to-action button in Deep Muted Teal-Navy (#294056) with subtle rounded corners and comfortable padding"
-- "Add a navigation bar with generous spacing between items, using medium-weight Manrope with subtle uppercase and expanded letter-spacing"
-
-### Incremental Iteration
-When refining existing screens:
-1. Focus on ONE component at a time (e.g., "Update the product grid cards")
-2. Be specific about what to change (e.g., "Increase the internal padding of product cards from 1.5rem to 2rem")
-3. Reference this design system language consistently

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