Design skills
Browse reusable Agent Skills, each with a clear purpose and practical guidance.
toggle-spring
A switch whose knob springs across on toggle — a tactile, satisfying on/off state change. Use for settings/form switches. Honors prefers-reduced-motion (quick linear slide). Trigger on user intent only; keep the spring subtle — never to convey loading/progress.
true-focus
Words sit softly blurred; one snaps into focus at a time — leads the eye across a short phrase. One per view; short phrases. Under prefers-reduced-motion all words stay sharp.
web-to-design-md
Extract a real website's design tokens — colors, typography, spacing, CSS, and motion — into a structured `design.md` an AI can consume. Use to seed motion-anything's design system from an existing site so generated motion stays on-brand ("扒这个网站的配色/字体", "design.md from url").
xyz-fade-big
Fade Big — a composable AnimXYZ entrance via the xyz="fade big-50%" attribute. Declarative: mix fade + move + scale + rotate without writing keyframes. MIT. Honors prefers-reduced-motion.
xyz-fade-left
Fade Left — a composable AnimXYZ entrance via the xyz="fade left-3" attribute. Declarative: mix fade + move + scale + rotate without writing keyframes. MIT. Honors prefers-reduced-motion.
xyz-flip-left
Flip Left — a composable AnimXYZ entrance via the xyz="fade flip-left-90" attribute. Declarative: mix fade + move + scale + rotate without writing keyframes. MIT. Honors prefers-reduced-motion.
xyz-flip-up
Flip Up — a composable AnimXYZ entrance via the xyz="fade flip-up-90" attribute. Declarative: mix fade + move + scale + rotate without writing keyframes. MIT. Honors prefers-reduced-motion.
stroke-order
Create a stroke order animation MulmoScript using KanjiVG SVG data. Use when the user wants to create stroke order learning content for hiragana, katakana, kanji, or Latin alphabet characters.