Agent Skills
› NeverSight/learn-skills.dev
› performance-and-motion
performance-and-motion
GitHub用于优化Astro站点的前端性能与动效。指导动画、滚动、懒加载及交互实现，确保LCP、响应速度及无障碍体验，遵循减少重绘、按需水合等原则。
Trigger Scenarios
添加或修改动画效果
调整平滑滚动行为
配置轮播组件（如Embla）
实施懒加载策略
优化首屏渲染性能
Install
npx skills add NeverSight/learn-skills.dev --skill performance-and-motion -g -y
SKILL.md
Frontmatter
{
"name": "performance-and-motion",
"description": "Use when adding or changing animations, smooth scrolling, carousel behavior, lazy loading, service worker behavior, hydration strategy, or other performance-sensitive front-end behavior in this Astro site. Trigger for Lenis, Embla, reveal effects, runtime media loading, and interaction code that can affect responsiveness."
}
Performance and Motion
Fast first. Fancy second.
Priorities
- Preserve static delivery whenever possible.
- Keep hydration narrow and intentional.
- Protect LCP, input responsiveness, and scroll smoothness.
- Respect reduced motion before styling the effect.
Rules
- Animate emphasis, transitions, or orientation. Not everything.
- Use transform and opacity for movement when possible.
- Avoid stacked scroll listeners when CSS or existing observers can do the job.
- Re-test page transitions and re-initialization after motion changes.
- Do not fight existing transforms with extra animation layers.
- Protect nested scroll regions with the appropriate Lenis escape hatch.
- Keep carousel content light and avoid heavy first-frame assets.
- Use Embla where horizontal comparison helps. Do not turn essential navigation or core reading flows into swipe traps.
- Prefer mobile-only carousel activation for dense card collections when desktop already has enough width.
- Dropdowns, drawers, and modal menus need deliberate overflow behavior. If the viewport is shorter than the design, the component still has to work.
- Treat hero media as LCP-critical and everything else as suspect.
- Lazy-load what is not needed immediately.
- Keep fonts and third-party scripts from blocking the page.
Verification
- Check reduced-motion behavior after adding or changing animations.
- Check keyboard and touch interaction for carousels, accordions, and menus.
- Check that runtime initialization survives Astro page transitions and repeated menu opens.
Version History
- e0220ca Current 2026-07-05 23:25
