pbakaus · Husseinadq · Mar 16, 2026
@@ -2,7 +2,7 @@
   "$schema": "https://anthropic.com/claude-code/marketplace.schema.json",
   "name": "impeccable",
   "metadata": {
-    "description": "Design fluency for AI harnesses. 1 skill, 17 commands, and curated anti-patterns for impeccable frontend design."
+    "description": "Design fluency for AI harnesses. 1 skill, 18 commands, and curated anti-patterns for impeccable frontend design."
   },
   "owner": {
     "name": "Paul Bakaus",
@@ -11,7 +11,7 @@
   "plugins": [
     {
       "name": "impeccable",
-      "description": "Design vocabulary and skills for frontend development. Includes 17 commands (/polish, /distill, /audit, /bolder, /quieter, etc.) and an enhanced frontend-design skill with curated anti-patterns.",
+      "description": "Design vocabulary and skills for frontend development. Includes 18 commands (/help, /polish, /distill, /audit, /bolder, /quieter, etc.) and an enhanced frontend-design skill with curated anti-patterns.",
       "version": "1.3.0",
       "author": {
         "name": "Paul Bakaus",

@@ -1,6 +1,6 @@
 {
   "name": "impeccable",
-  "description": "Design vocabulary and skills for frontend development. Includes 18 skills (17 user-invokable: /polish, /distill, /audit, /bolder, /quieter, etc.) and an enhanced frontend-design skill with curated anti-patterns.",
+  "description": "Design vocabulary and skills for frontend development. Includes 19 skills (18 user-invokable: /help, /polish, /distill, /audit, /bolder, /quieter, etc.) and an enhanced frontend-design skill with curated anti-patterns.",
   "version": "1.3.0",
   "author": {
     "name": "Paul Bakaus",

@@ -71,7 +71,7 @@ For each issue, document:
 - **Impact**: How it affects users
 - **WCAG/Standard**: Which standard it violates (if applicable)
 - **Recommendation**: How to fix it
-- **Suggested command**: Which command to use (prefer: /animate, /quieter, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /critique, /colorize — or other installed skills you're sure exist)
+- **Suggested command**: Which command to use (prefer: /quieter, /polish, /normalize, /clarify, /harden, /distill, /adapt, /animate, /optimize, /audit, /help, /bolder, /extract, /critique, /delight, /onboard, /colorize — or other installed skills you're sure exist)
 
 #### Critical Issues
 [Issues that block core functionality or violate WCAG A]
@@ -108,7 +108,7 @@ Create actionable plan:
 
 ### Suggested Commands for Fixes
 
-Map issues to available commands. Prefer these: /animate, /quieter, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /critique, /colorize. You may also suggest other installed skills you're sure exist, but never invent commands.
+Map issues to available commands. Prefer these: /quieter, /polish, /normalize, /clarify, /harden, /distill, /adapt, /animate, /optimize, /audit, /help, /bolder, /extract, /critique, /delight, /onboard, /colorize. You may also suggest other installed skills you're sure exist, but never invent commands.
 
 Examples:
 - "Use `/normalize` to align with design system (addresses N theming issues)"

@@ -102,7 +102,7 @@ For each issue:
 - **What**: Name the problem clearly
 - **Why it matters**: How this hurts users or undermines goals
 - **Fix**: What to do about it (be concrete)
-- **Command**: Which command to use (prefer: /animate, /quieter, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /critique, /colorize — or other installed skills you're sure exist)
+- **Command**: Which command to use (prefer: /quieter, /polish, /normalize, /clarify, /harden, /distill, /adapt, /animate, /optimize, /audit, /help, /bolder, /extract, /critique, /delight, /onboard, /colorize — or other installed skills you're sure exist)
 
 ### Minor Observations
 Quick notes on smaller issues worth addressing.

@@ -0,0 +1,80 @@
+---
+name: help
+description: Explain what each Impeccable command does and recommend the right next command or sequence for the user's design goal.
+user-invokable: true
+---
+
+Help the user choose the right Impeccable command for their current situation.
+
+This is a navigation command. Do NOT run `teach-impeccable` just to answer `/help`.
+
+## What To Do
+
+1. Infer the user's goal from recent context when possible.
+2. If their goal is still unclear, ask one short clarifying question before recommending commands.
+3. Explain the available commands grouped by purpose.
+4. Recommend the best next command or short sequence for the user's specific situation.
+5. Never invent commands. Only recommend installed commands: /quieter, /polish, /normalize, /clarify, /harden, /distill, /adapt, /animate, /optimize, /audit, /help, /bolder, /extract, /critique, /delight, /onboard, /colorize.
+
+## Command Map
+
+### Setup
+- `/teach-impeccable` — Gather project design context and save it for future sessions
+- `/help` — Explain the command set and recommend the best next step
+
+### Diagnose
+- `/audit` — Find technical quality issues across accessibility, performance, theming, and responsiveness
+- `/critique` — Review UX and visual design quality
+
+### Quality
+- `/normalize` — Align work with the design system and core standards
+- `/polish` — Do a final refinement pass before shipping
+- `/optimize` — Improve performance and runtime efficiency
+- `/harden` — Improve resilience, error handling, and edge cases
+
+### Adaptation
+- `/clarify` — Improve unclear UX writing and labels
+- `/distill` — Remove excess and simplify the interface
+- `/adapt` — Improve the experience for different devices and contexts
+
+### Intensity
+- `/bolder` — Push a weak or timid design further
+- `/quieter` — Tone down a design that feels too loud or heavy
+
+### Enhancement
+- `/animate` — Add purposeful motion
+- `/colorize` — Introduce strategic color
+- `/delight` — Add charm, personality, or surprise
+- `/onboard` — Improve onboarding and guided flows
+
+### System
+- `/extract` — Pull repeated design patterns into reusable components
+
+## Default Recommendations
+
+- New project or no design context yet: start with `/teach-impeccable`
+- You do not know what is wrong yet: start with `/audit` for technical issues or `/critique` for design issues
+- The UI mostly works but feels inconsistent: use `/normalize`
+- The UI is close and needs one final pass: use `/polish`
+- The design feels bland: use `/bolder`, `/colorize`, or `/delight`
+- The design feels busy or overworked: use `/quieter` or `/distill`
+
+## Response Format
+
+Use this structure unless the user asks for just a raw list:
+
+### Best next step
+- Name the single best command and why
+
+### Good alternatives
+- List 2-4 relevant commands with one-line guidance
+
+### Suggested sequence
+1. First command
+2. Second command
+3. Final command
+
+### Example invocations
+- Include 1-3 concrete examples when helpful, such as `/audit header` or `/polish checkout-form`
+
+Keep the answer brief and practical. The goal is to help the user move, not to dump documentation.
@@ -1,6 +1,6 @@
 # Impeccable
 
-The vocabulary you didn't know you needed. 1 skill, 17 commands, and curated anti-patterns for impeccable style. Works with Cursor, Claude Code, Gemini CLI, and Codex CLI.
+The vocabulary you didn't know you needed. 1 skill, 18 commands, and curated anti-patterns for impeccable style. Works with Cursor, Claude Code, Gemini CLI, and Codex CLI.
 
 ## Repository Purpose
 
@@ -247,4 +247,3 @@ End users can copy files directly without needing build tools.
 - [Gemini CLI GEMINI.md](https://github.com/google-gemini/gemini-cli/blob/main/docs/cli/gemini-md.md)
 - [Codex CLI Slash Commands](https://developers.openai.com/codex/guides/slash-commands)
 - [Codex CLI Skills](https://developers.openai.com/codex/skills/)
-
@@ -13,5 +13,5 @@ The `frontend-design` skill in this project builds on Anthropic's original front
 
 This project extends the original with:
 - 7 domain-specific reference files (typography, color-and-contrast, spatial-design, motion-design, interaction-design, responsive-design, ux-writing)
-- 17 steering commands
+- 18 steering commands
 - Expanded patterns and anti-patterns
@@ -1,6 +1,6 @@
 # Impeccable
 
-The vocabulary you didn't know you needed. 1 skill, 17 commands, and curated anti-patterns for impeccable frontend design.
+The vocabulary you didn't know you needed. 1 skill, 18 commands, and curated anti-patterns for impeccable frontend design.
 
 > **Quick start:** Visit [impeccable.style](https://impeccable.style) to download ready-to-use bundles.
 
@@ -12,7 +12,7 @@ Every LLM learned from the same generic templates. Without guidance, you get the
 
 Impeccable fights that bias with:
 - **An expanded skill** with 7 domain-specific reference files ([view source](source/skills/frontend-design/))
-- **17 steering commands** to audit, review, polish, distill, animate, and more
+- **18 steering commands** to audit, review, polish, distill, animate, and more
 - **Curated anti-patterns** that explicitly tell the AI what NOT to do
 
 ## What's Included
@@ -31,11 +31,12 @@ A comprehensive design skill with 7 domain-specific references ([view skill](sou
 | [responsive-design](source/skills/frontend-design/reference/responsive-design.md) | Mobile-first, fluid design, container queries |
 | [ux-writing](source/skills/frontend-design/reference/ux-writing.md) | Button labels, error messages, empty states |
 
-### 17 Commands
+### 18 Commands
 
 | Command | What it does |
 |---------|--------------|
 | `/teach-impeccable` | One-time setup: gather design context, save to config |
+| `/help` | List available commands and recommend the best next step |
 | `/audit` | Run technical quality checks (a11y, performance, responsive) |
 | `/critique` | UX design review: hierarchy, clarity, emotional resonance |
 | `/normalize` | Align with design system standards |
@@ -127,6 +128,7 @@ cp -r dist/codex/.codex/* ~/.codex/
 Once installed, use commands in your AI harness:
 
 ```
+/help            # Pick the right command
 /audit           # Find issues
 /normalize       # Fix inconsistencies
 /polish          # Final cleanup

@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Impeccable Command Cheatsheet</title>
-  <meta name="description" content="Quick reference for all 17 Impeccable commands. Print-friendly cheatsheet for design fluency in AI harnesses.">
+  <meta name="description" content="Quick reference for all 18 Impeccable commands. Print-friendly cheatsheet for design fluency in AI harnesses.">
   <link rel="icon" type="image/svg+xml" href="./favicon.svg">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -160,7 +160,7 @@
 <body>
   <header>
     <h1>Impeccable Commands</h1>
-    <p class="subtitle">Quick reference for all 17 design commands</p>
+    <p class="subtitle">Quick reference for all 18 design commands</p>
     <a href="/" class="back-link">&larr; Back to impeccable.style</a>
   </header>
 
@@ -186,6 +186,7 @@ <h1>Impeccable Commands</h1>
 
     const commandCategories = {
       'teach-impeccable': 'system',
+      'help': 'system',
       'audit': 'diagnostic',
       'critique': 'diagnostic',
       'normalize': 'quality',
@@ -206,6 +207,7 @@ <h1>Impeccable Commands</h1>
 
     const commandRelationships = {
       'teach-impeccable': { flow: 'One-time project context gathering' },
+      'help': { leadsTo: ['teach-impeccable', 'audit', 'critique'], flow: 'Discover the right next command' },
       'audit': { leadsTo: ['normalize', 'harden', 'optimize', 'adapt', 'clarify'], flow: 'Technical quality audit' },
       'critique': { leadsTo: ['polish', 'distill', 'bolder', 'quieter'], flow: 'UX and design review' },
       'normalize': { combinesWith: ['clarify', 'adapt'], flow: 'Align with design system' },

@@ -4,23 +4,23 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Impeccable: The missing upgrade to Anthropic's frontend-design skill</title>
-  <meta name="description" content="1 skill, 17 commands, and curated anti-patterns for impeccable frontend design. Works with Cursor, Claude Code, Gemini CLI, and Codex CLI.">
+  <meta name="description" content="1 skill, 18 commands, and curated anti-patterns for impeccable frontend design. Works with Cursor, Claude Code, Gemini CLI, and Codex CLI.">
   <meta name="theme-color" content="#1a1a1a">
   <link rel="canonical" href="https://impeccable.style">
 
   <!-- OpenGraph -->
   <meta property="og:type" content="website">
   <meta property="og:url" content="https://impeccable.style">
   <meta property="og:title" content="Impeccable: Design skills for AI harnesses">
-  <meta property="og:description" content="1 skill, 17 commands, and curated anti-patterns for impeccable frontend design. Works with Cursor, Claude Code, Gemini CLI, and Codex CLI.">
+  <meta property="og:description" content="1 skill, 18 commands, and curated anti-patterns for impeccable frontend design. Works with Cursor, Claude Code, Gemini CLI, and Codex CLI.">
   <meta property="og:image" content="https://impeccable.style/og-image.jpg">
 
   <!-- Twitter -->
   <meta name="twitter:card" content="summary_large_image">
   <meta name="twitter:site" content="@pbakaus">
   <meta name="twitter:creator" content="@pbakaus">
   <meta name="twitter:title" content="Impeccable: Design skills for AI harnesses">
-  <meta name="twitter:description" content="1 skill, 17 commands, and curated anti-patterns for impeccable frontend design.">
+  <meta name="twitter:description" content="1 skill, 18 commands, and curated anti-patterns for impeccable frontend design.">
   <meta name="twitter:image" content="https://impeccable.style/og-image.jpg">
 
   <link rel="icon" type="image/svg+xml" href="./favicon.svg">
@@ -57,7 +57,7 @@ <h1 class="hero-title-combined">Impeccable</h1>
           <div class="hero-included-items">
             <span>Enhanced <em>frontend-design</em> skill + anti-patterns</span>
             <span class="hero-included-sep">·</span>
-            <span>17 design skills: /polish, /audit, /distill, /bolder...</span>
+            <span>18 design skills: /help, /polish, /audit, /distill...</span>
           </div>
         </div>
 
@@ -162,7 +162,7 @@ <h2 class="section-title">The Antidote</h2>
         <h2 class="section-title">The Framework</h2>
       </div>
       <div class="solution-content">
-        <p class="section-lead" data-reveal>One comprehensive skill with deep expertise, plus 17 commands that form the language of design.</p>
+        <p class="section-lead" data-reveal>One comprehensive skill with deep expertise, plus 18 commands that form the language of design.</p>
 
         <div class="solution-visual-interactive" id="framework-viz-container" data-reveal>
           <!-- Subway map generated by JS -->

@@ -38,6 +38,7 @@ export const skillReferenceDomains = [
 
 export const commandProcessSteps = {
   'teach-impeccable': ['Gather', 'Clarify', 'Document', 'Save'],
+  'help': ['Inspect', 'List', 'Recommend'],
   'audit': ['Scan', 'Document', 'Prioritize', 'Recommend'],
   'critique': ['Evaluate', 'Critique', 'Prioritize', 'Suggest'],
   'normalize': ['Analyze', 'Identify', 'Align', 'Verify'],
@@ -58,6 +59,7 @@ export const commandProcessSteps = {
 
 export const commandCategories = {
   'teach-impeccable': 'system',
+  'help': 'system',
   'audit': 'diagnostic',
   'critique': 'diagnostic',
   'normalize': 'quality',
@@ -87,6 +89,7 @@ export const skillRelationships = {
 
 export const commandRelationships = {
   'teach-impeccable': { flow: 'Setup: One-time project context gathering' },
+  'help': { leadsTo: ['teach-impeccable', 'audit', 'critique'], flow: 'System: Discover the right command' },
   'audit': { leadsTo: ['normalize', 'harden', 'optimize', 'adapt', 'clarify'], flow: 'Diagnostic: Technical quality audit' },
   'critique': { leadsTo: ['polish', 'distill', 'bolder', 'quieter'], flow: 'Diagnostic: UX and design review' },
   'normalize': { combinesWith: ['clarify', 'adapt'], flow: 'Quality: Align with design system' },
@@ -104,4 +107,3 @@ export const commandRelationships = {
   'adapt': { combinesWith: ['normalize', 'clarify'], flow: 'Adaptation: Different devices/contexts' },
   'onboard': { combinesWith: ['clarify', 'delight'], flow: 'Enhancement: Onboarding & empty states' }
 };
-
@@ -50,6 +50,46 @@ export function renderCommandDemo(commandId) {
         </div>
       `;
     }
+    if (commandId === 'help') {
+      return `
+        <div class="demo-container">
+          <div class="demo-viewport" style="padding: var(--spacing-lg); font-size: 13px; line-height: 1.6;">
+            <div style="display: flex; flex-direction: column; gap: 12px; color: var(--color-ash);">
+              <div style="font-size: 14px; color: var(--color-text); font-weight: 600;">What it helps with</div>
+              <div style="display: flex; flex-direction: column; gap: 8px;">
+                <div style="display: flex; gap: 8px; align-items: baseline;">
+                  <span style="color: var(--color-accent); flex-shrink: 0;">1.</span>
+                  <span>Shows the command set grouped by purpose</span>
+                </div>
+                <div style="display: flex; gap: 8px; align-items: baseline;">
+                  <span style="color: var(--color-accent); flex-shrink: 0;">2.</span>
+                  <span>Recommends the right next command for your goal</span>
+                </div>
+                <div style="display: flex; gap: 8px; align-items: baseline;">
+                  <span style="color: var(--color-accent); flex-shrink: 0;">3.</span>
+                  <span>Suggests a short sequence when one command is not enough</span>
+                </div>
+              </div>
+              <div style="font-size: 14px; color: var(--color-text); font-weight: 600; margin-top: 4px;">Common starts</div>
+              <div style="display: flex; flex-direction: column; gap: 8px;">
+                <div style="display: flex; gap: 8px; align-items: baseline;">
+                  <span style="opacity: 0.5; flex-shrink: 0;">→</span>
+                  <span>New project: <code>/teach-impeccable</code></span>
+                </div>
+                <div style="display: flex; gap: 8px; align-items: baseline;">
+                  <span style="opacity: 0.5; flex-shrink: 0;">→</span>
+                  <span>Something feels wrong: <code>/audit</code> or <code>/critique</code></span>
+                </div>
+                <div style="display: flex; gap: 8px; align-items: baseline;">
+                  <span style="opacity: 0.5; flex-shrink: 0;">→</span>
+                  <span>Nearly done: <code>/polish</code></span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      `;
+    }
     return `
       <div class="demo-container">
         <div class="demo-viewport">
@@ -165,4 +205,3 @@ export function setupDemoTabs() {
 }
 
 
-