Free SKILL.md scraped from GitHub. Clone the repo or copy the file directly into your Claude Code skills directory.
npx versuz@latest install kevinzai-commander-skills-ccc-designgit clone https://github.com/KevinZai/commander.gitcp commander/SKILL.MD ~/.claude/skills/kevinzai-commander-skills-ccc-design/SKILL.md--- 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