design-motion-principles
The design-motion-principles skill provides a framework for creating and auditing UI motion in web and mobile applications. It applies design philosophies from Emil Kowalski, Jakub Krehel, and Jhey Tompkins based on project context and frequency of interaction.
Is design-motion-principles safe to install?
Safe to install: our audit of design-motion-principles's source files found 0 shell commands, 0 external URLs, file reads and writes (low risk). Every command and URL listed appears verbatim in the skill's source. The skill reads local reference files and workflow documentation to guide motion design and auditing processes.
How we audit skills: our security review methodology.
Who is this skill for?
Design engineers and developers building or reviewing UI animations in React, Framer Motion, CSS, or HTML.
What can you do with it?
- Building interactive components with purposeful motion
- Auditing existing animations for quality and AI-slop patterns
- Generating branded HTML reports with looping demos for motion audits
- Applying accessibility standards for motion design
- Selecting animation durations based on project type and designer principles
How good is this skill?
Quality score: 5/10. The skill provides a structured, context-aware framework for motion design. It clearly defines its operational modes and references specific design philosophies.
What does the skill file contain?
# 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. --...
Frequently asked questions
How does the skill determine which designer's principles to apply?
The skill maps the project type, such as productivity tools or creative portfolios, to a specific weighting of Emil Kowalski, Jakub Krehel, and Jhey Tompkins.
Does the skill support accessibility?
Yes, the skill mandates handling prefers-reduced-motion in both creation and audit modes.
What output formats are available for audits?
The skill produces an HTML report by default, with a terminal mode available as an alternative.
Related skills
frontend-design
618.4KAI agents tasked with designing and building web interfaces who need to produce unique, high-quality visual identities rather than generic, templated designs
The frontend-design skill provides guidance for creating distinctive, intentional visual designs for web interfaces. It instructs the agent to act as a design lead at a small studio, focusing on avoiding templated defaults by making deliberate choices regarding typography, color palettes, layout, and motion. The skill emphasizes a structured process of brainstorming, planning, and self-critique before writing code.
brainstorming
256.4KDevelopers and project managers who need to define requirements, architecture, and design for software projects before writing code
A structured brainstorming framework that guides users through project exploration, design proposal, and specification before implementation. It enforces a strict design-first workflow, requiring user approval for designs and documentation before transitioning to the writing-plans skill.
simple
221.4KDevelopers and project managers who need a fast, lightweight decision-making process for feature design or component creation
A structured brainstorming framework for architectural and creative tasks that guides users from discovery to decision-making through a defined process flow.
shadcn
217.3KDevelopers building UI components and design systems using shadcn/ui
The shadcn skill manages UI components and design systems for projects using the shadcn/ui framework. It provides tools to search, add, debug, and style components, while enforcing strict composition and styling rules based on project-specific configuration.