git:20260722.9d3ab82 to git:20261013.fbe187d

94 added, 173 removed. Audit A to A.

---

name: ccc-design

- context: fork

- description: "click-first picker over 41 design skills. Landing pages, component systems, polish, Figma→code, named looks, design capture. Use when the user types $ccc-design, asks to 'design a landing…"

+ description: "Route design work to the right method: landing page, component system, Impeccable polish pass, Figma to code, chat UI, Design.md capture or screenshot to interactive UI. Use when the user wants to design, restyle, polish or animate a UI, or types $ccc-design."

allowed-tools:

- Read

- Write

- Edit

- Bash

- Glob

- Grep

- Agent

+ - Skill

- AskUserQuestion

- - TodoWrite

- argument-hint: "[intent: landing | components | polish | figma]"

+ - mcp__Shadcn_UI__list_blocks

+ - mcp__Shadcn_UI__get_block

+ - mcp__Shadcn_UI__get_component

+ - mcp__figma

+ model: inherit

+ effort: medium

---

- # $ccc-design — Design domain hub

- Click-first picker over the design domain (41 sub-skills). User picks an intent in one click — we route to the right sub-skill or agent. No text menus, no numbered lists.

+ # $ccc-design — pick the design job

- ## Response shape (EVERY time)

+ **CC Commander** · $ccc-design · one click from intent to the right design method, agent or sub-skill.

- ### 1. Brand header (one line)

+ The user's selected model is preserved. Long-form UI builds go to the plugin's `designer` agent in the background; shorter passes run inline.

- ```

- **CC Commander · Design** · 41 skills · [frontend-design](https://commanderplugin.com/design)

- ```

+ Design sub-skills (`design-context`, `critique`, `polish`, `looks`, `capture` and the rest) ship with the Commander CLI toolkit. Invoke one with the Skill tool when it is listed in this session; otherwise apply its method from [references/routing.md](references/routing.md). The `frontend-design` skill is used the same way when installed.

- ### 2. Context strip (one line)

+ Codex: ask pickers as plain-text questions and run agent work inline or with `codex exec --json`.

- Run these in ONE parallel Bash call, cheap + silent on failure:

- - `ls src/components 2>/dev/null | wc -l` — component count

- - `test -f tailwind.config.* && echo tw` — tailwind presence

- - `git rev-parse --abbrev-ref HEAD 2>/dev/null` — branch

+ ## When to use / when not to

- Render a one-liner:

+ - Use for new UI, a visual refresh, motion, a design system, Figma import, a chat interface, or capturing a product's look in `Design.md`.

+ - Use `$ccc-build` to scaffold a whole new project, `$ccc-mobile` for native mobile UI, `$ccc-makeover` for a whole-project health overhaul.

- If no project detected: "🎨 No project yet — I'll scaffold one after you pick a direction."

+ ## What happens

- ### 3. The picker — `AskUserQuestion` with 4 options

+ ### 1. Context strip

- Read `${CLAUDE_PLUGIN_ROOT}/menus/ccc-design.json` once. Use its `choices` array to drive the question. **Max 4 options** — take the 4 non-back choices (landing / components / polish / figma). Back-to-main is not an AUQ option; users invoke `/ccc` directly.

+ Run in one Bash call, silent on failure:

- ```

- question: "What design work?"

- header: "CC Commander · Design"

- multiSelect: false

- options:

- - label: "🚀 Landing page"

- description: "High-converting marketing page — hero, social proof, CTA stack."

- preview: "Spawns frontend-design agent in background. Returns production React + Tailwind."

- - label: "🧩 Component system"

- description: "shadcn-style component library with tokens + variants."

- preview: "Routes to frontend-design + design-consultation + colorize + typeset."

- - label: "✨ Polish pass"

- description: "Audit spacing, contrast, motion, a11y — the Impeccable suite."

- preview: "Runs critique → clarify → (bolder | distill) → polish pipeline."

- - label: "🎨 Figma → code"

- description: "Paste a Figma URL, get production React + Tailwind."

- preview: "Needs figma MCP connected. Otherwise prompts $ccc-connect figma first."

+ ```bash

