Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →sickn33/ui-motion
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...
Passed 14 of 17 test cases with the skill, and 7 of 17 without it.
and 9 more in the full report
9 fixed9 passed either way4 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 8 test cases the skill fixed. Same model, same prompt, with and without the skill.
In `src/components/AccountSummary.tsx`, we want to add an entrance scale and slide animation to the main account balance total number so it flies in dynamically when rendered.
| Checked | Without skill | With skill |
|---|---|---|
| Refrains from adding entrance animation to the balance payload reading value. | Passed | Passed |
| States that payload values must display instantly without delay. | Missed | Passed |
The instructions your model reads when the skill loads.
Use this skill when you need 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...
motion.X JSX onlyengine/components/ui/motion.tsx directlyTranslate 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 |
| smooth, silky, fluid, elegant, composed, continuous | Silk |
| snappy, quick, instant, decisive, sharp, precise | Snap |
| floaty, gentle, weightless, dreamy, ambient, drifting | Float |
| rhythmic, punchy, pulsing, heartbeat, beat | Pulse |
| "Toss style", "Arc style" | Spring (per brand default) |
| "Stripe style", "Notion style" | Silk |
| "Linear style", "Raycast style", "Vercel style" | Snap |
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.
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 |
test cases passed, vs 7 / 17 without
Published skills whose descriptions closely match this one, with their headline benchmark lift.
More skills from the same source and nearby in the registry, with their headline benchmark lift.