ccc-design

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…
allowed-tools	["Read","Write","Edit","Bash","Glob","Grep","Agent","AskUserQuestion","TodoWrite"]
argument-hint	[intent: landing | components | polish | figma]

/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.

Response shape (EVERY time)

1. Brand header (one line)

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

2. Context strip (one line)

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

• test -f package.json && jq -r '.dependencies | keys[]' package.json 2>/dev/null | grep -E '^(next|react|vue|svelte|astro|@tailwindcss|tailwindcss)$' — detect framework
• 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

Render a one-liner:

🎨 Stack: <Next.js | React | HTML | Vue | unknown> · components · <Tailwind | plain CSS> · branch <name>

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

3. The picker — AskUserQuestion with 4 options

Read ${CODEX_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.

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."

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)

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.

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

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

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:

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."

• 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.

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.

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

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

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.

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.

---

Anti-patterns — DO NOT

• ❌ 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

---

Domain reference — the 41 sub-skills

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.

What's inside

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

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

Routing matrix

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

Campaign templates

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

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

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

When to invoke this skill

• 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.

• 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.

• 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.

---

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

---

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