Agent Skills
› nexu-io/motion-anything
› toggle-spring
toggle-spring
GitHub提供具有弹簧回弹效果的开关组件，适用于设置或表单中的二元状态切换。强调克制使用，禁止用于加载进度提示，并支持无障碍模式下的线性滑动。
Trigger Scenarios
用户需要实现带有触觉反馈的开关控件
在设置或表单中创建二进制状态切换功能
Install
npx skills add nexu-io/motion-anything --skill toggle-spring -g -y
SKILL.md
Frontmatter
{
"od": {
"mode": "prototype",
"preview": {
"type": "html"
},
"surface": "web",
"category": "animation-motion",
"platform": "desktop",
"upstream": null,
"design_system": {
"requires": false
},
"example_prompt": "Use toggle-spring for the settings switches: the knob springs across on toggle with a gentle\novershoot, aria-pressed reflects state, and a prefers-reduced-motion fallback shortens it."
},
"name": "toggle-spring",
"triggers": [
"toggle switch",
"springy switch",
"satisfying toggle",
"开关动效",
"弹簧切换"
],
"description": "A switch whose knob springs across on toggle — a tactile, satisfying on\/off state change. Use for\nsettings\/form switches. Honors prefers-reduced-motion (quick linear slide). Trigger on user intent\nonly; keep the spring subtle — never to convey loading\/progress.\n"
}
toggle-spring
A switch whose knob springs across on toggle. Part of
motion-anything; obeys MOTION-SPEC.md.
When to use it
- On/off switches in settings and forms; any binary state the user flips themselves.
When NOT to use it (restraint)
- To convey loading/progress (use a spinner/skeleton). Keep the overshoot subtle, not gimmicky.
How to apply
- Copy
toggle-spring.cssandtoggle-spring.jsand link them. - Markup:
<button class="ms-toggle" data-toggle aria-pressed="false"><span class="knob"></span></button>.
Accessibility & performance
prefers-reduced-motion: quick linear slide, no overshoot.aria-pressedreflects state. Transform only.
Version History
- b016900 Current 2026-07-11 17:11
