ccc-design

---
name: ccc-design
description: "CCC domain — complete design & animation ecosystem — 35+ skills in one. Animations, visual effects, design systems, landing pages, and the Impeccable polish suite."
version: 1.0.0
category: CCC domain
brand: Kevin Z's CC Commander
---

# ccc-design

> Load ONE skill. Get the entire design/animation domain. Built from 30+ proven skills + 5 new ones.

## Absorbed Skills Manifest

| # | Original Skill | What It Does | Status |
|---|----------------|--------------|--------|
| 1 | `animate` | Purposeful CSS/JS animations — entrance, exit, state transitions | Absorbed |
| 2 | `svg-animation` | SVG animation — GSAP, Lottie, path morphing, line drawing | Absorbed |
| 3 | `motion-design` | Motion design — Framer Motion, CSS keyframes, parallax scrolling | Absorbed |
| 4 | `interactive-visuals` | Interactive effects — cursor trails, hover distortions, physics simulations | Absorbed |
| 5 | `particle-systems` | Particle effects — Canvas/WebGL confetti, fire, snow, aurora, starfields | Absorbed |
| 6 | `generative-backgrounds` | Generative art — noise gradients, voronoi, cellular automata, flow fields | Absorbed |
| 7 | `canvas-design` | Canvas art — visual design in PNG/PDF/SVG via Canvas API | Absorbed |
| 8 | `webgl-shader` | WebGL/3D — Three.js scenes, GLSL shaders, post-processing effects | Absorbed |
| 9 | `retro-pixel` | Retro effects — CRT scanlines, 8-bit pixel art, VHS glitch, ASCII art | Absorbed |
| 10 | `colorize` | Strategic color — palette generation, contrast optimization, color theory application | Absorbed |
| 11 | `theme-factory` | Themed output — branded slides, docs, reports with consistent visual identity | Absorbed |
| 12 | `screenshots` | Marketing screenshots — annotated, device-framed product screenshots | Absorbed |
| 13 | `frontend-design` | Anti-slop design — Anthropic's methodology for clean, professional UI | Absorbed |
| 14 | `landing-page-builder` | Landing pages — high-converting layouts with hero, features, pricing, CTA | Absorbed |
| 15 | `frontend-slides` | Presentation animations — slide decks with rich motion and transitions | Absorbed |
| 16 | `web-artifacts-builder` | HTML artifacts — multi-component standalone HTML pages | Absorbed |
| 17 | `design-consultation` | Design system proposal — full design system audit and recommendations | Absorbed |
| 18-36 | **Impeccable Suite** | 19 design polish skills (see below) | Absorbed |
| 37 | `design-router` | Routes your design task to the right specialist | **NEW** |
| 38 | `design-context` | Captures brand, palette, animation preferences, performance budget | **NEW** |
| 39 | `framer-motion-patterns` | Comprehensive Framer Motion — layout animations, gestures, scroll-triggered, stagger | **NEW** |
| 40 | `gsap-patterns` | GSAP mastery — ScrollTrigger, timeline sequencing, SVG morphing, pinning | **NEW** |
| 41 | `interactive-landing` | Interactive landing pages — hero animations, scroll narratives, 3D showcases | **NEW** |

### Impeccable Polish Suite (19 skills)
| Skill | Purpose |
|-------|---------|
| `adapt` | Adapt design to different contexts/devices |
| `arrange` | Layout and spatial arrangement |
| `audit` | Design quality audit |
| `bolder` | Make designs more impactful |
| `clarify` | Improve visual clarity |
| `critique` | Design critique and feedback |
| `delight` | Add delightful micro-interactions |
| `distill` | Simplify and reduce visual noise |
| `extract` | Extract design patterns |
| `harden` | Make designs more robust |
| `normalize` | Normalize inconsistencies |
| `onboard` | Improve onboarding UX |
| `optimize` | Optimize design performance |
| `overdrive` | Push designs to maximum impact |
| `polish` | Final polish pass |
| `quieter` | Tone down overwhelming elements |
| `typeset` | Typography optimization |

**Replaces loading:** animate, svg-animation, motion-design, interactive-visuals, particle-systems, generative-backgrounds, canvas-design, webgl-shader, retro-pixel, colorize, theme-factory, screenshots, frontend-design, landing-page-builder, frontend-slides, web-artifacts-builder, design-consultation, + all 19 Impeccable skills

---

## Routing Matrix

| Your Intent | Route To | Don't Confuse With |
|-------------|----------|--------------------|
| "Add animations" / "Make it move" | `animate` + `motion-design` | `interactive-visuals` (user-driven) |
| "Framer Motion animations" | `framer-motion-patterns` | `motion-design` (general motion) |
| "GSAP / ScrollTrigger" | `gsap-patterns` | `svg-animation` (SVG-specific) |
| "SVG animation" / "Lottie" | `svg-animation` | `gsap-patterns` (broader GSAP) |
| "Interactive effects" / "Cursor trails" | `interactive-visuals` | `animate` (non-interactive) |
| "Particles" / "Confetti" / "Snow" | `particle-systems` | `generative-backgrounds` (static) |
| "Background effects" / "Noise gradients" | `generative-backgrounds` | `particle-systems` (discrete particles) |
| "3D" / "WebGL" / "Shaders" | `webgl-shader` | `canvas-design` (2D) |
| "Retro" / "Pixel art" / "Glitch" | `retro-pixel` | `generative-backgrounds` |
| "Landing page" / "Hero section" | `landing-page-builder` + `interactive-landing` | `frontend-design` (system, not page) |
| "Design system" / "Clean UI" | `frontend-design` + `design-consultation` | `landing-page-builder` (single page) |
| "Polish this" / "Make it better" | Impeccable suite → start with `critique` then `polish` | |
| "Make it bolder" / "More impact" | `bolder` + `overdrive` | `quieter` (opposite) |
| "Tone it down" / "Too much" | `quieter` + `distill` | `bolder` (opposite) |
| "Color palette" / "Colors" | `colorize` | `theme-factory` (broader theming) |
| "Presentation" / "Slides" | `frontend-slides` + `theme-factory` | `landing-page-builder` |
| "Product screenshots" | `screenshots` | `canvas-design` (art) |

---

## Campaign Templates

### Stunning Landing Page (Full Stack)
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
7. `harden` → edge case robustness

### Visual Effects Showcase
1. `design-context` → performance budget
2. `webgl-shader` or `particle-systems` → core effects
3. `interactive-visuals` → user interaction
4. `gsap-patterns` → scroll-triggered reveals
5. `optimize` → performance pass

### Design Polish Pipeline
1. `critique` → identify issues
2. Choose: `bolder`/`overdrive` (more impact) OR `quieter`/`distill` (less noise)
3. `clarify` → improve readability
4. `arrange` → fix layout issues
5. `typeset` → typography refinement
6. `adapt` → responsive check
7. `polish` → final pass