design-motion

Name: design-motion
Author: fusengine

21stars3forks

How to install design-motion?

fusengine/agents/design-motion

$npx -y skills add fusengine/agents --skill design-motion

Installs into the current project.

Summary

Motion pass on a settled layout — the animation-decision gate, transform/opacity-first materials, the 100/300/500 duration scale, exponential/emphasized easing (no bounce), mandatory reduced-motion, and the AI-motion-signature ban.

Files · 1

View on GitHub

SKILL.md

1	## Design Motion — Timing, Easing, Materials, Restraint
2
3	### When
4	After the static body/component exists. Motion is applied on top of a settled layout —
5	never used to compensate for or distract from an unfinished one. Hands off to
6	`design-review` next (Part 1 checks the reduced-motion fallback + transform/opacity
7	discipline; Part 2's `motion-verdict.md` issues the Block/Approve).
8
9	### Input
10	- `design-system.md` motion personality / `MOTION_INTENSITY` dial (1-10).
11	- The static markup/components to animate.
12
13	### The animation gate — before writing any motion code
14	Run every candidate through `references/animation-decision-framework.md`'s 4 questions,
15	in order: (1) should this animate at all — frequency decides, never animate
16	keyboard-initiated or 100+/day actions; (2) what's the one-sentence purpose (spatial
17	consistency / state indication / explanation / feedback / preventing jarring change); (3)
18	what easing; (4) what duration. Most "let's animate this" ideas should die at question 1
19	— that is the point, not a formality to skip.
20
21	### Materials — transform/opacity first, other properties gated
22	Default to `transform` and `opacity` — they skip layout and paint and run on the GPU.
23	Animating `width`/`height`/`top`/`left`/`margin`/`padding` triggers layout+paint+composite
24	and drops frames; see `references/motion-performance.md` for the Framer Motion shorthand
25	caveat (`x`/`y`/`scale` shorthands are NOT hardware-accelerated, use the full `transform`
26	string), the CSS-var recalc trap (never drive child transforms via a custom property on
27	the parent), CSS transitions vs. keyframes for interruptible UI, and velocity-based drag
28	dismissal (~0.11 threshold, not distance alone). Other atmospheric materials — blur,
29	backdrop-filter, clip-path, shadow bloom, masks — are allowed when they demonstrably read
30	as premium and stay smooth on the target viewports, verified in-browser, never a default
31	reach; keep expensive effects bounded to small/isolated areas. `references/motion-physics.md`
32	covers physical-correctness rules for whichever material is used: never `scale(0)`,
33	origin-aware popovers, asymmetric enter/exit timing (exit ~75% of enter duration),
34	staggered lists (cap total stagger time), blur masking, `@starting-style`.
35
36	### Durations — the 100/300/500 rule
37
38	\| Tier \| Duration \| Use \|
39	\|---\|---\|---\|
40	\| Micro \| 100-150ms \| button press, toggle, instant feedback \|
41	\| State \| 200-300ms \| menu open, tooltip, hover states \|
42	\| Layout \| 300-500ms \| accordion, modal, drawer \|
43	\| Entrance \| 500-800ms \| page load, hero reveal \|
44
45	Exit animations run at ~75% of the matching enter duration. Hard rule for anything that
46	isn't a marketing/explanatory sequence: UI feedback stays under 300ms — a 180ms
47	dropdown reads as more responsive than a 400ms one
48	(`references/animation-decision-framework.md` §4).
49
50	### Easing — exponential/emphasized, no bounce
51	Entering/exiting → `ease-out`. Moving/morphing on-screen (A→B) or state toggles →
52	`ease-in-out`. Hover/color change → `ease`. Constant motion (marquee, progress) →
53	`linear`. Never `ease-in` on UI — it delays the exact moment the user is watching
54	most closely. Use the strong custom curves in `references/motion-tokens.md`
55	(`--ease-out: cubic-bezier(0.23, 1, 0.32, 1)`, `--ease-in-out`, `--ease-drawer`) or the
56	exponential/quint-out family (`cubic-bezier(0.16, 1, 0.3, 1)` and similar) — never the
57	weak built-in CSS easings. Bounce and elastic curves are banned outright — they read
58	as a toy interaction, not a premium one. Hard mechanical gate, zero tolerance: any
59	`cubic-bezier` with a y-control-point > 1, or the literal `elastic`/`bounce` keywords,
60	fails `design-review/references/pre-flight-checklist.md` check 9. Springs (when used —
61	gesture-driven/interruptible motion only) keep `bounce` in 0.1-0.3, biased toward 0.1
62	for dashboards/product register and up to 0.3 for playful/brand register.
63
64	### Reduced motion — mandatory, not optional
65	Every animated deliverable ships a `prefers-reduced-motion: reduce` fallback in the same
66	commit — never a follow-up pass. Full patterns: `references/reduced-motion.md` (global
67	override, Framer Motion's `useReducedMotion()`/`MotionConfig`, per-animation-type
68	disable-vs-simplify table, WCAG 2.2 SC 2.3.3/2.3.1/2.2.2). Disable spatial movement
69	entirely (parallax, auto-playing carousels, zoom/scale transitions — vestibular risk);
70	simplify functional fe

