Agent Skills
› nexu-io/motion-anything
› loading-shimmer
loading-shimmer
GitHub提供加载骨架屏的CSS组件，通过柔和的光扫动画提升感知性能。支持prefers-reduced-motion无障碍特性，仅用于真实内容加载期间，严禁作为装饰或用于极快加载场景。
Trigger Scenarios
需要为正在加载的内容（如卡片、列表）添加占位符以提升用户体验
实现符合无障碍标准的骨架屏动画
Install
npx skills add nexu-io/motion-anything --skill loading-shimmer -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 loading-shimmer for the card while it loads: an avatar circle, two text lines and a media\nblock as skeletons with a soft sweep, plus a prefers-reduced-motion fallback (static skeleton)."
},
"name": "loading-shimmer",
"triggers": [
"loading skeleton",
"shimmer placeholder",
"content loading state",
"骨架屏",
"加载占位"
],
"description": "Skeleton placeholders with a soft sweeping shimmer while content loads. Use to fill space for\ncards\/lists\/profiles that are still loading and make the wait feel shorter. Honors\nprefers-reduced-motion (static skeleton). Only show while real content is loading — never as decoration.\n"
}
loading-shimmer
Skeleton placeholders with a soft sweeping highlight. Part of
motion-anything; obeys MOTION-SPEC.md.
When to use it
- Placeholders for content still loading (cards, lists, profiles, media). Improves perceived performance.
When NOT to use it (restraint)
- Loads under ~300ms (a skeleton flash is worse than nothing). Never as pure decoration.
How to apply
- Copy
loading-shimmer.cssand link it. - Add
data-skeletonto placeholder blocks (give each a width/height). - Remove the placeholders (or the attribute) the moment real content arrives.
Accessibility & performance
prefers-reduced-motion: static skeleton, no sweep. The sweep usestransformonly (GPU-safe).
Version History
- b016900 Current 2026-07-11 17:09
