#	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
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)
43	`capture`	Design capture — video/HTML/live-page → reusable recreation prompts, robust full-page screenshots	NEW (v6.5.0, MengTo/Skills)

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)
"Give it a [named vibe/aesthetic]"	`looks`	`frontend-design` (system, not a named direction)
"Recreate this video/site as a prompt"	`capture`	`screenshots` (marketing crops, not full-page capture)

Campaign Templates

Stunning Landing Page (Full Stack)

design-context → capture brand, colors, fonts, mood
landing-page-builder → structure and layout
interactive-landing → hero animations, scroll narrative
framer-motion-patterns → component transitions
particle-systems or generative-backgrounds → ambient effects
colorize → color harmony check
polish → final quality pass

Design System Setup

design-context → capture existing brand assets
frontend-design → anti-slop methodology
design-consultation → system proposal
colorize → palette and tokens
typeset → typography scale
normalize → consistency pass
harden → edge case robustness

Visual Effects Showcase

design-context → performance budget
webgl-shader or particle-systems → core effects
interactive-visuals → user interaction
gsap-patterns → scroll-triggered reveals
optimize → performance pass

Design Polish Pipeline

critique → identify issues
Choose: bolder/overdrive (more impact) OR quieter/distill (less noise)
clarify → improve readability
arrange → fix layout issues
typeset → typography refinement
adapt → responsive check
polish → final pass

ccc-design

ccc-design

Absorbed Skills Manifest