Install
npx skills add Leonxlnx/taste-skill
npx skills add emilkowalski/skill
npx skills add pbakaus/impeccable
git clone https://github.com/kylezantos/design-motion-principles.git
cp -r design-motion-principles/skills/design-motion-principles ~/.claude/skills/Block A — Taste-default (~470)
PRIMARY: taste-skill (premium, balanced, hardware-accelerated, strict typographic contrast, refined micro-motion). Ref: Stripe, Raycast, Linear.
ALWAYS APPLY: gpt-tasteskill, stitch-skill, redesign-skill, brandkit, imagegen-frontend-web (SVG decoration), design-motion-principles (full create), seedance-cinematic if brand fits.
AUTO-SKIP: minimalist-skill, brutalist-skill, soft-skill, industrial-brutalist-ui.
FLOOR (no placeholders):
- >=1 hero asset from /assets/: image, video, or Spline iframe.
- >=2 hero-class visual moments (mesh gradient, scroll-driven type, parallax).
- >=1 backdrop-filter surface.
- Motion restrained but present every section.Block B — Minimalist (~530)
PRIMARY: minimalist-skill (warm monochrome, typographic contrast, flat bento, muted pastels, NO heavy gradients, NO drop shadows). Ref: Linear, Notion, Vercel docs.
ALWAYS APPLY: stitch-skill, redesign-skill, brandkit, imagegen-frontend-web (line-art SVGs), design-motion-principles (audit + restrained create).
AUTO-SKIP: taste-skill, gpt-tasteskill, brutalist-skill, soft-skill, industrial-brutalist-ui, seedance-cinematic, three.js.
FLOOR (no placeholders):
- >=1 hero asset from /assets/: typography-driven or line-art SVG hero.
- >=2 SVG line illustrations.
- >=1 oversized typography moment (mask-image or scroll reveal).
- Motion limited to subtle reveals + hover. No mesh, 3D, or liquid glass.Block C — Soft (~480)
PRIMARY: soft-skill (gentle, rounded, warm, friendly, organic curves, soft shadows allowed). Ref: Things 3, Bear, Centered.
ALWAYS APPLY: stitch-skill, redesign-skill, brandkit, imagegen-frontend-web (warm rounded illus), design-motion-principles (Emil + Jhey lenses).
AUTO-SKIP: taste-skill, gpt-tasteskill, minimalist-skill, brutalist-skill, industrial-brutalist-ui.
FLOOR (no placeholders):
- >=1 hero asset from /assets/: warm photo or rounded illustration.
- >=2 friendly SVG illustrations (rounded, warm palette).
- >=1 soft mesh gradient surface.
- Spring-based micro-motion (motion.dev or GSAP springs).Block D — Brutalist (~530)
PRIMARY: brutalist-skill (raw, Swiss-print + terminal, rigid grid, extreme type contrast, mechanical motion, NO liquid glass). Ref: Bun docs, Cluely, Are.na.
ALWAYS APPLY: stitch-skill, redesign-skill, brandkit, imagegen-frontend-web (halftone/wireframe), design-motion-principles (Jakub + Jhey lenses).
AUTO-SKIP: taste-skill, gpt-tasteskill, minimalist-skill, soft-skill. No backdrop-filter.
FLOOR (no placeholders):
- >=1 hero asset from /assets/: high-contrast photo, halftone, or wireframe.
- >=2 high-contrast graphic moments (halftones, ASCII, mono SVGs).
- >=1 mechanical scroll choreography (snap-scroll, hard cuts, glitch).
- Sharp motion, not springy.Block E — Cinematic (~870)
PRIMARY: Cinematic-Maximalist (Apple/Linear-2024/Vercel-mesh/Stripe-Sigma). Vocabulary: animated mesh gradients, backdrop-filter (liquid glass), scroll choreography, hero media from /assets/, color-mix() gradients, mask-image reveals, oversized type.
ALWAYS APPLY: taste-skill, gpt-tasteskill, stitch-skill, redesign-skill, brandkit, imagegen-frontend-web (SVG decoration ONLY, not hero), design-motion-principles (all 3 lenses).
AUTO-SKIP: minimalist-skill, brutalist-skill, soft-skill, industrial-brutalist-ui.
FLOOR (all ship in source, no placeholders):
- Hero from /assets/: Spline iframe OR <video> OR <img>/<picture>. SVG-only fails.
- Full-bleed mesh gradient as hero bg, >=60vh (not corner).
- >=2 liquid glass surfaces (blur>=16px), one theatrical (floating over hero).
- Magnetic cursor on primary CTA (GSAP/motion.dev).
- 3D tilt-on-hover (perspective+rotateX/Y) on /assets/ mockup cards.
- Sticky-scroll pin+morph (GSAP ScrollTrigger).
- Layered parallax, 3+ depth layers.
- >=2 SVG illustrations as decoration only (do NOT count toward hero).MASTER PROMPT
/goal Upgrade {{PROJECT_PATH}} ({{LOCAL_URL}}) in 4 phases. Every register skill = APPLIED (file:line) or SKIPPED (reason). No UNKNOWN. {{BLOCK}} REGISTER: taste-skill, gpt-tasteskill, brandkit, minimalist-skill, brutalist-skill, soft-skill, stitch-skill, redesign-skill, output-skill, image-to-code-skill, imagegen-frontend-web, imagegen-frontend-mobile, emil-design-eng, impeccable (shape/craft/teach/document/extract/critique/audit/polish/bolder/quieter/distill/harden/onboard/animate/colorize/typeset/layout/delight/overdrive/clarify/adapt/optimize/live), design-motion-principles (create+audit, lenses: emil-kowalski/jakub-krehel/jhey-tompkins), seedance-cinematic, stop-slop, humanizer, frontend-design. RULES: PRIMARY→APPLY full ruleset. ALWAYS APPLY→APPLY role. AUTO-SKIP→SKIP "aesthetic conflict". imagegen-frontend-web→APPLY mandatory (>=2 SVG illus). Other→judge per page, reason inline. DEPS allowed: motion.dev, gsap, lenis, three.js, @splinetool/runtime, lottiefiles. Banned: bootstrap, jquery. ASSETS at {{PROJECT_PATH}}/assets/: every file referenced in final page OR documented SKIPPED with reason in Phase 1.5. .url files = Spline iframe URLs. Images/videos = use as-is. PLACEHOLDER BAN: every Phase 1.5 asset ends as REAL file/URL in source. No TODO comments, scene-descriptions, or unrun Seedance prompts. Can't ship → SKIP with reason. PHASE 1 PLAN: (a) SKILL REGISTER markdown table cols Skill|Source|Verdict|Rules-or-reason. (b) impeccable.shape. (c) Section plan with per-section visual target. PHASE 1.5 ASSETS: (a) List every hero visual moment + asset path from /assets/. (b) Embed Spline via iframe, reference images/videos via real src. (c) Inline SVG decorations + CSS gradients. (d) All in transcript BEFORE code. NO PLACEHOLDERS. PHASE 2 EXECUTE: (a) Per-section diff. (b) Every change tagged [skill: rule]. (c) brandkit tokens file:line. PHASE 3 REVIEW: (a) impeccable.critique. (b) impeccable.audit. (c) design-motion-principles.audit all 3 lenses. (d)
npx lighthouse {{LOCAL_URL}} --output=json --chrome-flags="--headless"BEFORE+AFTER. After: A11y>=95, SEO>=95, BP>=90, LCP<=2.5s, CLS<=0.1, INP<=200ms. (e) VISUAL AMBITION AUDIT vs block floor. (f) stop-slop + humanizer on copy, zero flagged. (g) FINAL CHECKLIST markdown checkboxes. DONE when: register complete, assets REAL in source (zero placeholders), changes tagged, review pasted, vitals + visual floor pass, zero UNKNOWN. Constraints: only chosen primary aesthetic. Allowed deps as listed. Don't break CTAs. No emoji. prefers-reduced-motion = fallback, NOT baseline. Responsive 375/768/1440. Stop after 10 turns.
After the above is done, to add more motion graphics, pick a prompt from 21st.dev and give it to claude and ask it to use any skills necessary to make it work.