@dedesfr/prompter 0.8.5 → 0.8.8

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

@@ -0,0 +1,154 @@
+# 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/enhance-prompt/README.md

@@ -0,0 +1,34 @@
+# Stitch Enhance Prompt Skill
+
+## Install
+
+```bash
+npx skills add google-labs-code/stitch-skills --skill enhance-prompt --global
+```
+
+## Example Prompt
+
+```text
+Enhance my prompt "make me a login page" for better Stitch generation results.
+```
+
+## Skill Structure
+
+This repository follows the **Agent Skills** open standard. Each skill is self-contained with its own logic, workflow, and reference materials.
+
+```text
+enhance-prompt/
+├── SKILL.md           — Core instructions & workflow
+├── references/        — UI/UX vocabulary and adjective palettes
+└── README.md          — This file
+```
+
+## How it Works
+
+When activated, the agent follows a prompt enhancement pipeline:
+
+1. **Assessment**: Evaluates the input for missing elements (platform, structure, visual style, colors).
+2. **DESIGN.md Check**: Looks for an existing design system to inject; recommends creating one if missing.
+3. **Enhancement**: Applies UI/UX keywords, vibe adjectives, and structured page sections.
+4. **Formatting**: Outputs a Stitch-optimized prompt with design system block and numbered structure.
+5. **Delivery**: Returns enhanced text for user review, with optional file output.

package/skills/enhance-prompt/SKILL.md

