design-motion-principles

Files (16)

• LICENSE
• SKILL.md
• accessibility.md · references/
• anti-checklist.md · references/
• audit-checklist.md · references/
• creation-gotchas.md · references/
• demo-shell.html · references/
• emil-kowalski.md · references/
• jakub-krehel.md · references/
• jhey-tompkins.md · references/
• motion-cookbook.md · references/
• output-format.md · references/
• performance.md · references/
• report-template.html · references/
• audit.md · workflows/
• create.md · workflows/

SKILL.md (first lines)

# Design motion principles

Own animation behavior, not overall page styling. Explicit invocation is supported. Match the project's existing motion and libraries before adding a new approach.

For creating or fixing motion, read [create workflow](workflows/create.md). For review-only work, read [audit workflow](workflows/audit.md) and leave the target unchanged. Infer the mode from the request; ask only when the distinction is consequential and unresolved. An authorized implementation needs no extra confirmation of designer weighting.

## Motion judgment

The Emil Kowalski, Jakub Krehel, and Jhey Tompkins lenses interpret their public work; they are not authored or endorsed by the designers. Use restraint and speed for productivity, subtle polish for shipped consumer interfaces, and playful experimentation where the brief benefits. These are conditional perspectives, not a requirement to load all three or produce three verdicts for every change.

Frequent actions usually benefit from instant or brief feedback. Keyboard actions must remain immediate and operable; keyboard input alone is not a prohibition on helpful transitions. Entry/exit, easing, durations, and springs follow the actual interaction and project conventions. Missing animation is not automatically a defect.

Reduced-motion handling must preserve full content and functionality, including focus and keyboard access. Animation must not be the only way to understand a state. Consult [accessibility](references/accessibility.md) for implementation or audit details.

## Conditional references

- [Motion cookbook](references/motion-cookbook.md): the relevant effect or API recipe.
- [Creation gotchas](references/creation-gotchas.md): pitfalls relevant to the component being changed.
- [Audit checklist](references/audit-checklist.md) and [anti-checklist](references/anti-checklist.md): candidates to inspect in a substantive audit, judged against context and evidence.
- [Emil](references/emil-kowalski.md), [Jakub](references/jakub-krehel.md), or [Jhey](references/jhey-tompkins.md): the requested or useful perspective only.
- [Performance](references/performance.md): complex effects, many elements, or observed frame problems.
- [Output format](references/output-format.md): substantive HTML audit reports or explicit inline reporting. Load the linked templates only for that output.

Report actual verification, including any unavailable browser or device checks. Do not infer visual success from source inspection alone.

From AbdelazizMoustafa10m/skills-for-agents, MIT.

More from AbdelazizMoustafa10m/skills-for-agents