@theproductguy/create-mission-control 1.0.3 → 1.0.4

package/bin/cli.js

@@ -87,16 +87,23 @@ async function init() {
                 const templateDir = path.resolve(__dirname, '../src/template');
 
                 // Copy Control Center
-                fs.cpSync(path.join(templateDir, 'control-center'), path.join(root, 'control-center'), { recursive: true });
+                // Copy helper to exclude node_modules
+                const copyOptions = {
+                    recursive: true,
+                    filter: (src) => !src.includes('node_modules')
+                };
+
+                // Copy Control Center
+                fs.cpSync(path.join(templateDir, 'control-center'), path.join(root, 'control-center'), copyOptions);
 
                 // Copy Design System
-                fs.cpSync(path.join(templateDir, 'design-system'), path.join(root, 'design-system'), { recursive: true });
+                fs.cpSync(path.join(templateDir, 'design-system'), path.join(root, 'design-system'), copyOptions);
 
                 // Copy Agent OS Docs
-                fs.cpSync(path.join(templateDir, 'agent-os'), path.join(root, 'agent-os'), { recursive: true });
+                fs.cpSync(path.join(templateDir, 'agent-os'), path.join(root, 'agent-os'), copyOptions);
 
                 // Copy Agent OS UI Package (for local workspace support)
-                fs.cpSync(path.join(templateDir, 'agent-os-ui'), path.join(root, 'agent-os-ui'), { recursive: true });
+                fs.cpSync(path.join(templateDir, 'agent-os-ui'), path.join(root, 'agent-os-ui'), copyOptions);
 
                 // 3. Configure Workspace
                 console.log(cyan('\n3. Configuring Workspace...'));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@theproductguy/create-mission-control",
-    "version": "1.0.3",
+    "version": "1.0.4",
     "description": "Scaffolding tool for Agent OS applications",
     "type": "module",
     "bin": {
@@ -41,4 +41,4 @@
         "typescript": "^5.3.3",
         "vite": "^5.0.10"
     }
-}
+}

package/src/template/agent-os/commands/export-product/export-product.md

@@ -19,6 +19,30 @@ Verify the minimum requirements exist:
 
 If required files are missing, stop and ask the user to complete them first.
 
+## Step 1.5: Impeccable Quality Check (Pre-Export)
+
+Before exporting, run a quick quality assessment:
+
+**Check for QA Reports:**
+1. Look for `design-system/QA/audit-report.md` — Has a full audit been run?
+2. Look for `design-system/QA/tokens-audit.md` — Were design tokens audited?
+3. Look for `design-system/QA/shell-audit.md` — Was the shell audited?
+
+**If no audit reports exist:**
+"⚠️ **Impeccable Warning**: No quality audits found. I recommend running `/audit` before exporting to ensure your design meets quality standards and avoids 'AI Slop'.
+
+Would you like me to:
+1. Run `/audit` now (recommended)
+2. Proceed with export anyway"
+
+**If audits exist but have failures:**
+"⚠️ **Impeccable Warning**: Previous audit found issues that may not have been addressed. Consider running the suggested fix commands (`/normalize`, `/harden`, etc.) before exporting.
+
+Proceed with export?"
+
+**If audits pass or user confirms:**
+Continue to Step 2.
+
 ## Step 2: Create Export Directory Structure
 
 Create the `product-plan/` directory in the project root with this structure:

package/src/template/agent-os/commands/initialize-design/initialize-design.md

@@ -64,4 +64,13 @@ Create a draft data model file:
 ### Step 3: Verification
 - Check that `design-system/product/product-overview.md` exists.
 - Check that `design-system/product/product-roadmap.md` exists.
-- Output a confirmation message: "Design OS initialized! You can now open http://localhost:3000 to begin designing."
+- Output a confirmation message:
+
+"Design OS initialized! You can now open http://localhost:5400 to begin designing.
+
+**Recommended Next Steps:**
+1. Run `/teach-impeccable` — One-time setup to establish design context for this project.
+2. Run `/design-tokens` — Define your colors and typography.
+3. Run `/design-shell` — Design your navigation and layout.
+
+The Impeccable command system will guide you toward distinctive, AI-slop-free designs."

package/src/template/control-center/backend/index.js

