Menu

#641 by GitHub stars

kylezantos/design-motion-principles

Motion and interaction design expert based on Emil Kowalski, Jakub Krehel, and Jhey Tompkins' techniques. Two modes — build interactive components with purposeful motion, or audit existing animations to catch AI-slop motion patterns (audit emits a branded HTML report with looping demos). Use when cr

DesignSecurity

History

Review weekly changes to SKILL.md before updating. Dates mark the weeks in which we observed each version; checks apply to the recorded commits.

View weekly changes

skills/design-motion-principles/SKILL.md

Week of Nov 2, 2026 · +0 / −0 lines

Before Network or broad shell → After Network or broad shell

4a9ca879f24a → 4a9ca879f24a

Compare on GitHub

Week of Oct 26, 2026 · Line counts unavailable

Before Not checked yet → After Network or broad shell

First observation → 4a9ca879f24a

No earlier version was observed for comparison.

Compare on GitHub

View on GitHubAdd to my skills

Verified commit 4a9ca879f24a361f4dca4174fe2da0f67b5ddee3

1.5kGitHub stars
48stars in 7 days
1skill in this repository
0commits in 30 days

Heat

6.7
  • Star growth, last 7 daysAhead of 95% of tracked repositories
  • Star growth, last 24 hoursAhead of 96% of tracked repositories
  • Rank movement, last 7 daysAhead of 72% of tracked repositories
  • Commits, last 30 daysAhead of 0% of tracked repositories
  • Accounts asking about it through MCP, last 7 daysNot available
  • Hot votes this weekAhead of 0% of tracked repositories

Heat never changes the order by stars, and sponsorship never touches it. How heat works

Stars over time

Aug 2, 2026Nov 6, 20261,520

Individual skills in this repository

How it works

design-motion-principles

When your agent uses it

Motion and interaction design expert based on Emil Kowalski, Jakub Krehel, and Jhey Tompkins' techniques. Two modes — build interactive components with purposeful motion, or audit existing animations to catch AI-slop motion patterns (audit emits a branded HTML report with looping demos). Use when creating, adding, animating, or reviewing UI motion: transitions, hover states, micro-interactions, enter/exit animations, or any motion design work in React, Framer Motion, CSS, or HTML. Provides per-designer perspectives with context-aware weighting.

What it loads into context

Frontmatter

124 tokens

Always available to the agent

SKILL.md

1,548 tokens

When the skill is activated

Reference documents

21,921 tokens

Loaded on request

Token counts are estimates. Scripts run separately; they are not counted as reference context.

The playbook

  1. STEP 0: Detect Mode (DO THIS FIRST)
  2. The Three Designers
  3. Context-to-Perspective Mapping
  4. Core Principles (Both Modes)
  5. Reference Index
  6. Workflow Index

Files

  • SKILL.mdcore6,838 bytes
  • SKILL.mdcore6,838 bytes
  • references/accessibility.mddoc1,596 bytes
  • references/anti-checklist.mddoc12,417 bytes
  • references/audit-checklist.mddoc5,148 bytes
  • references/creation-gotchas.mddoc2,944 bytes
  • references/demo-shell.htmlasset13,645 bytes
  • references/emil-kowalski.mddoc6,039 bytes
  • references/jakub-krehel.mddoc4,559 bytes
  • references/jhey-tompkins.mddoc5,778 bytes
  • references/motion-cookbook.mddoc16,794 bytes
  • references/output-format.mddoc18,386 bytes
  • references/performance.mddoc2,005 bytes
  • references/report-template.htmlasset63,449 bytes
  • workflows/audit.mddoc12,336 bytes
  • workflows/create.mddoc4,142 bytes
Read SKILL.md

# Design Motion Principles

You are a senior design engineer specializing in motion and interaction design. This skill operates in two modes:

- **Create** — Build interactive components with purposeful motion → `workflows/create.md`
- **Audit** — Review existing motion design and report findings → `workflows/audit.md`

**Scope**: Web and app UI motion — HTML/CSS, React, Framer Motion / Motion, iOS/Android transitions, design system animations. The frequency framework still applies to other motion work (game engines, Lottie, Rive, video), but designer-specific techniques may not translate.

---

## STEP 0: Detect Mode (DO THIS FIRST)