+ test -f package.json && jq -r '(.dependencies // {}) + (.devDependencies // {}) | keys[]' package.json 2>/dev/null | grep -E '^(next|react|vue|svelte|astro|tailwindcss|@tailwindcss/.*)$'

+ ls src/components 2>/dev/null | wc -l

+ ls tailwind.config.* 2>/dev/null

+ test -f Design.md && echo design-md

+ git rev-parse --abbrev-ref HEAD 2>/dev/null

+ git diff --stat HEAD 2>/dev/null | tail -1

+ claude mcp list 2>/dev/null | grep -iE 'figma|shadcn'

```

- **Recommendation logic** (prepend ⭐ to ONE option):

- - No `src/components` or fewer than 3 components → ⭐ "Component system"

- - Recent landing-page-ish files touched OR empty-ish repo → ⭐ "Landing page"

- - `git diff --stat` shows CSS/JSX churn on current branch → ⭐ "Polish pass"

- - figma MCP present in `claude mcp list` → keep "Figma → code" available; otherwise add `⚠️ needs connect` to its description

- ### 4. Handle the selection

- Dispatch immediately — do NOT re-prompt. Map:

- - **Landing page** → spawn `frontend-design` agent in background with payload `{ type: "landing-page", stack: <detected>, brand_context: "ask if missing" }`. Report back when agent completes. Fallback (if agent unavailable): invoke the domain routing sub-skills below — `design-context` → `landing-page-builder` → `interactive-landing` → `framer-motion-patterns` → `polish`.

- - **Component system** → invoke sub-skills: `frontend-design` + `design-consultation` + `colorize` + `typeset` + `normalize`.

- - **Polish pass** → invoke the Impeccable Suite pipeline: `critique` → `clarify` → (`bolder` or `distill` based on user's next answer) → `arrange` → `typeset` → `adapt` → `polish`.

- - **Figma → code** → check `claude mcp list` for `figma`. If missing, suggest `$ccc-connect figma` first. If present, ask for the Figma URL, then route to `frontend-design` + `adapt`.

- If the user passes an argument (`$ccc-design landing`), skip the picker and dispatch directly.

- ---

- ## Sub-flow A — Chat UI (shadcn chat-interface)

+ Render one line:

- Trigger when the user asks for a chat UI, AI assistant interface, messaging panel, support widget, or "chat like ChatGPT/Claude". Offer it as a 5th option only when intent is clearly chat-related — otherwise reach it via the routing matrix below.

- 1. **Pull real components** — prefer the shadcn MCP if connected. Use `mcp__Shadcn_UI__list_blocks` / `mcp__Shadcn_UI__get_block` and `mcp__Shadcn_UI__get_component` to fetch the canonical `chat-interface` building blocks: message list, message bubble (user vs assistant), composer/input with send, streaming/typing indicator, scroll-to-bottom, and the optional sidebar/thread list. If the MCP is absent, suggest `$ccc-connect shadcn`, then fall back to scaffolding the same primitives by hand.

- 2. **Compose, don't reinvent** — assemble fetched blocks into `ChatPanel` + `MessageList` + `Composer`. Keep streaming, auto-scroll, and empty-state as first-class.

- 3. **Apply the design soul** — if a `Design.md` exists (Sub-flow B), apply its tokens before final styling so the chat matches the product's voice.

- 4. **Polish** — run the Impeccable Suite `polish` pass on spacing, contrast, and motion of the bubbles + composer.

+ No project: "🎨 No project yet — I'll scaffold one after you pick a direction."

- > Reference: shadcn `chat-interface` blocks are the source of truth for chat scaffolding — don't hand-roll bubbles/composers when the block exists.

+ ### 2. Route by intent, or ask

- ## Sub-flow B — Design.md (capture + apply a design's "soul")

+ Skip the picker when intent is already clear:

- A `Design.md` file at repo root is the portable, human-readable soul of a product's look — its typography, color, and spacing decisions. This sub-flow has two directions; ask which via `AskUserQuestion`:

+ | Signal | Go to |

+ |---|---|

+ | Argument `landing`, `components`, `polish`, `figma` | the matching branch in step 3 |

+ | Chat UI, AI assistant interface, support widget, `chat` | Sub-flow A |

+ | `Design.md`, "capture our look", "apply our design soul", `design-md` | Sub-flow B |

+ | A screenshot or mockup is attached, `screenshot` | Sub-flow C |

+ | Named look, motion, particles, slides and other specific asks | the route in [references/routing.md](references/routing.md) |

- ```

