Design Motion Principles

kylezantos/design-motion-principles

Build or audit interface motion using context-sensitive design guidance and an HTML or terminal report.

Latest update at:

View on GitHub
npx skills add kylezantos/design-motion-principles
1,477Stars115ForksRepository last pushed

Install and use Design Motion Principles

  1. Install the Skill

    Run the upstream command in your project, then follow the author’s setup guide and any requirements below.

    npx skills add kylezantos/design-motion-principles
  2. Give your agent a task

    Provide the relevant files, context and constraints. For example:

    Audit this interface animation for purpose, timing, accessibility and context; report concrete changes.

About this Skill

Build or audit interface motion using context-sensitive design guidance and an HTML or terminal report.

Why we picked it

Improve transitions or review existing UI motion for accessibility and performance.

What it helps with

  • Improve transitions or review existing UI motion for accessibility and performance.

Usage and limitations

The skill interprets publicly available work by three designers; it is not authored or endorsed by them.

Before you use it

  • Use a coding agent with project access; create mode may require the project’s UI stack.

Sources & references

Original sources are linked below. Practical starting points are editorial suggestions from SkillHey.