| Signal in the request | Mode |
View the complete source on GitHub

Skills included

  • design-motion-principles

Repository facts

License
MIT
Created
Jan 14, 2026
Last pushed
May 30, 2026
Forks
117
Open issues
0
Project activity
Slowing

Rank over the last 12 weeks

Now #641 · best #571 · down 15 in 30 days

  1. #643 on Nov 1
  2. #646 on Nov 2
  3. #649 on Nov 3
  4. #647 on Nov 4
  5. #644 on Nov 5
  6. #641 since Nov 6
79 earlier periods
  1. #592 on Aug 2
  2. #586 on Aug 7
  3. #581 on Aug 8
  4. #585 on Aug 9
  5. #613 on Aug 10
  6. #618 from Aug 11 to Aug 12
  7. #620 from Aug 13 to Aug 14
  8. #599 on Aug 15
  9. #610 on Aug 16
  10. #619 on Aug 17
  11. #635 on Aug 18
  12. #619 on Aug 19
  13. #616 on Aug 20
  14. #610 on Aug 21
  15. #587 on Aug 22
  16. #611 on Aug 23
  17. #615 on Aug 24
  18. #623 on Aug 25
  19. #608 on Aug 26
  20. #611 on Aug 27
  21. #627 on Aug 28
  22. #587 on Aug 29
  23. #581 on Aug 30
  24. #605 on Aug 31
  25. #616 on Sep 1
  26. #607 on Sep 2
  27. #608 on Sep 3
  28. #588 on Sep 4
  29. #585 on Sep 5
  30. #596 on Sep 6
  31. #603 on Sep 7
  32. #620 on Sep 8
  33. #615 on Sep 10
  34. #601 on Sep 11
  35. #604 on Sep 12
  36. #602 on Sep 13
  37. #623 on Sep 14
  38. #621 on Sep 15
  39. #626 on Sep 16
  40. #621 on Sep 17
  41. #618 on Sep 18
  42. #592 on Sep 19
  43. #600 on Sep 20
  44. #608 on Sep 21
  45. #622 on Sep 22
  46. #617 on Sep 23
  47. #593 on Sep 24
  48. #584 from Sep 25 to Sep 26
  49. #606 on Sep 27
  50. #607 on Sep 28
  51. #628 on Sep 29
  52. #611 on Sep 30
  53. #587 on Oct 1
  54. #593 on Oct 2
  55. #571 on Oct 3
  56. #585 on Oct 4
  57. #591 on Oct 5
  58. #600 from Oct 6 to Oct 7
  59. #626 on Oct 8
  60. #610 on Oct 9
  61. #593 on Oct 10
  62. #592 on Oct 11
  63. #601 on Oct 12
  64. #593 on Oct 13
  65. #602 on Oct 14
  66. #599 on Oct 15
  67. #606 on Oct 16
  68. #593 on Oct 17
  69. #583 on Oct 18
  70. #600 on Oct 19
  71. #607 from Oct 20 to Oct 21
  72. #591 on Oct 22
  73. #582 on Oct 23
  74. #574 on Oct 24
  75. #636 on Oct 25
  76. #636 on Oct 28
  77. #638 on Oct 29
  78. #640 on Oct 30
  79. #641 on Oct 31

Before you install

Network or broad shell

Automated signals, not a guarantee

Checked Nov 3, 2026

Not fully analyzed: some files were too long, unreadable or missing. This never lowers the level.

Show 1 note
  • skills/design-motion-principles/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
Show all 17 signals by file

skills/design-motion-principles/references/demo-shell.html

  • Network accessline 80
    <meta name="viewport" content="width=device-width, initial-scale=1">   <title>Demo Shell — design-motion-principles</title>   <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 81
    <title>Demo Shell — design-motion-principles</title>   <link rel="preconnect" href="https://fonts.googleapis.com">   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 82
    <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 83
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 84
    <link href="https://fonts.googleapis.com/css2?family=Familjen+Grotesk:wght@400;500;600;700&family=Public+Sans:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

skills/design-motion-principles/references/motion-cookbook.md

  • Network accessline 107
    Use Jake Archibald's linear() generator for custom curves: https://linear-easing-generator.netlify.app/

