skills.rest
izzoa
izzoaCOMMUNITY
Explore all skills by this author →
GitHub

ss-motion

Apply calibrated framer-motion seeds and named motion patterns to React components.

22|1|Updated Jul 17, 2026
Search Tags:#react#animation#interaction design#motion design#framer-motion#component styling#ui motion
One-click install
npx skills add https://github.com/izzoa/polyrouter --skill ss-motion
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ss-motion
Source: https://github.com/izzoa/polyrouter/tree/main/.agents/skills/ss-motion
Command: npx skills add https://github.com/izzoa/polyrouter --skill ss-motion

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you apply the right motion treatment to a UI component without hand-tuning animation parameters or guessing which style fits the moment. It translates a vibe, brand cue, or interaction intent into a consistent framer-motion implementation.

Core Features & Use Cases

  • Seed-based motion styling: Map vague requests like playful, smooth, snappy, or floaty to one of five calibrated motion personalities.
  • Use-case motion selection: Pick the right interaction pattern for buttons, dialogs, menus, lists, loading states, toggles, and page transitions.
  • Named motion keywords: Apply distinctive effects such as toggle-flip, reveal-blur, shimmer, or pop-in when a specific move is needed.
  • Consistent implementation: Reuse the same source-of-truth motion recipes across components to keep a product visually coherent.

Quick Start

Apply the best motion seed and context to the target component in the specified file, then update the JSX to use the matching framer-motion recipe.

Frequently Asked Questions about ss-motion

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I apply consistent framer-motion animations to React components without hand-tuning parameters?▼

Framer-motion animation styling works by applying calibrated motion seeds and named recipes to UI components, targeting interaction moments like hover, press, and entrance while preserving a single source of truth.

What is the best way to map a playful or snappy brand vibe to React UI motion design?▼

Brand vibe mapping translates vague requests like playful or snappy into one of five calibrated motion personalities, applying a consistent framer-motion implementation across your React components.

How do I select the right motion pattern for React component interactions like toggles and route transitions?▼

Motion pattern selection for toggles and route transitions uses named recipes like toggle-flip, reveal-blur, or pop-in, matching specific UI interaction moments to maintain visual coherence across the product.

Can I use this motion design approach to handle layout changes and loading states in React?▼

Yes, this motion design approach handles layout changes and loading states by targeting these specific UI interaction moments with calibrated framer-motion seeds, ensuring consistent animation behavior across your application.

Why should I avoid inlining animation parameters when styling React components with framer-motion?▼

Avoid inlining animation parameters to preserve visual coherence; reusing the same source-of-truth motion recipes across components keeps your product visually consistent and reduces hand-tuning effort.

Related Skills

Explore More Design & Creative Skills→
47thtechcorner47thtechcorner
21

framer-motion

Implement Disney's 12 animation principles with Framer Motion in React.

Community
Intermediate
deomiarndeomiarn

animation-library

Implement UI animations with Framer Motion, CSS, and scroll-triggered effects.

Community
Intermediate
dylantarredylantarre
38

animation-principles

Map Disney's 12 animation principles to UI motion guidelines.

Community
Basic
DanielV-94DanielV-94

animation-designer

Create web UI animations with Framer Motion, CSS keyframes, and GSAP.

Community
Intermediate