@theproductguy/create-mission-control 1.0.0 → 1.0.4

package/src/template/{design/.claude → design-system/.gemini}/commands/design-os/design-shell.md

@@ -2,6 +2,9 @@
 
 You are helping the user design the application shell — the persistent navigation and layout that wraps all sections. This is a screen design, not implementation code.
 
+**CRITICAL: Consult the `frontend-design` skill (Impeccable) for spatial design and layout.**
+You must avoid "AI Slop" layouts (e.g., everything inside a card, unnecessary glassmorphism, generic dashboards).
+
 ## Step 1: Check Prerequisites
 
 First, verify prerequisites exist:
@@ -22,26 +25,23 @@ If design tokens are missing, show a warning but continue:
 
 "Note: Design tokens haven't been defined yet. I'll proceed with default styling, but you may want to run `/design-tokens` first for consistent colors and typography."
 
-## Step 2: Analyze Product Structure
-
-Review the roadmap sections and present navigation options:
+## Step 2: Analyze Product Structure and Aesthetics
 
-"I'm designing the shell for **[Product Name]**. Based on your roadmap, you have [N] sections:
+Review the roadmap sections and consult Impeccable principles for the layout.
 
-1. **[Section 1]** — [Description]
-2. **[Section 2]** — [Description]
-3. **[Section 3]** — [Description]
+"I'm designing the shell for **[Product Name]**. Based on your roadmap, you have [N] sections.
+Using **Impeccable** design principles, let's aim for a layout that uses space and rhythm effectively (avoiding the generic 'everything in a card' trap).
 
-Let's decide on the shell layout. Common patterns:
+Common patterns:
 
-**A. Sidebar Navigation** — Vertical nav on the left, content on the right
-   Best for: Apps with many sections, dashboard-style tools, admin panels
+**A. Modern Sidebar** — Vertical nav on the left.
+*Impeccable Tip:* Don't box the content area. Let the content breathe on the right.
 
-**B. Top Navigation** — Horizontal nav at top, content below
-   Best for: Simpler apps, marketing-style products, fewer sections
+**B. Refined Top Nav** — Horizontal nav at top.
+*Impeccable Tip:* Great for marketing-heavy or simpler apps. Use generous whitespace.
 
-**C. Minimal Header** — Just logo + user menu, sections accessed differently
-   Best for: Single-purpose tools, wizard-style flows
+**C. Minimal/Focus** — Just logo + user menu.
+*Impeccable Tip:* Radical simplicity.
 
 Which pattern fits **[Product Name]** best?"
 
@@ -52,9 +52,9 @@ Wait for their response.
 Use AskUserQuestion to clarify:
 
 - "Where should the user menu (avatar, logout) appear?"
-- "Do you want the sidebar collapsible on mobile, or should it become a hamburger menu?"
-- "Any additional items in the navigation? (Settings, Help, etc.)"
-- "What should the 'home' or default view be when the app loads?"
+- "Do you want the sidebar collapsible?"
+- "Any additional items in the navigation?"
+- "What vibe should the shell have? (e.g., Transparency/Glass (use sparingly), Solid/Grounded, or Floating/Detached?)"
 
 ## Step 4: Present Shell Specification
 
@@ -66,13 +66,12 @@ Once you understand their preferences:
 
 **Navigation Structure:**
 - [Nav Item 1] → [Section]
-- [Nav Item 2] → [Section]
-- [Nav Item 3] → [Section]
-- [Additional items like Settings, Help]
+...
 
-**User Menu:**
-- Location: [Top right / Bottom of sidebar]
-- Contents: Avatar, user name, logout
+**Aesthetic Decisions (Impeccable):**
+- **Background:** [e.g., Subtle tint of primary color, NOT pure white/gray]
+- **Spacing:** [e.g., Generous padding, fluid layout]
+- **Borders:** [e.g., Delicate or None; avoiding thick borders]
 
 **Responsive Behavior:**
 - Desktop: [How it looks]
@@ -93,32 +92,30 @@ Create `/product/shell/spec.md`:
 [Description of the shell design and its purpose]
 
 ## Navigation Structure
-- [Nav Item 1] → [Section 1]
-- [Nav Item 2] → [Section 2]
-- [Nav Item 3] → [Section 3]
-- [Any additional nav items]
+...
 
