feat: enforce minimum 5 screens + component style guide per direction

- Phase 4 now requires minimum 5 app screens + 1 Component Style Guide
- Style Guide screen renders every UI component in all states (buttons,
  inputs, cards, badges, typography, colors, spacing)
- Added screen count guidelines by product type
- PRD template includes style guide spec and build order placement
- Style guide is always last screen — references all components from
  other screens, serves as source of truth for token extraction

Author: Gabi

skills/stitch-ideate/SKILL.md

@@ -256,25 +256,44 @@ Options:
 
 ## Phase 4: Screen Architecture
 
-**Goal:** Define the screens and how they connect.
+**Goal:** Define the screens and how they connect. Minimum 5 screens per direction.
+
+**Why 5 minimum?** Fewer than 5 screens usually means the app is underspecified — you're missing flows. Stitch generates better results when it has enough context to understand the full product. More screens = more visual consistency cues for the AI.
+
+**Mandatory screen: Component Style Guide.** Every PRD includes a "Component Style Guide" screen — a single page that renders every UI component (buttons in all states, input fields, cards, badges, typography scale, color swatches, spacing examples). This screen:
+- Acts as a visual contract for the design system
+- Gives conversion skills a reference for consistent tokens
+- Catches design inconsistencies before they spread across screens
+- Is always the **last screen** in the PRD (generated after all app screens)
 
 Ask with `AskUserQuestion`:
 
-**Question 1 — "What screens do you need? Pick the essential ones."**
+**Question 1 — "What screens does your app need?"**
 Options (adapt to product type — these are examples for a SaaS tool):
 - Dashboard / Home (overview, KPIs, status)
 - List / Grid view (browse items, search, filter)
 - Detail / Editor (deep dive into a single item)
 - Settings / Configuration (account, preferences)
 - Auth (login, signup, onboarding)
 
-Allow multi-select. Then ask:
+Allow multi-select. If the user picks fewer than 4, suggest additional screens based on the product type and flows described. The goal is 5+ app screens + 1 style guide = 6+ total.
+
+Then ask:
 
 **Question 2 — "What's the most important user flow?"**
 Free text. Example: "User sees an alert on the dashboard, clicks through to the detail view, makes a change, and sees the result."
 
-After answers: Outline the screen list and primary flow:
-> "5 screens: Dashboard, Project List, Keyword Explorer, AI Config, Settings. Primary flow: Alert on dashboard -> drill into keyword data -> inject keywords to AI agent."
+After answers: Outline the screen list (including the style guide) and primary flow:
+> "6 screens: Dashboard, Project List, Keyword Explorer, AI Config, Settings, + Component Style Guide. Primary flow: Alert on dashboard -> drill into keyword data -> inject keywords to AI agent."
+
+**Screen count guidelines by product type:**
+
+| Product type | Typical screens | Examples |
+|-------------|----------------|----------|
+| Landing page / marketing site | 3-4 + style guide | Hero, Features, Pricing, Contact |
+| Simple app (tool, utility) | 5-6 + style guide | Home, Main feature, Detail, Settings, Auth |
+| Full SaaS / dashboard | 7-10 + style guide | Dashboard, List, Detail, Editor, Search, Settings, Auth, Onboarding |
+| E-commerce / marketplace | 8-12 + style guide | Home, Category, Product, Cart, Checkout, Account, Search, Reviews |
 
 ---
 
@@ -313,7 +332,8 @@ Build the full PRD document (see `resources/prd-template.md` for structure) and
 **Design Direction:** "[Direction Name]" — [one-line description]
 **Inspired by:** [Reference apps]
 
-**Screens:** [List with one-line descriptions]
+**Screens ([N] app screens + Component Style Guide):**
+[List with one-line descriptions]
 **Primary Flow:** [Flow description]
 
 **Design System:**

skills/stitch-ideate/resources/prd-template.md

