design-motion-principles

kylezantos/design-motion-principles

A motion design skill with two modes — build interactive components with purposeful motion, or audit existing animations. Context-aware, per-designer guidance distilled from the published work of Emil Kowalski, Jakub Krehel, and Jhey Tompkins.

649 stars

42 forks

HTML

43 views

View on GitHub Add to Favorites

Installation

Option 1: Use slash command in Claude Code

/install-skill https://github.com/kylezantos/design-motion-principles

Option 2: Clone to skills directory

# Global (all projects)

git clone https://github.com/kylezantos/design-motion-principles ~/.claude/skills/design-motion-principles

# Project-specific

git clone https://github.com/kylezantos/design-motion-principles .claude/skills/design-motion-principles

Add MCP server to .cursor/mcp.json:

{
  "mcpServers": {
    "skillz": {
      "command": "npx",
      "args": ["-y", "skillz-mcp", "https://github.com/kylezantos/design-motion-principles"]
    }
  }
}

Restart Cursor after adding the configuration.

Option 1: Use Gemini CLI command

gemini extensions install https://github.com/kylezantos/design-motion-principles

Option 2: Clone to extensions directory

git clone https://github.com/kylezantos/design-motion-principles ~/.gemini/extensions/design-motion-principles

Topics

Related Skills

html-ppt

HTML PPT Studio — author professional static HTML presentations in many styles, layouts, and animations, all driven by templates. Use when the user asks for a presentation, PPT, slides, keynote, deck, slideshow, "幻灯片", "演讲稿", "做一份 PPT", "做一份 slides", a reveal-style HTML deck, a 小红书图文, or any kind of multi-slide pitch/report/sharing document that should look tasteful and be usable with keyboard navigation. Triggers include keywords like "presentation", "ppt", "slides", "deck", "keynote", "reveal", "slideshow", "幻灯片", "演讲稿", "分享稿", "小红书图文", "talk slides", "pitch deck", "tech sharing", "technical presentation".