animation-motion-polish
Guidance for implementing high-quality, performant animations in web applications.
Install
mkdir -p .claude/skills/animation-motion-polish && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/13489" && unzip -o skill.zip -d .claude/skills/animation-motion-polish && rm skill.zipInstalls to .claude/skills/animation-motion-polish
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Use this skill for motion hierarchy, transitions, microinteractions, reduced motion, performance-safe animation. Trigger when the task involves web design work related to Animation Motion Polish, production implementation, audits, debugging, strategy, or validation.Key capabilities
- →Handle motion hierarchy
- →Implement transitions and microinteractions
- →Manage reduced motion accessibility
- →Ensure performance-safe animation
- →Audit animation performance
How it works
The skill clarifies user outcomes and constraints, inspects the repository, and implements production-ready changes, validating them with checks like tests and browser review.
Inputs & outputs
When to use animation-motion-polish
- →Implement UI microinteractions
- →Audit animation performance
- →Review motion design hierarchy
About this skill
Animation Motion Polish
Use this skill to handle Web Design tasks focused on motion hierarchy, transitions, microinteractions, reduced motion, performance-safe animation.
Workflow
- Clarify the user outcome, constraints, current stack, and definition of done.
- Inspect the local repository or provided artifacts before proposing changes.
- Check official documentation when APIs, platform rules, SDK versions, policies, or production behavior may have changed.
- For non-trivial choices, compare proven open-source patterns or examples and adapt ideas without copying incompatible code.
- Implement the smallest production-ready change that satisfies the request.
- Validate with the most relevant checks: tests, lint, typecheck, build, browser/device review, audits, or manual scenario.
- Report changed files, commands run, remaining risks, and exact next steps.
Focus Checklist
- Define scope and assumptions explicitly.
- Prefer existing project conventions and tools.
- Handle loading, empty, error, permission, and edge states where relevant.
- Include security, privacy, performance, accessibility, and rollback considerations when they apply.
- Keep output actionable and evidence-backed.
Guardrails
- Do not add motion that harms accessibility or perceived performance.
- Do not perform destructive, paid, production, trading, publishing, or account-changing actions without explicit user confirmation.
- Do not expose secrets, private keys, tokens, cookies, personal data, or confidential business data.
- If validation is impossible, state exactly why and provide a manual verification path.
When not to use it
- →When the task does not involve web design work related to Animation Motion Polish
- →When adding motion that harms accessibility or perceived performance
Limitations
- →Do not add motion that harms accessibility or perceived performance
- →Do not perform destructive, paid, production, trading, publishing, or account-changing actions without explicit user confirmation
How it compares
This skill provides a structured workflow and checklist for animation tasks, focusing on user outcomes and validation, unlike an unguided implementation.
Compared to similar skills
animation-motion-polish side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| animation-motion-polish (this skill) | 0 | 1mo | No flags | Intermediate |
| vercel-react-native-skills | 21 | 6mo | No flags | Intermediate |
| mobile-design | 149 | 4mo | Review | Intermediate |
| scroll-experience | 101 | 6mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by srednoff888-art
View all by srednoff888-art →You might also like
vercel-react-native-skills
vercel-labs
React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.
mobile-design
sickn33
Mobile-first design and engineering doctrine for iOS and Android apps. Covers touch interaction, performance, platform conventions, offline behavior, and mobile-specific decision-making. Teaches principles and constraints, not fixed layouts. Use for React Native, Flutter, or native mobile apps.
scroll-experience
davila7
Expert in building immersive scroll-driven experiences - parallax storytelling, scroll animations, interactive narratives, and cinematic web experiences. Like NY Times interactives, Apple product pages, and award-winning web experiences. Makes websites feel like experiences, not just pages. Use when: scroll animation, parallax, scroll storytelling, interactive story, cinematic website.
game-art
davila7
Game art principles. Visual style selection, asset pipeline, animation workflow.
motion-graphics
rohitg00
Kinetic typography, logo animations, and stylized motion design skill. **Triggers when:** - User wants text animations or kinetic typography - Request involves logo reveals or title sequences - Content focuses on visual impact over education - User mentions "title", "intro", "logo", "text animation", "kinetic" **Capabilities:** - Kinetic typography with dynamic text effects - Logo reveals and brand animations - Particle effects and visual flourishes - Modern motion design patterns - Attention-grabbing title sequences
interaction-design
wshobson
Design and implement microinteractions, motion design, transitions, and user feedback patterns. Use when adding polish to UI interactions, implementing loading states, or creating delightful user experiences.