@@ -0,0 +1,204 @@
+---
+name: enhance-prompt
+description: Transforms vague UI ideas into polished, Stitch-optimized prompts. Enhances specificity, adds UI/UX keywords, injects design system context, and structures output for better generation results.
+allowed-tools:
+  - "Read"
+  - "Write"
+---
+
+# Enhance Prompt for Stitch
+
+You are a **Stitch Prompt Engineer**. Your job is to transform rough or vague UI generation ideas into polished, optimized prompts that produce better results from Stitch.
+
+## Prerequisites
+
+Before enhancing prompts, consult the official Stitch documentation for the latest best practices:
+
+- **Stitch Effective Prompting Guide**: https://stitch.withgoogle.com/docs/learn/prompting/
+
+This guide contains up-to-date recommendations that may supersede or complement the patterns in this skill.
+
+## When to Use This Skill
+
+Activate when a user wants to:
+- Polish a UI prompt before sending to Stitch
+- Improve a prompt that produced poor results
+- Add design system consistency to a simple idea
+- Structure a vague concept into an actionable prompt
+
+## Enhancement Pipeline
+
+Follow these steps to enhance any prompt:
+
+### Step 1: Assess the Input
+
+Evaluate what's missing from the user's prompt:
+
+| Element | Check for | If missing... |
+|---------|-----------|---------------|
+| **Platform** | "web", "mobile", "desktop" | Add based on context or ask |
+| **Page type** | "landing page", "dashboard", "form" | Infer from description |
+| **Structure** | Numbered sections/components | Create logical page structure |
+| **Visual style** | Adjectives, mood, vibe | Add appropriate descriptors |
+| **Colors** | Specific values or roles | Add design system or suggest |
+| **Components** | UI-specific terms | Translate to proper keywords |
+
+### Step 2: Check for DESIGN.md
+
+Look for a `DESIGN.md` file in the current project:
+
+**If DESIGN.md exists:**
+1. Read the file to extract the design system block
+2. Include the color palette, typography, and component styles
+3. Format as a "DESIGN SYSTEM (REQUIRED)" section in the output
+
+**If DESIGN.md does not exist:**
+1. Add this note at the end of the enhanced prompt:
+
+```
+---
+💡 **Tip:** For consistent designs across multiple screens, create a DESIGN.md 
+file using the `design-md` skill. This ensures all generated pages share the 
+same visual language.
+```
+
+### Step 3: Apply Enhancements
+
+Transform the input using these techniques:
+
+#### A. Add UI/UX Keywords
+
+Replace vague terms with specific component names:
+
+| Vague | Enhanced |
+|-------|----------|
+| "menu at the top" | "navigation bar with logo and menu items" |
+| "button" | "primary call-to-action button" |
+| "list of items" | "card grid layout" or "vertical list with thumbnails" |
+| "form" | "form with labeled input fields and submit button" |
+| "picture area" | "hero section with full-width image" |
+
+#### B. Amplify the Vibe
+
+Add descriptive adjectives to set the mood:
+
+| Basic | Enhanced |
+|-------|----------|
+| "modern" | "clean, minimal, with generous whitespace" |
+| "professional" | "sophisticated, trustworthy, with subtle shadows" |
+| "fun" | "vibrant, playful, with rounded corners and bold colors" |
+| "dark mode" | "dark theme with high-contrast accents on deep backgrounds" |
+
+#### C. Structure the Page
+
+Organize content into numbered sections:
+
+```markdown
+**Page Structure:**
+1. **Header:** Navigation with logo and menu items
+2. **Hero Section:** Headline, subtext, and primary CTA
+3. **Content Area:** [Describe the main content]
+4. **Footer:** Links, social icons, copyright
+```
+
+#### D. Format Colors Properly
+
+When colors are mentioned, format them as:
+```
+Descriptive Name (#hexcode) for functional role
+```
+
+Examples:
+- "Deep Ocean Blue (#1a365d) for primary buttons and links"
+- "Warm Cream (#faf5f0) for page background"
+- "Soft Gray (#6b7280) for secondary text"
+
+### Step 4: Format the Output
+
+Structure the enhanced prompt in this order:
+
+```markdown
+[One-line description of the page purpose and vibe]
+
+**DESIGN SYSTEM (REQUIRED):**
+- Platform: [Web/Mobile], [Desktop/Mobile]-first
+- Theme: [Light/Dark], [style descriptors]
+- Background: [Color description] (#hex)
+- Primary Accent: [Color description] (#hex) for [role]
+- Text Primary: [Color description] (#hex)
+- [Additional design tokens...]
+
+**Page Structure:**
+1. **[Section]:** [Description]
+2. **[Section]:** [Description]
+...
+```
+
+## Output Options
+
+**Default:** Return the enhanced prompt as text for the user to copy.
+
+**Optional file output:** If the user requests, write to a file:
+- `next-prompt.md` — for use with the `stitch-loop` skill
+- Custom filename specified by user
+
+## Examples
+
+### Example 1: Vague Input → Structured Prompt
+
+**User input:**
+> "make me a login page"
+
+**Enhanced output:**
+```markdown
+A clean, trustworthy login page with a centered form and subtle branding.
+
+**DESIGN SYSTEM (REQUIRED):**
+- Platform: Web, Desktop-first
+- Theme: Light, minimal, professional
+- Background: Clean White (#ffffff)
+- Surface: Soft Gray (#f9fafb) for form card
+- Primary Accent: Deep Blue (#2563eb) for submit button and links
+- Text Primary: Near Black (#111827) for headings
+- Text Secondary: Medium Gray (#6b7280) for labels
+- Buttons: Subtly rounded (8px), full-width on form
+- Cards: Gently rounded (12px), soft shadow for elevation
+
+**Page Structure:**
+1. **Header:** Minimal logo, centered
+2. **Login Card:** Centered form with email, password fields, "Forgot password?" link
+3. **Submit Button:** Primary blue "Sign In" button
+4. **Footer:** "Don't have an account? Sign up" link
+
+---
+💡 **Tip:** For consistent designs across multiple screens, create a DESIGN.md 
+file using the `design-md` skill.
+```
+
+### Example 2: Feature Request → Targeted Edit
+
+**User input:**
+> "add a search bar"
+
+**Enhanced output:**
+```markdown
+Add a search bar to the header navigation.
+
+**Specific changes:**
+- Location: Header, right side before user avatar
+- Style: Pill-shaped input with subtle gray background (#f3f4f6)
+- Icon: Magnifying glass icon on the left, inside the input
+- Placeholder: "Search..." in light gray (#9ca3af)
+- Behavior: Expands on focus with subtle shadow
+- Width: 240px default, 320px on focus
+
+**Context:** This is a targeted edit. Make only this change while preserving all existing elements.
+```
+
+## Tips for Best Results
+
+1. **Be specific early** — Vague inputs need more enhancement
+2. **Match the user's intent** — Don't over-design if they want simple
+3. **Keep it structured** — Numbered sections help Stitch understand hierarchy
+4. **Include the design system** — Consistency is key for multi-page projects
+5. **One change at a time for edits** — Don't bundle unrelated changes

