Agent Skills
› nexu-io/motion-anything
› loading-shimmer
loading-shimmer
GitHub用于加载中的骨架屏占位符，通过柔和的光泽扫过效果提升感知性能。适用于卡片、列表等未加载内容，支持减少动态偏好设置，仅在真实内容加载时显示。
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
