Motion Ui

affaan-m/everything-claude-code

A comprehensive motion system built on Motion/Framer Motion that prioritizes performance and accessibility over decoration. It includes ready-to-use motion tokens (durations, easing curves, distances), device adaptation logic that checks CPU cores and memory, and proper reduced motion support through hooks and CSS. The guidance is opinionated in useful ways: it explicitly warns against mixing motion and framer-motion imports (breaks AnimatePresence), explains when to avoid the layout prop on large containers (causes jank), and mandates specifying AnimatePresence mode instead of relying on the overlap-prone default. Covers the full stack from basic fade-ins to focus traps and scroll locks for modals. Use this when you need production-grade animations without reinventing accessibility and performance patterns.

skills.sh installs

1.7K

GitHub stars

229.1K

last updated

Jul 14, 2026

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Recommended

More Design & UI/UX

1blender-motion-state-inspectionaffaan-m/everything-claude-codeblender motion state inspection1.3Kskills.sh installs

2framer-motionpproenca/dot-skillsFramer Motion performance optimization guidelines. This skill should be used when writing, reviewing, or refactoring React animations with Framer Motion to ensu1.2Kskills.sh installs

3responsive-web-designaj-geddes/useful-ai-promptsCreate responsive layouts using CSS Grid, Flexbox, media queries, and mobile-first design. Use when building adaptive interfaces that work across all devices.1.1Kskills.sh installs

4flows-design-reviewcognitedata/builder-skillsSemi-automated design quality review for Flows apps. Runs concrete repo probes (grep, lint, build) to propose a draft 1–5 score for each of the official 10 qual1.1Kskills.sh installs

5email-designinference-sh/skillsEmail marketing design with layout patterns, subject line formulas, and deliverability rules. Covers welcome sequences, promotional emails, transactional templa1Kskills.sh installs

6visionos-design-guidelinesehmo/platform-design-skillsApple Human Interface Guidelines for Apple Vision Pro. Use when building spatial computing apps, implementing eye/hand input, or designing immersive experiences1Kskills.sh installs