-## User Menu
-[Description of user menu location and contents]
+## Impeccable Design Choices
+- **Layout Philosophy:** [e.g., Unboxed content, asymmetric grid]
+- **Visuals:** [e.g., No drop shadows on cards, use flat clean lines]
 
 ## Layout Pattern
 [Description of the layout — sidebar, top nav, etc.]
 
 ## Responsive Behavior
-- **Desktop:** [Behavior]
-- **Tablet:** [Behavior]
-- **Mobile:** [Behavior]
-
-## Design Notes
-[Any additional design decisions or notes]
+...
 ```
 
 ## Step 6: Create Shell Components
 
-Create the shell components at `src/shell/components/`:
+Create the shell components at `src/shell/components/`.
+
+**Impeccable Code Rules:**
+- **No Pure Black/White**: Use `bg-stone-50` or `text-zinc-900`.
+- **Motion**: Use `transition-all duration-300 ease-out-expo` (if configured) or custom bezier. Avoid default `ease-in-out`.
+- **Touch Targets**: Ensure minimum 44px for clickable areas.
 
 ### AppShell.tsx
-The main wrapper component that accepts children and provides the layout structure.
+The main wrapper component.
 
 ```tsx
 interface AppShellProps {
@@ -131,22 +128,14 @@ interface AppShellProps {
 ```
 
 ### MainNav.tsx
-The navigation component (sidebar or top nav based on the chosen pattern).
+The navigation component.
 
 ### UserMenu.tsx
-The user menu with avatar and dropdown.
+The user menu.
 
 ### index.ts
 Export all components.
 
-**Component Requirements:**
-- Use props for all data and callbacks (portable)
-- Apply design tokens if they exist (colors, fonts)
-- Support light and dark mode with `dark:` variants
-- Be mobile responsive
-- Use Tailwind CSS for styling
-- Use lucide-react for icons
-
 ## Step 7: Create Shell Preview
 
 Create `src/shell/ShellPreview.tsx` — a preview wrapper for viewing the shell in Design OS:
@@ -158,8 +147,7 @@ import { AppShell } from './components/AppShell'
 export default function ShellPreview() {
   const navigationItems = [
     { label: '[Section 1]', href: '/section-1', isActive: true },
-    { label: '[Section 2]', href: '/section-2' },
-    { label: '[Section 3]', href: '/section-3' },
+    // ...
   ]
 
   const user = {
@@ -175,10 +163,18 @@ export default function ShellPreview() {
       onLogout={() => console.log('Logout')}
     >
       <div className="p-8">
-        <h1 className="text-2xl font-bold mb-4">Content Area</h1>
-        <p className="text-stone-600 dark:text-stone-400">
-          Section content will render here.
-        </p>
+        <div className="mb-8">
+             <h1 className="text-4xl font-display font-bold mb-4 text-foreground tracking-tight">Content Area</h1>
+             <p className="text-xl text-muted-foreground leading-relaxed max-w-2xl">
+               Section content will render here. Notice the typography and spacing (Impeccable).
+             </p>
+        </div>
+        {/* Example Grid to show Rhythm */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            <div className="h-32 bg-secondary/30 rounded-xl border border-border/50"></div>
+            <div className="h-32 bg-secondary/30 rounded-xl border border-border/50"></div>
+            <div className="h-32 bg-primary/5 rounded-xl border border-primary/10"></div>
+        </div>
       </div>
     </AppShell>
   )
@@ -208,31 +204,61 @@ Let the user know:
 "I've designed the application shell for **[Product Name]**:
 
 **Created files:**
-- `/product/shell/spec.md` — Shell specification
-- `src/shell/components/AppShell.tsx` — Main shell wrapper
-- `src/shell/components/MainNav.tsx` — Navigation component
-- `src/shell/components/UserMenu.tsx` — User menu component
-- `src/shell/components/index.ts` — Component exports
-- `src/shell/ShellPreview.tsx` — Preview wrapper
-
-**Shell features:**
-- [Layout pattern] layout
-- Navigation for all [N] sections
-- User menu with avatar and logout
-- Mobile responsive design
-- Light/dark mode support
+- `/product/shell/spec.md`
+- `src/shell/components/...`
+- `src/shell/ShellPreview.tsx`
 
-**Important:** Restart your dev server to see the changes.
+**Impeccable Features:**
+- **Navigation**: Clean, accessible, spacious.
+- **Aesthetics**: Using your custom palette and fonts.
+- **Motion**: Smooth transitions.
 
-When you design section screens with `/design-screen`, they will render inside this shell, showing the full app experience.
+**Important:** Restart your dev server to see the changes.
 
 Next: Run `/shape-section` to start designing your first section."
 
 ## Important Notes
 
+- **Aesthetics First**: The shell sets the tone. Make it high quality.
 - The shell is a screen design — it demonstrates the navigation and layout design
 - Components are props-based and portable to the user's codebase
 - The preview wrapper is for Design OS only — not exported
 - Apply design tokens when available for consistent styling
-- Keep the shell focused on navigation chrome — no authentication UI
 - Section screen designs will render inside the shell's content area
+
+## Step 10: Auto-Audit (Impeccable QA)
+
+Before completing, perform a self-audit against Impeccable layout principles.
+
+**Check:**
+1. Is everything wrapped in cards? (Nested cards, card grids) → Fail
+2. Is glassmorphism used for decoration rather than function? → Fail
+3. Is the layout symmetric and predictable (centered everything)? → Warn
+4. Are there "hero metrics" layouts (big number, small label)? → Fail
+5. Is spacing varied (rhythm) or uniform (monotonous)? → Pass/Fail
+6. Are touch targets ≥ 44x44px? → Pass/Fail
+
+**If any checks fail:**
+"⚠️ **Impeccable Audit Warning**: [Issue]. This layout may appear AI-generated. Consider revising."
+
+**If all checks pass:**
+"✅ **Impeccable Audit Passed**: Shell design meets quality standards."
+
+Save this audit result to `design-system/QA/shell-audit.md`:
+```markdown
+# Shell Design Audit
+
+**Date**: [timestamp]
+**Status**: [Pass/Fail]
+
+## Checks
+- [x] No nested cards
+- [x] Glassmorphism used purposefully (or not at all)
+- [x] Asymmetric/intentional layout
+- [x] No hero metric templates
+- [x] Visual rhythm in spacing
+- [x] Touch targets adequate
+
+## Notes
+[Any observations]
+```

package/src/template/design-system/.gemini/commands/design-os/design-tokens.md

@@ -0,0 +1,211 @@
+# Design Tokens
+
+You are helping the user choose colors and typography for their product. These design tokens will be used consistently across all screen designs and the application shell.
+
+**CRITICAL: Consult the `frontend-design` skill (Impeccable) for all aesthetics.**
+You must avoid "AI Slop" (generic choices like Inter, plain Tailwind colors, and predictable pairings).
+
+## Step 1: Check Prerequisites
+
+First, verify that the product overview exists:
+
+Read `/product/product-overview.md` to understand what the product is.
+
+If it doesn't exist:
+
+"Before defining your design system, you'll need to establish your product vision. Please run `/product-vision` first."
+
+Stop here if the prerequisite is missing.
+
+## Step 2: Explain the Process
+
+"Let's define the visual identity for **[Product Name]**. We will use the **Impeccable** design methodology to ensure a distinctive, premium feel.
+
+I'll help you choose:
+1. **Colors** — A primary accent, secondary accent, and neutral palette (using `oklch` or wide-gamut principles where possible, mapped to Tailwind).
+2. **Typography** — Distinctive fonts that give your product character (no generic defaults).
+
+These will be applied consistently across all your screen designs and the application shell.
+
+Do you have any existing brand colors or fonts in mind, or would you like suggestions?"
+
+Wait for their response.
+
+## Step 3: Choose Colors
+
+Help the user select from Tailwind's built-in color palette, but choose **Opinionated** combinations.
+*Impeccable Rule:* Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
+
+"For colors, we'll pick from Tailwind's palette. I recommend avoiding the standard 'safe' blues and grays unless they are tinted or paired dramatically.
+
+**Primary color** (main accent, buttons, links):
+*Aim for character:* `violet`, `rose`, `amber`, `emerald`, `indigo` (avoid generic `blue` unless styled heavily)
+
+**Secondary color** (complementary accent, tags, highlights):
+Should support the primary—consider a split-complementary or analog.
+
+**Neutral color** (backgrounds, text, borders):
+*Impeccable Rule:* Never use pure gray. Tint your neutrals towards the primary hue.
+Options: `slate` (cool), `zinc` (tech), `stone` (warm/earthy), `neutral`
+
+Based on [Product Name], I'd suggest:
+- **Primary:** [suggestion] — [why it fits the 'Impeccable' vibe]
+- **Secondary:** [suggestion] — [why it complements]
+- **Neutral:** [suggestion] — [why it works]
+
+What feels right for your product?"
+
+Use AskUserQuestion to gather their preferences if they're unsure:
+
+- "What vibe are you going for? Brutalist, Organic, Minimalist, Cyber?"
+- "Any colors you definitely want to avoid?"
+- "Light mode, dark mode, or both?"
+
+## Step 4: Choose Typography
+
+Help the user select Google Fonts.
+**Impeccable Rule:** Avoid `Inter`, `Roboto`, `Open Sans`, `Arial`, `Lato`. They are "AI Slop" markers.
+Choose fonts with personality.
+
+"For typography, we'll use Google Fonts. We will avoid generic defaults to ensure your app stands out.
+
+**Heading font** (titles, section headers):
+*Distinctive Choices:* `Outfit`, `Manrope`, `Space Grotesk`, `Syne`, `Epilogue`, `DM Serif Display`, `Playfair Display`
+
+**Body font** (paragraphs, UI text):
+*Readable but refined:* `Plus Jakarta Sans`, `DM Sans`, `Satoshi` (if avail), `Urbanist`
+*Avoid:* Inter, Roboto (too generic)
+
+**Mono font** (code, technical content):
+Options: `JetBrains Mono`, `IBM Plex Mono`, `Fira Code`, `Space Mono`
+
+My suggestions for [Product Name]:
+- **Heading:** [suggestion] — [why]
+- **Body:** [suggestion] — [why]
+- **Mono:** [suggestion] — [why]
+
+What do you prefer?"
+
+## Step 5: Present Final Choices
+
+Once they've made decisions:
+
+"Here's your design system:
+
+**Colors:**
+- Primary: `[color]`
+- Secondary: `[color]`
+- Neutral: `[color]`
+
+**Typography:**
+- Heading: [Font Name]
+- Body: [Font Name]
+- Mono: [Font Name]
+
+Does this look good? Ready to save it?"
+
+## Step 6: Create the Files
+
+Once approved, create two files:
+
+**File 1:** `/product/design-system/colors.json`
+```json
+{
+  "primary": "[color]",
+  "secondary": "[color]",
+  "neutral": "[color]"
+}
+```
+
+**File 2:** `/product/design-system/typography.json`
+```json
+{
+  "heading": "[Font Name]",
+  "body": "[Font Name]",
+  "mono": "[Font Name]"
+}
+```
+
+## Step 7: Implement Changes in Code
+
+Now, apply these choices to the running application:
+
+1.  **Update Fonts**:
+    -   Modify `index.html`.
+    -   Replace the existing Google Fonts `<link>` with the new selection.
+    -   Ensure you include weights 400, 500, 700 for non-mono, and 400 for mono.
+
+2.  **Update Colors**:
+    -   Modify `src/index.css`.
+    -   Replace the CSS variables in `:root` and `.dark` with the `oklch` values of the chosen Tailwind colors (you can approximate or use a converter if needed, or mapped hex values if `oklch` is too complex, but Impeccable prefers `oklch`).
+    -   Ensure `--font-display`, `--font-body`, and `--font-mono` in `src/index.css` or `tailwind.config.js` match the new font names.
+
+## Step 8: Confirm Completion
+
+Let the user know:
+
+"I've saved AND applied your design tokens:
+- **Files**: `colors.json`, `typography.json`
+- **Code**: Updated `index.html` and `src/index.css`
+
+**Your palette:**
+- Primary: `[color]`
+- Secondary: `[color]`
+- Neutral: `[color]`
+
+**Your fonts:**
+- [Heading Font]
+- [Body Font]
+- [Mono Font]
+
+The application now reflects your Impeccable aesthetic.
+
+Next step: Run `/design-shell` to design your application's navigation and layout."
+
+## Reference: Impeccable Font Pairings
+
+- **Modern & Characterful:** DM Sans + Plus Jakarta Sans + JetBrains Mono
+- **Bold & Technical:** Space Grotesk + Manrope + Space Mono
+- **Refined Editorial:** Playfair Display + Urbanist + IBM Plex Mono
+- **Soft & Organic:** Nunito (Rounded) + Quicksand + Fira Code
+- **Brutalist:** Syne + Epilogue + JetBrains Mono
+
+## Important Notes
+
+- Colors should be Tailwind palette names (not hex codes)
+- Fonts should be exact Google Fonts names
+- **Keep it distinct**: If the user suggests "Inter", suggest "Plus Jakarta Sans" or "Manrope" as a more modern alternative.
+- Design tokens apply to screen designs only — the Design OS app keeps its own aesthetic
+
+## Step 9: Auto-Audit (Impeccable QA)
+
+Before completing, perform a quick self-audit against Impeccable principles.
+
+**Check:**
+1. Are any "AI Slop" fonts used? (Inter, Roboto, Open Sans, Arial) → Fail
+2. Are colors tinted (not pure gray)? → Pass/Fail
+3. Is there a clear dominant + accent hierarchy? → Pass/Fail
+4. Are `oklch` or wide-gamut values preferred over hex where possible? → Pass/Fail
+
+**If any checks fail:**
+"⚠️ **Impeccable Audit Warning**: [Issue]. Recommend revising before proceeding."
+
+**If all checks pass:**
+"✅ **Impeccable Audit Passed**: Design tokens meet quality standards."
+
+Save this audit result to `design-system/QA/tokens-audit.md`:
+```markdown
+# Design Tokens Audit
+
+**Date**: [timestamp]
+**Status**: [Pass/Fail]
+
+## Checks
+- [x] No AI Slop fonts
+- [x] Tinted neutrals
+- [x] Dominant + accent hierarchy
+- [x] Modern color format (oklch)
+
+## Notes
+[Any observations]
+```

package/src/template/design-system/.gemini/commands/impeccable/WORKFLOW.md

@@ -0,0 +1,163 @@
+# Impeccable Command Workflow
+
+This guide shows how Impeccable commands work together to transform your designs.
+
+## The Periodic Table
+
+```
+╔═══════════════════════════════════════════════════════════════════════════════════════╗
+║  DIAGNOSTIC          QUALITY                ADAPTATION           ENHANCEMENT          ║
+║  ┌────┐ ┌────┐      ┌────┐ ┌────┐ ┌────┐ ┌────┐   ┌────┐ ┌────┐ ┌────┐   ┌────┐ ┌────┐ ┌────┐  ║
+║  │ Au │ │ Cr │      │ No │ │ Po │ │ Op │ │ Ha │   │ Cl │ │ Si │ │ Ad │   │ An │ │ Co │ │ De │  ║
+║  │audit│ │crit│      │norm│ │poli│ │opti│ │hard│   │clar│ │simp│ │adap│   │anim│ │colo│ │deli│  ║
+║  └────┘ └────┘      └────┘ └────┘ └────┘ └────┘   └────┘ └────┘ └────┘   └────┘ └────┘ └────┘  ║
+║                                                                                         ║
+║  INTENSITY           SYSTEM                                                            ║
+║  ┌────┐ ┌────┐      ┌────┐ ┌────┐ ┌────┐                                               ║
+║  │ Qu │ │ Bo │      │ Ti │ │ Ex │ │ On │                                               ║
+║  │quie│ │bold│      │teac│ │extr│ │onbo│                                               ║
+║  └────┘ └────┘      └────┘ └────┘ └────┘                                               ║
+╚═══════════════════════════════════════════════════════════════════════════════════════╝
+```
+
+---
+
+## Command Categories
+
+### 🔧 SYSTEM — Run Once
+
+| Command | When | Purpose |
+|---------|------|---------|
+| `/teach-impeccable` | **Before Phase 2** | One-time setup for project design context |
+| `/extract` | After 2-3 features built | Extract reusable components into design system |
+| `/onboard` | When designing first-time UX | Design onboarding flows and empty states |
+
+### 🔍 DIAGNOSTIC — Run at Checkpoints
+
+| Command | When | Purpose |
+|---------|------|---------|
+| `/audit` | After tokens, shell, before export | Technical quality check (a11y, perf, theming) |
+| `/critique` | After shell, after each section | UX evaluation (hierarchy, emotion, architecture) |
+
+### ✅ QUALITY — Run After Diagnostics
+
+| Command | Fixes issues from | Purpose |
+|---------|-------------------|---------|
+| `/normalize` | `/audit` (theming) | Design system consistency |
+| `/harden` | `/audit` (resilience) | Error handling, i18n, edge cases |
+| `/optimize` | `/audit` (performance) | Speed, animations, bundle size |
+| `/polish` | `/critique` (details) | Alignment, spacing, refinements |
+
+### 🔄 ADAPTATION — Run During Refinement
+
+| Command | When | Purpose |
+|---------|------|---------|
+| `/clarify` | Copy is confusing | Improve labels, errors, microcopy |
+| `/simplify` | Design feels cluttered | Strip to essence |
+| `/adapt` | Before export | Ensure multi-device compatibility |
+
+### 🎚️ INTENSITY — Run for Calibration
+
+| Command | When | Purpose |
+|---------|------|---------|
+| `/bolder` | `/critique` says "too safe" | Amplify generic designs |
+| `/quieter` | `/critique` says "too loud" | Tone down aggressive designs |
+
+⚠️ These are **mutually exclusive**. Never run both.
+
+### ✨ ENHANCEMENT — Run Before Shipping
+
+| Command | When | Purpose |
+|---------|------|---------|
+| `/animate` | After polish | Add purposeful motion |
+| `/colorize` | Design is monochromatic | Add strategic color |
+| `/delight` | Before export | Add moments of joy |
+
+---
+
+## The Complete Flow
+
+### Phase 2: Design System
+
+```
+                    ┌─────────────────────┐
+                    │  /teach-impeccable  │ ← One-time setup
+                    └──────────┬──────────┘
+                               │
+                    ┌──────────▼──────────┐
+                    │   /design-tokens    │
+                    │   ← Auto-audit      │
+                    └──────────┬──────────┘
+                               │
+                    ┌──────────▼──────────┐
+                    │   /design-shell     │
+                    │   ← Auto-audit      │
+                    └──────────┬──────────┘
+                               │
+                    ┌──────────▼──────────┐
+                    │      /audit         │ ← Full manual check
+                    └──────────┬──────────┘
+                               │
+              ┌────────────────┼────────────────┐
+              │                │                │
+     ┌────────▼───────┐ ┌──────▼──────┐ ┌───────▼───────┐
+     │  /normalize    │ │  /harden    │ │  /optimize    │
+     │  (if theming)  │ │ (if edge)   │ │ (if perf)     │
+     └────────┬───────┘ └──────┬──────┘ └───────┬───────┘
+              │                │                │
+              └────────────────┼────────────────┘
+                               │
+                    ┌──────────▼──────────┐
+                    │     /critique       │ ← UX evaluation
+                    └──────────┬──────────┘
+                               │
+              ┌────────────────┼────────────────┐
+              │                │                │
+     ┌────────▼───────┐ ┌──────▼──────┐ ┌───────▼───────┐
+     │   /bolder      │ │  /quieter   │ │  /simplify    │
+     │   (if safe)    │ │ (if loud)   │ │ (if complex)  │
+     └────────┬───────┘ └──────┬──────┘ └───────┬───────┘
+              │                │                │
+              └────────────────┼────────────────┘
+                               │
+                    ┌──────────▼──────────┐
+                    │      /adapt         │ ← Responsive check
+                    └──────────┬──────────┘
+                               │
+                    ┌──────────▼──────────┐
+                    │      /polish        │ ← Final details
+                    └──────────┬──────────┘
+                               │
+              ┌────────────────┼────────────────┐
+              │                │                │
+     ┌────────▼───────┐ ┌──────▼──────┐ ┌───────▼───────┐
+     │   /animate     │ │  /colorize  │ │   /delight    │
+     └────────┬───────┘ └──────┬──────┘ └───────┬───────┘
+              │                │                │
+              └────────────────┼────────────────┘
+                               │
+                    ┌──────────▼──────────┐
+                    │   /export-product   │ ← Pre-export audit check
+                    └─────────────────────┘
+```
+
+### Phase 4: Per Feature
+
+```
+/shape-spec → Design screens → /clarify → /simplify → /audit → /polish → /implement-tasks
+```
+
+---
+
+## Quick Reference
+
+| Situation | Run |
+|-----------|-----|
+| Starting design phase | `/teach-impeccable` |
+| Design looks generic/AI-generated | `/audit` → `/bolder` |
+| Design is overwhelming | `/critique` → `/quieter` |
+| Accessibility issues | `/audit` → `/harden` |
+| Inconsistent tokens | `/audit` → `/normalize` |
+| Slow performance | `/audit` → `/optimize` |
+| Ready to ship | `/polish` → `/animate` → `/delight` |
+| Before export | `/audit` check required |