Web Motion
Closes the agentic coding loop for web animation. Lets Claude scroll the user's page while recording it (Playwright), extract frames, build a labelled contact sheet, and reason about timing/easing/trajectory frame-by-frame — plus motion design principles (Disney's 12, adapted for web, GSAP, CSS, scroll input) to name and fix what's wrong. Use whenever the user wants to add, improve, debug, or review any animation — scroll effects, transitions, hover states, entrance/exit, loading states, micro-interactions. Trigger even if the user doesn't say "animation" but describes something moving, appear
Install
npx skills add Schmandarine/web-motion-skill --skill web-motiongit clone --depth 1 https://github.com/Schmandarine/web-motion-skill.git /tmp/web-motion-skill
mkdir -p ~/.claude/skills
cp -r /tmp/web-motion-skill/. ~/.claude/skills/web-motionPersonal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.
From the SKILL.md
# Web Motion This skill closes the agentic coding loop for web animation. Without it, you write animation code blind — you can't watch what you just produced, so you rely on the user to describe what feels wrong. With it you get both halves of the loop: 1. **Vision** — bundled scripts record the page with Playwright (or ffmpeg for hover/click flows), extract frames at 25fps, and build a labelled contact sheet. You read those images directly and reason about timing, easing, and trajectory the way a motion designer reviews a take. 2. **Judgment** — Disney's 12 Principles of Animation, adapted for the constraints of the web (scroll input, GSAP timelines, CSS transitions, browser rendering). Once you can see what's broken, the principles name what's wrong and point at the fix. The combination is what matters. Without vision, you guess about an animation you can't perceive. Without the principles, *"it feels off"* stays unactionable. Together: watch the take → name the violated principle → write the fix → re-record to verify. ## Works with the Official GSAP Skills This skill handles **vision and judgment** — recording the page, reading frames, naming what's wrong. The [official GSAP skills](https://github.com/greensock/gsap-skills) handle **API correctness** — writing GSAP code the right way (timelines, ScrollTrigger, plugins, React, performance). Together they close the full loop: 1. **Write** — use the GSAP skills to produce correct animation code
Details
- Skill name
web-motion- Repository
- Schmandarine/web-motion-skill
- Repo updated
- 17 August 2026
FAQ
What does the Web Motion skill do?
Closes the agentic coding loop for web animation. Lets Claude scroll the user's page while recording it (Playwright), extract frames, build a labelled contact sheet, and reason about timing/easing/trajectory frame-by-frame — plus motion design principles (Disney's 12, adapted for web, GSAP, CSS, scroll input) to name and fix what's wrong. Use whenever the user wants to add, improve, debug, or review any animation — scroll effects, transitions, hover states, entrance/exit, loading states, micro-interactions. Trigger even if the user doesn't say "animation" but describes something moving, appear
How do I install the Web Motion skill?
skills CLI (Claude Code, Cursor, Codex and more): npx skills add Schmandarine/web-motion-skill --skill web-motion. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.
Is Web Motion popular?
It lives in Schmandarine/web-motion-skill, which has 19 GitHub stars and 1 forks.
Related skills
Find Domain
21paveldevyatov/ai-domain-name-generator
AI domain name generator, domain finder and domain availability checker — brainstorms brandable names and domain hacks for a project, then checks which are really free at the registries (RDAP and whois), honest about zones it can't verify. Use when the user wants to find, brainstorm, generate or check a domain name, asks whether a domain like X.com is available or taken, wants domain hacks (bit.ly-style names), or needs a brand or product name with a free domain for a project, startup or app.
Screenshot to HTML
16sevzq/screenshot-to-html
Replicate a UI screenshot/image/mockup into a high-fidelity, self-contained HTML page. Faithful image-to-HTML / screenshot-to-code cloning that matches the RENDERED result (not copied computed numbers) through a render -> screenshot -> compare -> refine loop using the local Chrome. Use whenever the user gives an image/screenshot/mockup/Figma export and wants HTML/CSS (plain or Tailwind), or asks to "复刻 / 还原 / clone / recreate / turn this design into a webpage".
Html2elementor
16dudaster/html2elementor
Convert HTML+CSS into Elementor JSON that imports into WordPress. Always use this skill whenever the user has HTML/CSS (pasted, file, URL, or AI-generated) and wants it to end up as an Elementor page — phrases like "convert HTML to Elementor", "import this landing into WordPress as Elementor", "make this Tailwind mockup an Elementor page", "turn my markup into Elementor JSON", "recreate this site in Elementor", or any variant. Do not try to produce Elementor JSON by hand — Elementor has non-obvious quirks (shared system-color globals that break previous pages, lazy-load hiding backgrounds, wid
Apple Design System
19rukkiecodes/claude-apple-design-system
Apple-inspired UI/UX design language (from getdesign.md/apple) as adapted into a production app. Use when building, restyling, or reviewing any UI — screens, components, buttons, headers, alerts, sheets, cards, forms, typography, color, or spacing — so the result matches this Apple design language: photography-first, a single blue accent, pill CTAs, no chrome shadows, and a strict weight ladder. Trigger on "design a screen", "style this component", "make it look Apple / like QueenSkiilia", "build the UI", or "review my UI for design consistency".
Interaction Design
21rastian/interaction-design-skills
Apply interaction design (IxD) principles and frameworks to product and service design work. Use this skill when designing or evaluating interaction flows, micro-interactions, feedback mechanisms, affordances, mental models, component states, response time, animation and transitions, error recovery, input validation, task flows, or navigation patterns. Core audiences: product designers, UX designers, UI designers, service designers, and interaction designers working on digital products and services. Trigger on: interaction flow, micro-interaction, affordance, feedback design, state design (hov
Typescript React Nextjs Patterns
22leejpsd/typescript-react-nextjs-patterns
Production-grade TypeScript reference for React & Next.js frontend development. Covers type narrowing, component Props, generic hooks, discriminated unions, as const, satisfies, Zod validation, TanStack Query, server/client boundaries, forms, state management, performance, accessibility, debugging, and code review. Use when the user works with TypeScript in React or Next.js: type errors, Props design, generics, API typing, SSR/CSR boundaries, hydration issues, form validation, state management, performance, or code review. Also use for "how should I type this?", "why does this type error happe
Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.