@@ -125,9 +125,11 @@ app.get('/api/status', async (req, res) => {
 
         // Check for Design OS export and steps
         const designDir = path.join(PROJECT_ROOT, 'design-system');
-        // Note: In dev, these files are in design/public/product. In prod, injected elsewhere.
-        // But for this local dev setup, we check where the initialize-design command puts them?
-        // Actually, initialize-design puts them in `design/public/product`.
+
+        // QA Check
+        const qaDir = path.join(designDir, 'QA');
+        const auditReport = path.join(qaDir, 'audit-report.md');
+        const polishReport = path.join(qaDir, 'polish-report.md');
 
         const hasDesignExport = fs.existsSync(path.join(PROJECT_ROOT, 'product-plan'));
         const hasDesignInit = fs.existsSync(path.join(designDir, 'product/product-overview.md'));
@@ -146,6 +148,10 @@ app.get('/api/status', async (req, res) => {
                 exportPrompts: {
                     oneShot: fs.existsSync(path.join(PROJECT_ROOT, 'product-plan/prompts/one-shot-prompt.md')),
                     section: fs.existsSync(path.join(PROJECT_ROOT, 'product-plan/prompts/section-prompt.md'))
+                },
+                qa: {
+                    audit: fs.existsSync(auditReport),
+                    polish: fs.existsSync(polishReport)
                 }
             },
             implementation: {

package/src/template/control-center/frontend/src/App.tsx

@@ -39,6 +39,10 @@ interface ProjectState {
       oneShot: boolean;
       section: boolean;
     };
+    qa?: {
+      audit: boolean;
+      polish: boolean;
+    };
   };
   implementation: {
     scaffolded: boolean;
@@ -646,6 +650,17 @@ function App() {
                   </div>
                 </div>
 
+                <div className="grid grid-cols-2 gap-2">
+                  <div className={`p-2 rounded-lg border text-center ${state?.design?.qa?.audit ? 'bg-emerald-50/50 border-emerald-200 text-emerald-700 dark:bg-emerald-900/20 dark:border-emerald-800 dark:text-emerald-300' : 'bg-secondary/20 border-border/50 text-muted-foreground'}`}>
+                    <span className="text-xs font-medium block mb-1">Audit</span>
+                    {state?.design?.qa?.audit ? <CheckSquare size={14} className="mx-auto" /> : <span className="block w-2 h-2 rounded-full bg-stone-300 mx-auto mt-1" />}
+                  </div>
+                  <div className={`p-2 rounded-lg border text-center ${state?.design?.qa?.polish ? 'bg-emerald-50/50 border-emerald-200 text-emerald-700 dark:bg-emerald-900/20 dark:border-emerald-800 dark:text-emerald-300' : 'bg-secondary/20 border-border/50 text-muted-foreground'}`}>
+                    <span className="text-xs font-medium block mb-1">Polish</span>
+                    {state?.design?.qa?.polish ? <CheckSquare size={14} className="mx-auto" /> : <span className="block w-2 h-2 rounded-full bg-stone-300 mx-auto mt-1" />}
+                  </div>
+                </div>
+
                 <div className="flex items-center justify-between p-3 bg-secondary/30 rounded-lg border border-border/50">
                   <span className="text-foreground font-medium text-sm flex items-center gap-2"><ArrowRight size={16} className="text-muted-foreground" /> Export</span>
                   {state?.design?.exported ? (
@@ -658,7 +673,7 @@ function App() {
                 </div>
               </div>
 
-              <div className="mt-6 flex gap-2">
+              <div className="mt-6 flex flex-col gap-2">
                 {!state?.design?.initialized && (
                   <PromptButton
                     label="Sync Data"
@@ -667,6 +682,22 @@ function App() {
                     primary
                   />
                 )}
+                {state?.design?.initialized && !state?.design?.exported && (
+                  <div className="flex gap-2">
+                    <PromptButton
+                      label="Run Audit"
+                      prompt="Antigravity, run an audit on the design system. Read 'design-system/.gemini/commands/impeccable/audit.md'."
+                      onClick={copyToClipboard}
+                      small
+                    />
+                    <PromptButton
+                      label="Run Polish"
+                      prompt="Antigravity, run a polish pass. Read 'design-system/.gemini/commands/impeccable/polish.md'."
+                      onClick={copyToClipboard}
+                      small
+                    />
+                  </div>
+                )}
               </div>
             </section>
 
@@ -835,6 +866,8 @@ function App() {
 
               </div>
             </section>
+
+
           </main>
         </div>
       </div>

package/src/template/design-system/{.claude → .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]
+```