motion
Skill9 starsChanged 2 months agoMITView on GitHub
Purposeful UI motion by family/pattern — shell defaults (fade, drawer, press) plus marketing vocabulary (reveal, scroll, text, carousel, hero, …). Hand-roll CSS/Motion/GSAP from named patterns. Use for animation requests, landings, marquees, parallax, text reveal, and light defaults on /ui shells — not token-only tweaks.
38 other projects use a version of this.
Adopted by
Most recently taken up by
- sanmidable/skillstheir own version, first seen Nov 8, 2026
- podo/design-agent-skillstheir own version, first seen Nov 8, 2026
- RuneStone-Tech/optimize-anythingtheir own version, first seen Nov 8, 2026
- lalulali/vespyrtheir own version, first seen Nov 6, 2026
- theexperiencecompany/gaiatheir own version, first seen Nov 3, 2026
- seanx10m/skillstheir own version, first seen Nov 1, 2026
Used with
Projects with it also use defaults, viewports and 9 more.
Other files people use alongside this one.
Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
sanmidableSkilldefaults
Also in 3 projects that use this
- sanmidableSkill
viewports
Also in 3 projects that use this
miovragSkillkeyboard
Load this skill for every project containing interactive UI elements — buttons, links, modals, dropdowns, sliders, tabs, carousels, or any custom widget. Under no circumstances create an interactive component that cannot be fully operated by keyboard alone. Absolutely always ensure visible focus indicators, logical tab order, and no keyboard traps. Apply these rules to every interactive element without exception.
Also in 3 projects that use this
soilmassSkillcolor
Color animations including hue shifts, saturation changes, brightness transitions, and contrast adjustments. Use when implementing color morphing, theme transitions, mood effects, or attention-grabbing color pulses. Provides tokens for all color property animations.
Also in 4 projects that use this
owshq-mecSkilllayout
Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition.
Also in 3 projects that use this
GoogleSkillcritique
Expertise in auditing and fixing repository scripts and GitHub Actions workflows to ensure technical robustness and security.
Also in 4 projects that use this
Other versions38 projects use a version of this.
Word for word · 0
None found.
Edited · 0
None found.
Wrote their own version · 38
- theexperiencecompany/gaia★ 325same name
- Mindrally/skills★ 275same name
- raphaelsalaja/skills★ 62same name
- podo/design-agent-skills★ 32same name
- muzimu217/ui-design-agent-kit★ 23same name
- imMamdouhaboammar/linkedin-animated-infographics★ 14same name
- icons8/agent-skills★ 12same name
- lalulali/vespyr★ 11same name
- app-builders-club/design-builder★ 4same name
- Felipeex/motion-skill★ 3same name
28 more not listed
How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.
In this repository36 other files it gives its agents.
- AGENTS.mdAGENTS.md
- CLAUDE.mdCLAUDE.md
- .cursor/rules/design-system-enforcer.mdcCursor rule
- frontend-expertSkill
- accessibilitySkill
- anti-slop-codeSkill
- anti-slop-designSkill
- app-shellSkill
- architectureSkill
- componentsSkill
- content-designSkill
- data-fetchingSkill
- design-colorSkill
- design-directionSkill
- design-foundationsSkill
- design-surfacesSkill
- design-typographySkill
- design-vocabularySkill
- devtoolsSkill
- engineering-vocabularySkill
- fidelitySkill
- formsSkill
- frontend-expertSkill
- marketingSkill
- monitoringSkill
- motion-inspectionSkill
- performanceSkill
- polishSkill
- prototypeSkill
- quality-loopSkill
- responsiveSkill
- seoSkill
- skill-authoringSkill
- testingSkill
- tokensSkill
- webglSkill
The file
We split this skill into the rules it gives an agent
1 rule. 0 are common, 1 is distinctive, and 0 are very specific to this project.
0
Common
Most of the 32 edited versions we read keep these.
1
Distinctive
This author's own choices. Worth a look.
0
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Distinctive: line 79
Do not stack Hero + 3D + Text + Spotlight + Carousel in one viewport
“Common” is measured: kept by at least 6 in 10 of the 32 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.
Files
Motion
Overview
Motion clarifies hierarchy and feedback — it does not decorate. Pick families/patterns by name, then hand-roll (CSS / Motion / GSAP). Do not default to third-party registry installs.
Full catalog: references/motion-families.md (12 families · 144 patterns).
When to Use
- Micro-interactions (hover, focus, press)
- Enter/exit or layout transitions (section swaps, drawers, modals)
- Scroll-linked, text, carousel, hero, or other named patterns
- Default (light): app shell / dashboard / multi-section
/ui— section fade + drawer slide + smooth scroll (unless user forbids)
When to skip
- Static token/color-only tweaks
- User asked for zero animation / “tanpa animasi”
- Inspecting / explaining existing motion →
motion-inspection
Reduced-motion users still need state changes and usable instant/opacity fallbacks; skip spatial/decorative effects, not the interaction contract.
Lanes
| Lane | Peruntukan | Defaults |
| Product / shell | App chrome, settings, dashboards | fade-up / page-crossfade, drawer-slide, press-scale, lift-hover |
| Marketing / expressive | Landing, campaigns | Choose 1–2 families + 1–2 patterns from catalog — budget 2–3 motions / viewport |
Family peruntukan (quick)
| Family | Untuk | Bukan untuk |
| Micro Interaction | Toggle, toast, like, progress | Hero / scroll story |
| Hover & Interaction | Lift, press, magnetic, tilt | Page enter |
| Scroll-based | Sticky, horizontal, scroll-zoom | Button-only micro |
| Reveal & Wipe | Enter fades, split, mask, drawer | Endless loops as only motion |
| Text Motion | Word reveal, typewriter, marquee type | Forms / dense settings |
| Carousel & Continuous Flow | Marquee, filmstrip, snap | Single CTA focus pages |
| Grid Motion | Bento, flip grid, reflow | One-button chrome |
| Spotlight & Focus | Center stage, dim siblings | Whole-page noise |
| Stack & Scatter | Deck, fan, swipe deck | Admin tables |
| Hero Section Motion | Parallax / float device / aurora | App shell (max 1 signature) |
| Morph & Transform | Shared element, FAB morph | Every navigation |
| 3D & Perspective | Orbit, coverflow | Default product UI |
Workflow
- Lane — product shell vs marketing
- Family — match peruntukan (max 2 families)
- Patterns — name 1–2 from
motion-families.md; read definisi + hand-roll hint - Contract + implement — record trigger/state identity, properties, interruption, input alternatives and reduced-motion endpoint (
motion.md). Prefertransform/opacity; use bounded measured size/layout when disclosure or morph requires it. - Budget — ≤2–3 intentional motions per viewport
- A11y —
prefers-reduced-motion: reduce(opacity/instant fallbacks); never meaning-by-motion-alone - Report — Conventions:
Motion: light shell | families: Hover+Reveal | patterns: lift-hover, fade-up; distinguish source/state checks from actual target playback and performance measurements.
Shell defaults (product)
- Section enter:
fade-up~250–300ms - Mobile drawer:
drawer-slide+ backdrop fade - Controls:
press-scale(0.96) scroll-behavior: smooth(disabled under reduced-motion)
Smooth scroll is not permission to auto-scroll incoming data. Product-state recipes in references/motion.md govern chart updates, disclosure and stream-follow; a reader who scrolls upward keeps control.
Hard rules
- Hand-roll from pattern names — registry install is not the pack default
- Do not stack Hero + 3D + Text + Spotlight + Carousel in one viewport
- Marketing: max one Hero signature pattern
Checklist
- Lane chosen (product vs marketing)
- Family peruntukan matches the ask (≤2 families)
- Named patterns listed (≤2–3 motions in viewport)
- Hand-rolled from definisi (not registry-as-answer)
prefers-reduced-motionhandled- Rapid reversal, nested motion, focus/keyboard and gesture cancellation checked where relevant; final data/state stays truthful
- No layout-thrashing / decorative spam
- Conventions Motion line filled
Depth
- Vocabulary:
references/motion-families.md - Recipes:
references/motion.md - Micro craft overlap:
polish - Demo shell: local
test/sandbox (optional; not shipped)
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.