@@ -27,8 +27,10 @@ Fill every section. Use the `[PLACEHOLDER]` markers as guides. Remove all placeh
 
 ## Screens
 
-[Bullet list of all screens with one-line descriptions. Format:]
+[Bullet list of all screens with one-line descriptions. Minimum 5 app screens + 1 style guide. Format:]
 - **[Screen Name]:** [Purpose in one sentence. Include the primary interaction pattern.]
+- ...
+- **Component Style Guide:** Visual reference page showing every UI component in all states — buttons, inputs, cards, badges, typography scale, color swatches, and spacing system.
 
 ---
 
@@ -119,6 +121,43 @@ Fill every section. Use the `[PLACEHOLDER]` markers as guides. Remove all placeh
 **Interactions:**
 [Hover effects, keyboard shortcuts, click targets, transitions.]
 
+### [Last]. Component Style Guide
+
+**Purpose:** Visual reference showing every UI component used across all screens, in every state.
+
+**Layout:**
+Full-width single-column page with sections for each component category. Generous spacing between sections.
+
+**Key Elements:**
+- **Color Swatches:**
+  - All palette colors displayed as labeled rectangles with hex values
+  - Background, Surface, Border, Text, Accent, Success, Warning, Error
+- **Typography Scale:**
+  - Every heading level (H1-H6), body text, captions, labels, monospace
+  - Show font name, weight, size, and line-height
+- **Buttons:**
+  - Primary, Secondary, Ghost, Destructive — each in Default, Hover, Active, Disabled states
+  - Small, Medium, Large sizes
+- **Form Controls:**
+  - Text input, Textarea, Select, Checkbox, Radio, Toggle, Slider
+  - Each in Default, Focus, Error, Disabled states
+- **Cards & Containers:**
+  - Content card, Modal, Dropdown, Tooltip, Toast notification
+  - With and without shadows/borders as defined in design system
+- **Data Display:**
+  - Badge, Tag, Avatar, Progress bar, Status indicator
+  - Table row (if tables are used in the app)
+- **Navigation:**
+  - Sidebar item, Tab, Breadcrumb, Pagination
+  - Active, Hover, Inactive states
+- **Spacing & Grid:**
+  - Visual spacing scale (4px, 8px, 12px, 16px, 24px, 32px, 48px)
+  - Grid column examples
+
+**States:** N/A — this screen shows all states of all components.
+
+**Interactions:** None — this is a static reference page.
+
 </details>
 
 ---
@@ -129,10 +168,11 @@ Fill every section. Use the `[PLACEHOLDER]` markers as guides. Remove all placeh
 **Stack:** HTML + Tailwind CSS v3
 
 **Build Order:**
-[Numbered list prioritizing the most complex/foundational screen first.]
+[Numbered list prioritizing the most complex/foundational screen first. Style guide is always last.]
 1. **[Screen Name]:** [Why build this first — what does it establish?]
 2. **[Screen Name]:** [What it reuses from #1, what new patterns it introduces.]
 3. **[Remaining screens]:** [How they derive from earlier work.]
+4. **Component Style Guide:** [Generated last — references all components from above screens. Use this as the source of truth for design token extraction.]
 
 [Optional: Tailwind config notes, custom utility needs, font loading strategy.]
 
@@ -163,8 +203,11 @@ Fill every section. Use the `[PLACEHOLDER]` markers as guides. Remove all placeh
 - Use real-sounding data: "$24.99" not "$XX.XX", "Sarah Chen" not "User Name"
 - Describe what happens on hover, not just what it looks like at rest
 - Include keyboard shortcuts if targeting technical users
+- Minimum 5 app screens + 1 Component Style Guide = 6 screens total
+- The style guide screen is always last and shows every component used across all other screens
 
 ### Build Guide
 - Always recommend building the most complex screen first — it establishes the pattern library
 - Note which screens share components (reduces build time)
+- Component Style Guide is always built last — it references all components from other screens
 - Include Tailwind config extensions needed for custom colors/fonts