🎯

12-principles-of-animation

🎯Skill

from raphaelsalaja/userinterface-wiki

What it does

A living wiki of articles, patterns, and best practices for designing and building user interfaces, built with Fumadocs and Base UI with text-to-speech transcription.

📦

Same repository

raphaelsalaja/userinterface-wiki(16 items)

12-principles-of-animation

Installation

Vibe Index InstallInstalls to .claude/skills/ - auto-recognized by Claude Code

npx vibeindex add raphaelsalaja/userinterface-wiki --skill 12-principles-of-animation

skills.sh Install⚠ Installs to .agents/skills/ - may not be auto-recognized by Claude Code

npx skills add raphaelsalaja/userinterface-wiki --skill 12-principles-of-animation

Manual InstallCopy SKILL.md content and save to the path below

~/.claude/skills/12-principles-of-animation/SKILL.md

SKILL.md

281Installs

122

Last UpdatedJan 28, 2026

View on GitHub Back to Skills

More from this repository10

🎯

userinterface-wiki🎯Skill

Skill

🎯

generating-sounds-with-ai🎯Skill

Generates audio code quality checks for Web Audio API, identifying best practices and potential issues in sound synthesis implementations.

🎯

sounds-on-the-web🎯Skill

A living wiki of articles, patterns, and best practices for designing and building user interfaces, built with Fumadocs and Base UI with text-to-speech transcription.

🎯

to-spring-or-not-to-spring🎯Skill

Animation timing audit skill that reviews code for correct spring vs easing function selection, checking interaction types against animation rules and outputting findings in file:line format

🎯

mastering-animate-presence🎯Skill

A living wiki of articles, patterns, and best practices for designing and building user interfaces, built with Fumadocs and Base UI with text-to-speech transcription.

🎯

pseudo-elements🎯Skill

Analyzes CSS pseudo-elements and View Transitions API to enforce best practices for decorative layers, hover effects, and page transitions with precise file:line reporting.

🎯

morphing-icons🎯Skill

Transforms icons seamlessly by morphing SVG lines between any two icons using a consistent 3-line structural approach.

🎯

web-design-guidelines🎯Skill

Skill

🎯

vercel-react-best-practices🎯Skill

Skill

🎯

skill-creator🎯Skill

Skill