Takes a static UI and systematically adds purposeful animations across entrance effects, micro-interactions, state transitions, and navigation flows. It identifies missing feedback opportunities, plans animation strategy by impact, then implements everything from button hover states to page load choreography. Includes specific timing guidelines (100-150ms for feedback, 200-300ms for state changes), modern easing curves that actually feel good, and proper accessibility handling for reduced motion preferences. Good for when your interface works but feels lifeless, or when you need to add polish without overdoing it. Focuses on GPU-accelerated properties and 60fps performance rather than flashy effects.

install copies · 90 days. Times the install command was copied on this site in the last 90 days, bots filtered.
5
skills.sh installs
81.7K
GitHub stars
107K
last updated
Aug 21, 2026

Install

$ npx -y skills add pbakaus/impeccable --skill animate --agent claude-code

Installs into .claude/skills of the current project.

Files

Takes a static UI and systematically adds purposeful animations across entrance effects, micro-interactions, state transitions, and navigation flows. It identifies missing feedback opportunities, plans animation strategy by impact, then implements everything from button hover states to page load choreography. Includes specific timing guidelines (100-150ms for feedback, 200-300ms for state changes), modern easing curves that actually feel good, and proper accessibility handling for reduced motion preferences. Good for when your interface works but feels lifeless, or when you need to add polish without overdoing it. Focuses on GPU-accelerated properties and 60fps performance rather than flashy effects.

Browse the repository on GitHub

Sponsors

Details

Repository
github.com/pbakaus/impeccable
Categories
Git & Pull Requests, Code Review & Quality, Design & UI/UX

More from pbakaus/impeccable

All 24
1jakubkrehel avatarmake-interfaces-feel-betterjakubkrehel/make-interfaces-feel-betterDesign engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover stat76Kskills.sh installs
2emilkowalski avataranimation-performanceemilkowalski/skillsKeep web animations inside the frame budget — animate composite-only properties, keep motion off the main thread when the page is busy, and find the cause when 72.2Kskills.sh installs
3addyosmani avatardoubt-driven-developmentaddyosmani/agent-skillsSubjects every non-trivial decision to a fresh-context adversarial review before it stands. Use when correctness matters more than speed, when working in unfami65.8Kskills.sh installs
4insforge avatarinsforge-debuginsforge/insforge-skillsUse when diagnosing problems in an InsForge project — reactive failures (SDK error object, HTTP 4xx/5xx, gateway timeout 502/503/504, edge function failure or t61.2Kskills.sh installs
5mvanhorn avatarlast30daysmvanhorn/last30days-skillResearch what people actually say about any topic in the last 30 days. Pulls posts and engagement from Reddit, X, YouTube, TikTok, Hacker News, Polymarket, GitH60.1Kskills.sh installs
6useosint avataris-this-photo-realuseosint/skillsVerify whether an image or video is authentic, original and correctly captioned — provenance checks, error level analysis, noise and JPEG compression analysis, 58.3Kskills.sh installs