1---2name: ccc-design3description: CCC domain — complete design & animation ecosystem — 35+ skills in one. Animations, visual effects, design systems, landing pages, and the Impeccable polish suite.4---56# ccc-design78> Load ONE skill. Get the entire design/animation domain. Built from 30+ proven skills + 5 new ones + 2 grafted from MengTo/Skills (v6.5.0).910## Absorbed Skills Manifest1112| # | Original Skill | What It Does | Status |13|---|----------------|--------------|--------|14| 1 | `animate` | Purposeful CSS/JS animations — entrance, exit, state transitions | Absorbed |15| 2 | `svg-animation` | SVG animation — GSAP, Lottie, path morphing, line drawing | Absorbed |16| 3 | `motion-design` | Motion design — Framer Motion, CSS keyframes, parallax scrolling | Absorbed |17| 4 | `interactive-visuals` | Interactive effects — cursor trails, hover distortions, physics simulations | Absorbed |18| 5 | `particle-systems` | Particle effects — Canvas/WebGL confetti, fire, snow, aurora, starfields | Absorbed |19| 6 | `generative-backgrounds` | Generative art — noise gradients, voronoi, cellular automata, flow fields | Absorbed |20| 7 | `canvas-design` | Canvas art — visual design in PNG/PDF/SVG via Canvas API | Absorbed |21| 8 | `webgl-shader` | WebGL/3D — Three.js scenes, GLSL shaders, post-processing effects | Absorbed |22| 9 | `retro-pixel` | Retro effects — CRT scanlines, 8-bit pixel art, VHS glitch, ASCII art | Absorbed |23| 10 | `colorize` | Strategic color — palette generation, contrast optimization, color theory application | Absorbed |24| 11 | `theme-factory` | Themed output — branded slides, docs, reports with consistent visual identity | Absorbed |25| 12 | `screenshots` | Marketing screenshots — annotated, device-framed product screenshots | Absorbed |26| 13 | `frontend-design` | Anti-slop design — Anthropic's methodology for clean, professional UI | Absorbed |27| 14 | `landing-page-builder` | Landing pages — high-converting layouts with hero, features, pricing, CTA | Absorbed |28| 15 | `frontend-slides` | Presentation animations — slide decks with rich motion and transitions | Absorbed |29| 16 | `web-artifacts-builder` | HTML artifacts — multi-component standalone HTML pages | Absorbed |30| 17 | `design-consultation` | Design system proposal — full design system audit and recommendations | Absorbed |31| 18-36 | **Impeccable Suite** | 19 design polish skills (see below) | Absorbed |32| 37 | `design-router` | Routes your design task to the right specialist | **NEW** |33| 38 | `design-context` | Captures brand, palette, animation preferences, performance budget | **NEW** |34| 39 | `framer-motion-patterns` | Comprehensive Framer Motion — layout animations, gestures, scroll-triggered, stagger | **NEW** |35| 40 | `gsap-patterns` | GSAP mastery — ScrollTrigger, timeline sequencing, SVG morphing, pinning | **NEW** |36| 41 | `interactive-landing` | Interactive landing pages — hero animations, scroll narratives, 3D showcases | **NEW** |37| 42 | `looks` | Named aesthetic look-book — 25 named design-system directions (clean-minimal, dark-glass, skeuomorphic, mesh-gradient, etc.) | **NEW (v6.5.0, MengTo/Skills)** |38| 43 | `capture` | Design capture — video/HTML/live-page → reusable recreation prompts, robust full-page screenshots | **NEW (v6.5.0, MengTo/Skills)** |3940### Impeccable Polish Suite (19 skills)41| Skill | Purpose |42|-------|---------|43| `adapt` | Adapt design to different contexts/devices |44| `arrange` | Layout and spatial arrangement |45| `audit` | Design quality audit |46| `bolder` | Make designs more impactful |47| `clarify` | Improve visual clarity |48| `critique` | Design critique and feedback |49| `delight` | Add delightful micro-interactions |50| `distill` | Simplify and reduce visual noise |51| `extract` | Extract design patterns |52| `harden` | Make designs more robust |53| `normalize` | Normalize inconsistencies |54| `onboard` | Improve onboarding UX |55| `optimize` | Optimize design performance |56| `overdrive` | Push designs to maximum impact |57| `polish` | Final polish pass |58| `quieter` | Tone down overwhelming elements |59| `typeset` | Typography optimization |6061**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 skills6263---6465## Routing Matrix6667| Your Intent | Route To | Don't Confuse With |68|-------------|----------|--------------------|69| "Add animations" / "Make it move" | `animate` + `motion-design` | `interactive-visuals` (user-driven) |70| "Framer Motion animations" | `framer-motion-patterns` | `motion-design` (general motion) |71| "GSAP / ScrollTrigger" | `gsap-patterns` | `svg-animation` (SVG-specific) |72| "SVG animation" / "Lottie" | `svg-animation` | `gsap-patterns` (broader GSAP) |73| "Interactive effects" / "Cursor trails" | `interactive-visuals` | `animate` (non-interactive) |74| "Particles" / "Confetti" / "Snow" | `particle-systems` | `generative-backgrounds` (static) |75| "Background effects" / "Noise gradients" | `generative-backgrounds` | `particle-systems` (discrete particles) |76| "3D" / "WebGL" / "Shaders" | `webgl-shader` | `canvas-design` (2D) |77| "Retro" / "Pixel art" / "Glitch" | `retro-pixel` | `generative-backgrounds` |78| "Landing page" / "Hero section" | `landing-page-builder` + `interactive-landing` | `frontend-design` (system, not page) |79| "Design system" / "Clean UI" | `frontend-design` + `design-consultation` | `landing-page-builder` (single page) |80| "Polish this" / "Make it better" | Impeccable suite → start with `critique` then `polish` | |81| "Make it bolder" / "More impact" | `bolder` + `overdrive` | `quieter` (opposite) |82| "Tone it down" / "Too much" | `quieter` + `distill` | `bolder` (opposite) |83| "Color palette" / "Colors" | `colorize` | `theme-factory` (broader theming) |84| "Presentation" / "Slides" | `frontend-slides` + `theme-factory` | `landing-page-builder` |85| "Product screenshots" | `screenshots` | `canvas-design` (art) |86| "Give it a [named vibe/aesthetic]" | `looks` | `frontend-design` (system, not a named direction) |87| "Recreate this video/site as a prompt" | `capture` | `screenshots` (marketing crops, not full-page capture) |8889---9091## Campaign Templates9293### Stunning Landing Page (Full Stack)941. `design-context` → capture brand, colors, fonts, mood952. `landing-page-builder` → structure and layout963. `interactive-landing` → hero animations, scroll narrative974. `framer-motion-patterns` → component transitions985. `particle-systems` or `generative-backgrounds` → ambient effects996. `colorize` → color harmony check1007. `polish` → final quality pass101102### Design System Setup1031. `design-context` → capture existing brand assets1042. `frontend-design` → anti-slop methodology1053. `design-consultation` → system proposal1064. `colorize` → palette and tokens1075. `typeset` → typography scale1086. `normalize` → consistency pass1097. `harden` → edge case robustness110111### Visual Effects Showcase1121. `design-context` → performance budget1132. `webgl-shader` or `particle-systems` → core effects1143. `interactive-visuals` → user interaction1154. `gsap-patterns` → scroll-triggered reveals1165. `optimize` → performance pass117118### Design Polish Pipeline1191. `critique` → identify issues1202. Choose: `bolder`/`overdrive` (more impact) OR `quieter`/`distill` (less noise)1213. `clarify` → improve readability1224. `arrange` → fix layout issues1235. `typeset` → typography refinement1246. `adapt` → responsive check1257. `polish` → final pass
KevinZai