flow

仓库创建 2026年1月7日最近提交 2 天前SkillHot 收录 21 天前

▸ 精选理由

把动效规范化并产出可直接落地的实现模式，适合前端工程

这个 Skill 做什么

实现网页交互动效与过渡，提供性能与设计规范建议

帮你实现网页上的交互动效：悬停、按压、加载态、模态/面板过渡和手势动画，同时给出性能与设计规范建议。适合在需要增强交互反馈、优化动画性能或建立 motion 系统时使用。优势是兼顾体验和性能，支持现代 API（例如 View Transitions API）并提供可复用的 motion 设计方案。

▸ 展开 SKILL.md 英文原文

Implementing CSS/JS animations for hover effects, loading states, modal transitions, and gesture interactions. Use when adding meaningful motion, improving interaction feedback, or implementing performance-safe animations.

开发编程交互动效CSS 动画性能友好通用

Stars

Forks

仓库内 Skill

7 日增星

安装 / 使用

给你的 Agent 一句话（通用）

帮我安装这个 skill：https://raw.githubusercontent.com/simota/agent-skills/main/flow/SKILL.md

或 curl 直取 SKILL.md

curl -fsSL "https://raw.githubusercontent.com/simota/agent-skills/main/flow/SKILL.md"

SKILL.MD 节选查看完整文件 ↗

<!--
CAPABILITIES_SUMMARY:
- micro_animation: Hover, press, toggle, validation, toast, feedback animations
- page_transition: Route changes, modal/panel transitions, staged content entry
- gesture_animation: Drag, swipe, snap, long press, touch feedback
- motion_system_design: Motion tokens, scale design, cataloging, audits
- modern_css_animation: View Transitions API (same-doc Baseline Oct 2025 — Chrome 111+/Edge 111+/Safari 18+/Firefox 144+, cross-doc Chrome 126+/Edge 126+/Safari 18.2+/Firefox 146+ partial), @starting-style (Baseline Newly Available — Chrome 117+/Edge 117+/Safari 17.5+/Firefox 129+), scroll-driven animations (animation-timeline scroll()/view()), @property, interpolate-size

via SKILL·HOT · 数据来自 GitHub 公开信息 · 原文版权归作者所有