Design Motion Principles Skill - Setup Guide¶

Source: kylezantos/design-motion-principles GitHub: kylezantos/design-motion-principles (908 stars) Skills: 1 skill (design-motion-principles) · 7.8K installs Category: Motion & Interaction Design First Seen: Jan 19, 2026 (catalogued August 15, 2026 midday sweep) Quality Tier: 🟢 Production (all three security audits pass - Gen Agent Trust Hub, Socket, Snyk)

This skill makes the agent a senior design engineer for motion and interaction design, with two modes: Create (build interactive components with purposeful motion via workflows/create.md) and Audit (review existing motion and report findings via workflows/audit.md). It covers HTML/CSS, React, Framer Motion / Motion, iOS/Android transitions, and design-system animations.

Installation¶

npx skills add kylezantos/design-motion-principles --skill design-motion-principles

Prerequisites¶

Requirement	Details
Node.js + npx	For the skill installer
Frontend project	For Create mode; any UI with motion for Audit mode

What It Provides¶

Capability	Notes
Create mode	Build interactive components with purposeful motion
Audit mode	Review existing motion design and report findings
Frequency framework	Applies beyond the web (game engines, Lottie, Rive, video)
Mode detection	Explicit routing table for create/audit/ambiguous requests

Quick Start¶

Install: npx skills add kylezantos/design-motion-principles --skill design-motion-principles
Ask: "audit the motion in this UI and report what is purposeless" or "animate this modal with purposeful motion"

CorpusIQ Use Cases¶

Use Case	How
UI polish	Purposeful-motion doctrine for product and client interfaces
Motion audits	Pre-ship audit pass for animation quality
HyperFrames complement	The frequency framework informs our video motion work
Design-system animation	Guidance for animation tokens in design systems

Integration with CorpusIQ¶

CorpusIQ is the connector layer that lets AI assistants read the systems a business already runs on - accounting, payments, CRM, email, files and analytics - and answer with the source named. It is read-only by design: it retrieves data and never writes to, or acts in, a connected system, which is what makes it safe to point at live accounts.

This page is part of the CorpusIQ directory, the reference we maintain for the MCP server and agent-skill ecosystem. Run alongside CorpusIQ, a third-party server like this one can be combined with a company's own business data in a single answer.

See what CorpusIQ connects

Limitations / Verification¶

Designer-specific techniques may not translate to game engines, Lottie, Rive, or video - only the frequency framework does
Single-skill cluster; all three audits pass (verified on skill page)

npx skills add kylezantos/design-motion-principles   # verify install works

Powered by CorpusIQ