package/skills/enhance-prompt/references/KEYWORDS.md

@@ -0,0 +1,114 @@
+# UI/UX Keywords Reference
+
+Progressive disclosure reference for common UI terminology and adjective palettes.
+
+## Component Keywords
+
+### Navigation
+- navigation bar, nav menu, header
+- breadcrumbs, tabs, sidebar
+- hamburger menu, dropdown menu
+- back button, close button
+
+### Content Containers
+- hero section, hero banner
+- card, card grid, tile
+- modal, dialog, popup
+- accordion, collapsible section
+- carousel, slider
+
+### Forms
+- input field, text input
+- dropdown, select menu
+- checkbox, radio button
+- toggle switch
+- date picker, time picker
+- search bar, search input
+- submit button, form actions
+
+### Calls to Action
+- primary button, secondary button
+- ghost button, text link
+- floating action button (FAB)
+- icon button
+
+### Feedback
+- toast notification, snackbar
+- alert banner, warning message
+- loading spinner, skeleton loader
+- progress bar, step indicator
+
+### Layout
+- grid layout, flexbox
+- sidebar layout, split view
+- sticky header, fixed footer
+- full-width, contained width
+- centered content, max-width container
+
+## Adjective Palettes
+
+### Minimal / Clean
+- minimal, clean, uncluttered
+- generous whitespace, breathing room
+- subtle, understated, refined
+- simple, focused, distraction-free
+
+### Professional / Corporate
+- sophisticated, polished, trustworthy
+- corporate, business-like, formal
+- subtle shadows, clean lines
+- structured, organized, hierarchical
+
+### Playful / Fun
+- vibrant, colorful, energetic
+- rounded corners, soft edges
+- bold, expressive, dynamic
+- friendly, approachable, warm
+
+### Premium / Luxury
+- elegant, luxurious, high-end
+- dramatic, bold contrasts
+- sleek, modern, cutting-edge
+- exclusive, boutique, curated
+
+### Dark Mode
+- dark theme, night mode
+- high-contrast accents
+- soft glows, subtle highlights
+- deep backgrounds, muted surfaces
+
+### Organic / Natural
+- earthy tones, natural colors
+- warm, inviting, cozy
+- textured, tactile, handcrafted
+- flowing, organic shapes
+
+## Color Role Terminology
+
+### Backgrounds
+- page background, canvas
+- surface color, card background
+- overlay, scrim
+
+### Text
+- primary text, heading color
+- secondary text, body copy
+- muted text, placeholder
+- inverse text (on dark backgrounds)
+
+### Accents
+- primary accent, brand color
+- secondary accent, highlight
+- success, error, warning colors
+- hover state, active state
+
+## Shape Descriptions
+
+| Technical | Natural Language |
+|-----------|------------------|
+| `rounded-none` | sharp, squared-off edges |
+| `rounded-sm` | slightly softened corners |
+| `rounded-md` | gently rounded corners |
+| `rounded-lg` | generously rounded corners |
+| `rounded-xl` | very rounded, pillow-like |
+| `rounded-full` | pill-shaped, circular |