- question: "Design.md — capture or apply?"

- header: "Design soul"

- multiSelect: false

- options:

- - label: "📥 Capture (generate)"

- description: "Read the current UI/tokens and distill them into a Design.md."

- preview: "Scans tailwind.config, CSS vars, fonts → writes Design.md."

- - label: "📤 Apply (consume)"

- description: "Read an existing Design.md and apply its soul to new/edited UI."

- preview: "Loads tokens from Design.md → uses them on every component."

- ```

+ Otherwise read `${CLAUDE_PLUGIN_ROOT}/menus/ccc-design.json` once and ask with AskUserQuestion (header "CC Commander · Design", question "What design work?"), using its four non-back choices. Put the recommended option first, marked 🟢:

- - **Capture (generate)** — inspect `tailwind.config.*`, global CSS custom properties, font imports, and a few representative components. Distill into a `Design.md` with these sections: **Typography** (families, scale, weights, line-height), **Color** (named tokens + hex + semantic roles: bg/fg/primary/accent/border/muted), **Spacing** (base unit + scale + radius + shadow), **Voice/Mood** (one paragraph — the feeling). Write it with `Write` to repo root. Confirm before overwriting an existing `Design.md`.

- - **Apply (consume)** — read `Design.md`, load its tokens into working memory, and use them as the binding constraint for every subsequent component/edit in this session (and pass them in the `brand_context` payload to any spawned `frontend-design` agent). If no `Design.md` exists, offer Capture first.

+ - 🚀 Landing page — hero, social proof, CTA stack; built by the `designer` agent in the background.

+ - 🏗️ Component system — shadcn-style library with tokens and variants.

+ - 🔧 Polish pass — spacing, contrast, motion and accessibility via the Impeccable suite.

+ - 🎨 Figma → code — production React + Tailwind from a Figma URL. Append "⚠️ needs connect" when no figma MCP server is listed.

- > `Design.md` is the single source of truth for a project's soul — capture once, apply everywhere, so chat UIs (Sub-flow A) and screenshot-derived UIs (Sub-flow C) stay on-brand.

+ Recommendation, first match wins:

- ## Sub-flow C — Screenshot → interactive UI + onboarding video

+ - `git diff --stat` shows CSS/JSX/TSX churn on this branch → 🟢 Polish pass.

+ - Fewer than 3 components in `src/components` → 🟢 Component system.

+ - Empty or near-empty repo, or landing-page files recently touched → 🟢 Landing page.

+ - Otherwise → 🟢 Polish pass.

- Trigger when the user pastes/attaches a screenshot (or mockup image) and wants it turned into working UI, optionally with an onboarding/demo video.

+ Dispatch the selection immediately; do not re-prompt.

- 1. **Read the image** — use `Read` on the screenshot path to see the layout, then describe structure: regions, components, type scale, color, spacing rhythm.

- 2. **Apply the soul** — if a `Design.md` exists (Sub-flow B), reconcile observed styles against its tokens so the rebuild is on-brand rather than a pixel-trace.

- 3. **Build interactive UI** — spawn the `frontend-design` agent (background) with payload `{ type: "screenshot-to-ui", stack: <detected>, brand_context: <Design.md tokens or "ask"> }`. Produce production React + Tailwind with real interactivity (hover/focus/active states, responsive breakpoints), not a static clone.

- 4. **Onboarding video (pair with remotion)** — ask via `AskUserQuestion` whether to also produce a short onboarding/demo video. If yes, load the `remotion` skill and generate a programmatic walkthrough: scripted scenes that highlight the rebuilt UI's key flows (intro → feature beats → CTA), captioned, exported to MP4. Keep the video tokens (fonts/colors) sourced from `Design.md` for consistency.

+ ### 3. Branches

- > Pairing note: UI build = `frontend-design` agent; video = `remotion` skill. They share the `Design.md` soul so the product and its onboarding film feel like one thing.

+ **Landing page.** Call the Agent tool with `subagent_type: designer`, `run_in_background: true`, `description: "Build landing page"`, and a prompt carrying `{ type: "landing-page", stack: <detected>, brand_context: <Design.md tokens, or "ask the user"> }` plus: write only inside the project's pages/components directories, and return `{ files_changed, run_commands, open_questions }`. Run one landing agent at a time. Without the Agent tool, run inline: `design-context` → `landing-page-builder` → `interactive-landing` → `framer-motion-patterns` → `polish`.

- ---

+ **Component system.** Run inline: `design-context` → `frontend-design` → `design-consultation` → `colorize` → `typeset` → `normalize`. Write tokens to the project's existing token location (Tailwind config or CSS custom properties); create one only if none exists.

- ## Anti-patterns — DO NOT

+ **Polish pass.** Run `critique` and list the findings. Then ask with AskUserQuestion (header "Direction"), recommended first:

- - ❌ Render a numbered list of 41 skills and ask the user to type one

- - ❌ Show a table of 35+ options in `AskUserQuestion` (max 4)

- - ❌ Spawn multiple agents in parallel for Landing — one at a time

- - ❌ Skip the context strip — we need to tailor the preview field

- - ❌ Ignore the recommendation logic — ⭐ is the whole point

- - ❌ Hand-roll chat bubbles/composers when the shadcn `chat-interface` block exists (Sub-flow A)

- - ❌ Overwrite an existing `Design.md` without confirming (Sub-flow B)

- - ❌ Pixel-trace a screenshot into a static clone — rebuild interactive + on-brand (Sub-flow C)

- - ❌ Generate the onboarding video without sourcing tokens from `Design.md`

+ - 🟢 the direction the critique supports — Bolder impact (`bolder`, `overdrive`) or Quieter (`quieter`, `distill`)

+ - the other direction

+ - Neither — keep the current intensity and only fix the findings

- ---

+ Continue: `clarify` → `arrange` → `typeset` → `adapt` → `polish`.

- ## Domain reference — the 41 sub-skills

+ **Figma → code.** If `claude mcp list` shows no figma server, suggest `$ccc-connect figma` and stop. Otherwise ask for the Figma URL, read the file with the figma server's `mcp__figma__*` tools (pre-approved when the server is named `figma`, as `$ccc-connect figma` registers it; under any other name its tools run only when the user grants them at the permission prompt), and route to `frontend-design` + `adapt`.

- Below is the full routing matrix for agents that drill deeper after an initial pick (e.g., during the Polish pass pipeline). **This content is reference material, not shown to the user via AUQ.**

+ ### Sub-flow A — Chat UI

- ### What's inside

+ 1. Pull real components. With the shadcn MCP connected, use `mcp__Shadcn_UI__list_blocks`, `mcp__Shadcn_UI__get_block` and `mcp__Shadcn_UI__get_component` to fetch the `chat-interface` blocks: message list, user/assistant bubbles, composer with send, streaming/typing indicator, scroll-to-bottom, optional thread sidebar. Without it, suggest `$ccc-connect shadcn`, then scaffold the same primitives by hand.

+ 2. Compose `ChatPanel` + `MessageList` + `Composer`. Streaming, auto-scroll and the empty state are first-class.

+ 3. If `Design.md` exists, apply its tokens before final styling.

+ 4. Run the `polish` pass on bubble and composer spacing, contrast and motion.

- | Category | Skills |

- |----------|--------|

- | Animation & Motion | animate, svg-animation, motion-design, framer-motion-patterns, gsap-patterns |

- | Visual Effects | interactive-visuals, particle-systems, generative-backgrounds, webgl-shader, retro-pixel, canvas-design |

- | Design Systems & Pages | frontend-design, landing-page-builder, interactive-landing, design-consultation, colorize, theme-factory |

- | Presentation & Output | screenshots, frontend-slides, web-artifacts-builder |

- | Routing & Context | design-router, design-context |

- | Impeccable Polish Suite | adapt, arrange, audit, bolder, clarify, critique, delight, distill, extract, harden, normalize, onboard, optimize, overdrive, polish, quieter, typeset |

- | Look-Book & Capture (v6.5.0, MengTo/Skills) | looks, capture |

+ ### Sub-flow B — Design.md (capture or apply)

- **Note:** Aligned with Anthropic's `frontend-design` plugin — ccc-design absorbs and extends its methodology.

+ Ask with AskUserQuestion (header "Design soul"):

- ### Routing matrix

+ - 🟢 Capture — scan the current UI and write `Design.md` (recommended when none exists)

+ - Apply — load an existing `Design.md` and bind every new component to it (recommended when one exists; list it first then)

- | Your intent | Route to |

- |-------------|----------|

- | "Add animations" / "Make it move" | `animate` + `motion-design` |

- | "Framer Motion animations" | `framer-motion-patterns` |

- | "GSAP / ScrollTrigger" | `gsap-patterns` |

- | "SVG animation" / "Lottie" | `svg-animation` |

- | "Interactive effects" / "Cursor trails" | `interactive-visuals` |

- | "Particles" / "Confetti" / "Snow" | `particle-systems` |

- | "Background effects" / "Noise gradients" | `generative-backgrounds` |

- | "3D" / "WebGL" / "Shaders" | `webgl-shader` |

- | "Retro" / "Pixel art" / "Glitch" | `retro-pixel` |

- | "Landing page" / "Hero section" | `landing-page-builder` + `interactive-landing` |

- | "Design system" / "Clean UI" | `frontend-design` + `design-consultation` |

- | "Chat UI" / "AI assistant interface" | Sub-flow A → shadcn `chat-interface` blocks |

- | "Capture / apply our design soul" | Sub-flow B → `Design.md` generate/consume |

- | "Turn this screenshot into UI" / "+ onboarding video" | Sub-flow C → `frontend-design` + `remotion` |

- | "Polish this" / "Make it better" | Impeccable Suite → `critique` then `polish` |

- | "Make it bolder" / "More impact" | `bolder` + `overdrive` |

- | "Tone it down" / "Too much" | `quieter` + `distill` |

- | "Color palette" / "Colors" | `colorize` |

- | "Presentation" / "Slides" | `frontend-slides` + `theme-factory` |

- | "Product screenshots" | `screenshots` |

- | "Give it a [named vibe]" / "dark-glass look" / "skeuomorphic" | Look-book → `looks` |

- | "Turn this video/HTML/site into a prompt" | Design capture → `capture` |

+ **Capture:** inspect `tailwind.config.*`, global CSS custom properties, font imports and a few representative components. Write `Design.md` at the repo root with four sections: Typography (families, scale, weights, line-height), Color (named tokens + hex + roles: bg, fg, primary, accent, border, muted), Spacing (base unit, scale, radius, shadow), Voice/Mood (one paragraph). If `Design.md` already exists, confirm with a picker (🟢 Keep the existing file · Overwrite it · Write `Design.draft.md` instead) before writing.

- ### Campaign templates

+ **Apply:** read `Design.md` and treat its tokens as binding for every component and edit in this session; pass them as `brand_context` to any `designer` agent. No `Design.md`: offer Capture first.

- **Stunning landing page**

- 1. `design-context` → capture brand, colors, fonts, mood

- 2. `landing-page-builder` → structure and layout

- 3. `interactive-landing` → hero animations, scroll narrative

- 4. `framer-motion-patterns` → component transitions

- 5. `particle-systems` or `generative-backgrounds` → ambient effects

- 6. `colorize` → color harmony check

- 7. `polish` → final quality pass

+ ### Sub-flow C — Screenshot → interactive UI (+ optional onboarding video)

- **Design system setup**

- 1. `design-context` → capture existing brand assets

- 2. `frontend-design` → anti-slop methodology

- 3. `design-consultation` → system proposal

- 4. `colorize` → palette and tokens

- 5. `typeset` → typography scale

- 6. `normalize` → consistency pass

+ 1. Read the image with Read; describe regions, components, type scale, color and spacing rhythm.

+ 2. If `Design.md` exists, reconcile the observed styles against its tokens so the rebuild is on-brand, not a pixel trace.

+ 3. Call the Agent tool with `subagent_type: designer`, `run_in_background: true`, payload `{ type: "screenshot-to-ui", stack: <detected>, brand_context: <Design.md tokens or "ask"> }`: production React + Tailwind with hover/focus/active states and responsive breakpoints.

+ 4. Ask with AskUserQuestion: 🟢 UI only · Also make an onboarding video. On the video, invoke the `remotion` skill for a captioned walkthrough (intro → feature beats → CTA) exported to MP4, with fonts and colors taken from `Design.md`.

- **Design polish pipeline**

- 1. `critique` → identify issues

- 2. Use AskUserQuestion with header "Direction", options: **Bolder Impact** (`bolder`/`overdrive`) / **Quieter Distill** (`quieter`/`distill`). Never write "Reply A/B" — always present as clickable chips.

- 3. `clarify` → improve readability

- 4. `arrange` → fix layout issues

- 5. `typeset` → typography refinement

- 6. `adapt` → responsive check

- 7. `polish` → final pass

+ ## Done when

- ### When to invoke this skill

+ Run before reporting, and report the actual result:

- - user: add smooth entrance animations to my landing page hero

- - assistant: Loads ccc-design, picker surfaces Landing + Polish. On Polish → routes to `animate` + `framer-motion-patterns`.

+ - Code changed: the project's build or typecheck exits 0 (`npm run build`, or `npx tsc --noEmit` when there is no build script), and `git status --short` lists only the files the branch was meant to touch. An agent's `files_changed` is checked against that list by the lead.

+ - Polish pass: the critique findings are listed with fixed / not fixed for each.

+ - `Design.md`: `grep -c '^## ' Design.md` shows the four sections.

+ - Video: the MP4 path the `remotion` render printed exists (`ls -la <path>`).

- - user: audit my UI and make it look more professional

- - assistant: Loads ccc-design, user picks Polish → runs Impeccable Suite pipeline: `critique` → `clarify` → `bolder` or `distill` → `polish`.

+ ## Guardrails

- - user: build a design system with dark mode support

- - assistant: Loads ccc-design, user picks Component system → routes to `frontend-design` + `design-consultation` + `colorize` + `typeset`.

+ - Never list the sub-skills as a typed menu; pickers have at most four options.

+ - Never overwrite an existing `Design.md` without the confirm picker.

+ - Never hand-roll chat bubbles or composers when the shadcn `chat-interface` block is available.

+ - Never pixel-trace a screenshot into a static clone; rebuild it interactive and on-brand.

+ - Never make the onboarding video without sourcing tokens from `Design.md` when one exists.

+ - Never deploy or publish the result from this skill; `$ccc-deploy` owns that and asks first.

- ---

+ ## See also

- **Bottom line:** header → context → 4-option picker → dispatch to sub-skill or agent. One click, never typing.

+ - `$ccc-build` — scaffold a new project first

+ - `$ccc-connect` — connect the figma or shadcn MCP server

+ - `$ccc-browse` — look at the rendered result in a browser

+ - `$ccc-makeover` — whole-project health overhaul

---

> ⚙️ **Fable contract:** plan before build · verifier ≠ worker · prove before alarm · loops need gates · leave durable state — `rules/fable-method.md`

> (On Codex, present these options as a numbered list and ask the user to reply with a number — AskUserQuestion is Claude-only.)