skills/design-motion-principles/references/output-format.md

  • Network accessline 32
    <meta name="viewport" content="width=device-width, initial-scale=1">   <title>{project-name} motion audit — {ISO date}</title>   <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 33
    <title>{project-name} motion audit — {ISO date}</title>   <link rel="preconnect" href="https://fonts.googleapis.com">   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 34
    <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 35
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 36
    <link href="https://fonts.googleapis.com/css2?family=Familjen+Grotesk:wght@400;500;600;700&family=Public+Sans:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

skills/design-motion-principles/references/report-template.html

  • Network accessline 45
    <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 46
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 47
    <link href="https://fonts.googleapis.com/css2?family=Familjen+Grotesk:wght@400;500;600;700&family=Public+Sans:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">
  • Network accessline 547
    </p>     <div class="timing-grid">       <svg class="timing-figure" viewBox="0 0 660 300" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Duration scale from 0 to 600 milliseconds showing where Tally's animations fall across insta
  • Network accessline 548
    <div class="timing-grid">       <svg class="timing-figure" viewBox="0 0 660 300" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Duration scale from 0 to 600 milliseconds showing where Tally's animations fall across instant, respo
  • Network accessline 549
    <svg class="timing-figure" viewBox="0 0 660 300" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Duration scale from 0 to 600 milliseconds showing where Tally's animations fall across instant, responsive, deliberate and sluggish z

How the signals fit together

Facts from a static read of the files at the pinned commit. They describe what the code does, not why.

Some files could not be read; the facts below still hold.

No combined signals at this commit.

Works with

Agent compatibility, from the files in this repository
AgentStatusEvidenceInstall to
Claude CodeCompatibleStandard SKILL.md skills/design-motion-principles/SKILL.md.claude/skills/<skill-name>/
CodexCompatibleStandard SKILL.md skills/design-motion-principles/SKILL.md.agents/skills/<skill-name>/
CursorCompatibleStandard SKILL.md skills/design-motion-principles/SKILL.md.cursor/skills/<skill-name>/
Gemini CLICompatibleStandard SKILL.md skills/design-motion-principles/SKILL.md.gemini/skills/<skill-name>/
GitHub CopilotCompatibleStandard SKILL.md skills/design-motion-principles/SKILL.md.github/skills/<skill-name>/
OpenCodeCompatibleStandard SKILL.md skills/design-motion-principles/SKILL.md.opencode/skills/<skill-name>/
  • Native The repository ships a manifest, folder or frontmatter field for this agent.
  • Compatible A standard SKILL.md that this agent can read.
  • Unknown No evidence either way.

Derived automatically from paths, manifests and frontmatter. Not tested on each agent.

You might also use

nextlevelbuilder/ui-ux-pro-max-skill

An AI skill that provides design intelligence for building professional UI/UX across multiple platforms.

146.2kGitHub stars

Leonxlnx/taste-skill

tasteskill v2, the anti-slop frontend skill. Art direction for websites, distilled from a study of 247 curated gallery sites (One Page Love, Awwwards Sites of the Day). Deals rese…

111.2kGitHub stars

nexu-io/open-design

The 1st Collaborative AI Design Agent Workspace. Local-first and open source. Create motion, prototypes, websites, apps, dashboards, presentations, images, and videos with your te…

106.3kGitHub stars

pbakaus/impeccable

The design vocabulary for your coding agent. Steer with polish and bolder, review with critique and audit, catch AI slop before it ships.

104.8kGitHub stars

asgeirtj/system_prompts_leaks

Documented system prompts from Anthropic - Claude Fable 5.1, Opus 5.5, Claude Design, Claude Code. OpenAI - ChatGPT GPT-6-Astra, Codex. Google - Gemini 3.8 Flash, 3.1 Pro, Antigra…

71kGitHub stars

Nutlope/hallmark

Design skill for websites and new pages that look designed, not generated. Use when the user asks to build or design something new, or names Hallmark. Never use it on an existing …

49.7kGitHub stars

Explore alternatives and comparisons

Add this badge to your README

It updates every night and links to this page.

kylezantos/design-motion-principles: #641 on hotskills, 1.5k stars

[![kylezantos/design-motion-principles on hotskills](https://hotskills.dev/badge/kylezantos-design-motion-principles.svg)](https://hotskills.dev/skill/kylezantos-design-motion-principles/)