People who liked this also viewed

6 picks

Type

design-motion

21stars3forks

View on GitHub

How to install design-motion?

fusengine/agents/design-motion

$npx -y skills add fusengine/agents --skill design-motion

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	## Design Motion — Timing, Easing, Materials, Restraint
2
3	### When
4	After the static body/component exists. Motion is applied on top of a settled layout —
5	never used to compensate for or distract from an unfinished one. Hands off to
6	`design-review` next (Part 1 checks the reduced-motion fallback + transform/opacity
7	discipline; Part 2's `motion-verdict.md` issues the Block/Approve).
8
9	### Input
10	- `design-system.md` motion personality / `MOTION_INTENSITY` dial (1-10).
11	- The static markup/components to animate.
12
13	### The animation gate — before writing any motion code
14	Run every candidate through `references/animation-decision-framework.md`'s 4 questions,
15	in order: (1) should this animate at all — frequency decides, never animate
16	keyboard-initiated or 100+/day actions; (2) what's the one-sentence purpose (spatial
17	consistency / state indication / explanation / feedback / preventing jarring change); (3)
18	what easing; (4) what duration. Most "let's animate this" ideas should die at question 1
19	— that is the point, not a formality to skip.
20
21	### Materials — transform/opacity first, other properties gated
22	Default to `transform` and `opacity` — they skip layout and paint and run on the GPU.
23	Animating `width`/`height`/`top`/`left`/`margin`/`padding` triggers layout+paint+composite
24	and drops frames; see `references/motion-performance.md` for the Framer Motion shorthand
25	caveat (`x`/`y`/`scale` shorthands are NOT hardware-accelerated, use the full `transform`
26	string), the CSS-var recalc trap (never drive child transforms via a custom property on
27	the parent), CSS transitions vs. keyframes for interruptible UI, and velocity-based drag
28	dismissal (~0.11 threshold, not distance alone). Other atmospheric materials — blur,
29	backdrop-filter, clip-path, shadow bloom, masks — are allowed when they demonstrably read
30	as premium and stay smooth on the target viewports, verified in-browser, never a default
31	reach; keep expensive effects bounded to small/isolated areas. `references/motion-physics.md`
32	covers physical-correctness rules for whichever material is used: never `scale(0)`,
33	origin-aware popovers, asymmetric enter/exit timing (exit ~75% of enter duration),
34	staggered lists (cap total stagger time), blur masking, `@starting-style`.
35
36	### Durations — the 100/300/500 rule
37
38	\| Tier \| Duration \| Use \|
39	\|---\|---\|---\|
40	\| Micro \| 100-150ms \| button press, toggle, instant feedback \|
41	\| State \| 200-300ms \| menu open, tooltip, hover states \|
42	\| Layout \| 300-500ms \| accordion, modal, drawer \|
43	\| Entrance \| 500-800ms \| page load, hero reveal \|
44
45	Exit animations run at ~75% of the matching enter duration. Hard rule for anything that
46	isn't a marketing/explanatory sequence: UI feedback stays under 300ms — a 180ms
47	dropdown reads as more responsive than a 400ms one
48	(`references/animation-decision-framework.md` §4).
49
50	### Easing — exponential/emphasized, no bounce
51	Entering/exiting → `ease-out`. Moving/morphing on-screen (A→B) or state toggles →
52	`ease-in-out`. Hover/color change → `ease`. Constant motion (marquee, progress) →
53	`linear`. Never `ease-in` on UI — it delays the exact moment the user is watching
54	most closely. Use the strong custom curves in `references/motion-tokens.md`
55	(`--ease-out: cubic-bezier(0.23, 1, 0.32, 1)`, `--ease-in-out`, `--ease-drawer`) or the
56	exponential/quint-out family (`cubic-bezier(0.16, 1, 0.3, 1)` and similar) — never the
57	weak built-in CSS easings. Bounce and elastic curves are banned outright — they read
58	as a toy interaction, not a premium one. Hard mechanical gate, zero tolerance: any
59	`cubic-bezier` with a y-control-point > 1, or the literal `elastic`/`bounce` keywords,
60	fails `design-review/references/pre-flight-checklist.md` check 9. Springs (when used —
61	gesture-driven/interruptible motion only) keep `bounce` in 0.1-0.3, biased toward 0.1
62	for dashboards/product register and up to 0.3 for playful/brand register.
63
64	### Reduced motion — mandatory, not optional
65	Every animated deliverable ships a `prefers-reduced-motion: reduce` fallback in the same
66	commit — never a follow-up pass. Full patterns: `references/reduced-motion.md` (global
67	override, Framer Motion's `useReducedMotion()`/`MotionConfig`, per-animation-type
68	disable-vs-simplify table, WCAG 2.2 SC 2.3.3/2.3.1/2.2.2). Disable spatial movement
69	entirely (parallax, auto-playing carousels, zoom/scale transitions — vestibular risk);
70	simplify functional fe

People who liked this also viewed

6 picks

Type