Apply a named StyleSeed motion to a component — either one of the 5 personality seeds (Spring/Silk/Snap/Float/Pulse × entrance/exit/hover/press/layout) or a distinctive keyword move from the motion library (toggle-flip, toggle-curtain, reveal-blur, pop-in, shimmer, …).
Installs just this skill. Get the whole plugin for auto-invocation.
⚡ How it fires
How this skill gets triggered: by you, by Claude, or both.
Fires itselfClaude auto-loads it when your prompt matches the work.
You can call itInvoke it directly when you want it.
Slash command/ss-motion
👁️ Context preview
The summary Claude sees to decide when to auto-load this skill.
Apply a named StyleSeed motion to a component — either one of the 5 personality seeds (Spring/Silk/Snap/Float/Pulse × entrance/exit/hover/press/layout) or a distinctive keyword move from the motion library (toggle-flip, toggle-curtain, reveal-blur, pop-in, shimmer, …).
📊 Stats
Stars819
Forks73
LanguageTypeScript
LicenseMIT
📦 Ships with styleseed
</> SKILL.md
ss-motion.SKILL.md
---name: ss-motion
description: Apply a named StyleSeed motion to a component — either one of the 5 personality seeds (Spring/Silk/Snap/Float/Pulse × entrance/exit/hover/press/layout) or a distinctive keyword move from the motion library (toggle-flip, toggle-curtain, reveal-blur, pop-in, shimmer, …). Translates vibe words into framer-motion code from one source of truth.
argument-hint: "[vibe-seed-or-keyword] [context] [file-path]"
allowed-tools: Read, Write, Edit, Grep, Glob, Bash
---# Motion Seed Applier
## When NOT to use
- For general framer-motion docs or learning → use the framer-motion site
- For non-React motion (CSS-only transitions, GSAP) — this skill targets `motion.X` JSX only
- For full scroll-linked timelines or parallax — out of scope for *this* skill (it does per-component
seeds/moves). Note these ARE allowed on a marketing/landing/brand page (DESIGN-LANGUAGE §43
Cinematic tier); just build them with a scroll library, not this skill. On app/data surfaces they
stay banned.
- For tweaking the existing FadeIn/FadeUp/Stagger wrappers — edit `engine/components/ui/motion.tsx` directly
## Vibe → Seed mapping
Translate the user's prompt to one of the five seeds before applying. Use this lookup table from `engine/motion/index.ts`:
| Words the user might say | Seed |
|---|---|
| bouncy, springy, playful, energetic, alive | **Spring** |
If the user says only a *brand* name, use that brand's default seed from `BRAND_DEFAULT_SEED`. If the user is explicit about a seed name (`spring`, `silk`, etc.), respect it verbatim.
## Recommend mode — use-case → motion (when the user describes the *moment*, not the vibe)
If the user describes **what the thing is** ("a like button", "a modal", "the loading
state", "items in a feed") rather than a feeling, recommend from the use-case map
(`MOTION_BY_USECASE` in `engine/motion/library.ts`, exported from `@engine/motion`):
| Use case | Reach for | Why |
|---|---|---|
| Primary button / CTA press | `spring · press` | tactile, confident — the press should "give" |
| Modal / dialog / sheet enter | `silk · entrance` | smooth; never bounce serious/destructive content |
1. **Read the target file** at the path given (or, if no path was given, ask the user which file). Locate the JSX element the user is talking about — usually a `<button>`, `<div>`, `<Card>`, or similar.
2. **Confirm the import paths**. The component file must be able to import:
- `motion` (and `AnimatePresence` for `exit`) from `"framer-motion"`
- the chosen seed from `"@engine/motion"` — in a project that doesn't use the `@engine/*` alias, use a relative path to `engine/motion`
3. **Replace the target tag with a `<motion.X>` and spread the seed's recipe**:
4. **Do NOT inline the params**. The whole point of the seed is that the values come from one source. Never expand `{ type: "spring", stiffness: 300, damping: 18 }` into the JSX — always spread the recipe.
5. **Respect `prefers-reduced-motion`** in long-running surfaces. For one-off interactions (hover/press), framer-motion already throttles. For mount/exit/layout sequences in a long-lived page, import `usePrefersReducedMotion` and `REDUCED_TRANSITION` from `@engine/motion` and override the transition when reduced motion is on.
6. **Validate** by re-reading the file and confirming the JSX still parses (matching brackets, motion tag closed, AnimatePresence in place if `exit` was used).
7. **Tell the user which seed and context you applied**, and offer one related context they might want next ("Want `press` too so it feels clickable?").
## Defaults if the user is vague
- No file given → ask "which file?"
- No vibe word → ask "any vibe word, brand, or seed name?"
- Vibe is "natural" or "feel like a real app" → default to **Silk** (the safest of the five)
- Element is a CTA button → also apply `press`
## Forbidden
- Do not invent new seed names. There are exactly five.
- Do not edit `engine/motion/seeds/*.ts` from this skill — those are calibrated by hand. Add a new seed only via a separate, explicit ask.
- Do not introduce a third-party animation lib (gsap, anime.js). StyleSeed targets framer-motion exclusively.
- Do not add scroll-linked, parallax, or infinite animations *via this skill* — it does
per-component seeds/moves. (Scroll-linked/parallax/3D ARE allowed on a marketing/landing/brand
page per DESIGN-LANGUAGE §43 Cinematic tier — build those directly with a scroll lib; on
