Design & Motion · iart-ai/web-animation-skills
micro-interaction
This skill should be used when the user asks to "add a hover/press effect", "animate a toggle or switch", "build an animated like button", "make a toast/snackbar slide in", "animate a drawer or modal", "animate list reordering or add/remove", "do a shared-element layout transition", or "polish UI feedback". Covers UI motion with Framer Motion (motion/react) and modern CSS.
L3 Networked · Declare domain & key scopeV1 Commit-PinnedNetwork AccessWrite FileDual-pass Audit
Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.
1How It Works & Mechanism
Establish strict time windows and compositor constraints for micro-interactions (100–250ms, animate only transform/opacity, instantaneous 0.96 scale on press, asymmetric enter/exit), translating tactile feel into verifiable parameters.
skills/micro-interaction/SKILL.md
Duration: UI micro-interactions live in **100–250ms**. Anything over ~400ms feels laggy for a click response.
Provides three default easings (ease-out entry, overshoot, standard move) within the same paragraph, following the principle of entering slower and exiting faster.
Anchor the Framer Motion side on the core triad of gestures, springs, and AnimatePresence, tuning springs via two intuitive parameters: stiffness and damping.
skills/micro-interaction/SKILL.md
whileTap={{ scale: 0.96 }}
Supplies ready-to-use UI defaults like stiffness: 400, damping: 30, explaining how damping governs the rebound intensity.
Leverage layout animation as Framer Motion's killer feature: layout automatically converts position and size changes into transforms, while layoutId orchestrates shared-element (magic move) transitions between components.
skills/micro-interaction/SKILL.md
{!open && <motion.div layoutId="card" onClick={() => setOpen(true)} />}
Warns of side effects: layout distorts border-radius and text, requiring child inverse scaling or switching to layout="position".
Implement enter and exit animations (including display toggling) using pure CSS: @starting-style supplies initial values for first render, and transition-behavior: allow-discrete enables transitions on discrete properties.
skills/micro-interaction/SKILL.md
transition-behavior: allow-discrete;
Enables toast and dialog transitions without JS libraries; references provide similar handling for overlay backdrops.
Treat the progression from loading to success to failure as continuous states of the same entity (e.g., button morphing from spinner to checkmark) rather than sudden cutscenes, and enforce reduced-motion guards.
skills/micro-interaction/SKILL.md
Loading → success → error should be one continuous motion (e.g. a button morphs spinner → checkmark), not a jump cut.
Reframes acceptance criteria accordingly: micro-interactions are state-driven rather than time-driven, freezing state (?state=open) instead of a clock.
2Core Capabilities
01Hover, press, and focus feedback (whileHover/whileTap/whileFocus with springs)
02Enter and exit animations (AnimatePresence with initial/animate/exit and stable keys; toast with mode="popLayout")
03Layout animations and shared elements (layout and layoutId magic move)
04Pure CSS interaction recipes (@starting-style, allow-discrete, popover/dialog exit, @property animatable custom properties, spinners, and toggles)
05Advanced Framer Motion recipes (variants with stagger, Reorder drag-to-sort, drag constraints, gesture combinations)
06reduced-motion guards (global 0.01ms in CSS and Framer Motion-side handling)
07State-freezing harness (?state=idle/hover/open mapped to data-state or controlled props)
3External Dependencies
| Kind | Dependency / Endpoint |
|---|---|
| package | motion（Framer Motion，v11+ 以 motion/react 导入） |
| network | 交付页从 CDN 取 React 与 motion（正文点名 esm.sh；产物期引用，不判级） |
| api | 现代 CSS 原语：@starting-style、transition-behavior: allow-discrete、@property、popover/dialog 的 overlay 离散属性 |
| cli | npx / Playwright（宿主侧截图工具）与仓库根 scripts/ 助手（seek-shot.sh、contact-sheet.sh 依赖 ffmpeg） |
4Recommended Governance & Evidence
Suggested Controls for Safe Operation
For Agent Runtime
Declare allowed domains and key scope
For Administrators
Least privilege keys, retain request logs
Evidence & Triggers (File Paths & Excerpts)
- 网络端点: External network access declaration: Zero outbound network calls at execution time; delivery pages fetch React and motion from CDN (text explicitly references esm.sh; artifact-phase reference, not graded)
- 本地工作目录: File I/O and artifact outputs: Zero disk writes within the skill directory; artifact is 1 self-contained .html file (pure CSS or inline type=module via CDN) generated by the agent
Audit Notes: Grading is based solely on the skill's own directory (skills/micro-interaction/ = SKILL.md + 0-byte README.md + references/{framer-motion-recipes,css-recipes}.md, verified via find): zero scripts, zero credentials, zero disk writes, and zero outbound network calls at execution time (token scan of fetch(/XMLHttpRequest/curl/wget/child_process/process.env/API_KEY|TOKEN|SECRET/.env/eval( yielded zero matches). The esm.sh CDN (for React and motion) cited in the text appears in the output contract as an artifact-phase reference (fetched when the browser opens the delivered page), which is not graded under batch 4 guidelines and only listed as an endpoint; npm packages are installed by the user's project.
5Second-Pass Verification
- [unlocatable] transition-behavior: allow-discrete 与 @starting-style 的支持面 — SKILL.md 写 Baseline in Chrome/Edge/Safari、references 写 Baseline-available in current Chrome/Edge/Safari/Firefox——两处描述不同（SKILL.md 未含 Firefox），且均无源码内依据。正文要求读者 verify @starting-style and allow-discrete for your support floor，即文档自己把核实责任交给使用者，故按文档声明记录并在 risks 提示。
- [ok] layout 造成圆角与文字变形的告诫是否与配方一致 — SKILL.md 的 Gotcha 段与 references 的 magic-move/layout 小节都提示需子元素反向缩放或改用 layout="position"；references 另给 useMotionValue 加 useSpring 的免重渲染建议，互不矛盾。
- [ok] 验收方式与动效性质是否匹配（状态驱动 vs 时间驱动） — SKILL.md 明写 A micro-interaction's frames are its states (idle / hover / pressed / open) 并给 ?state= 方案，同时保留 CSS 循环动画的 animationDelay 加 paused 冻结写法，两路都对得上其讨论的动效类型。
- [discrepancy] Packaged helper 的路径基准与语义 — SKILL.md 写 scripts/seek-shot.sh anim.html 0 1.5 3（秒制、时间冻结），但本 skill 的验收是状态冻结（?state=open），helper 与之不匹配；且 scripts/ 在仓库根，单装形态下相对路径亦不成立。
6Verdict & Scenarios
Best for: Suitable for: 1. Polishing responsive UI details (hover, press, focus feedback, switches, like buttons, toasts, drawers, modals, accordions); 2. List item insertion, deletion, reordering, and shared-element (magic move) transitions; 3. Designing continuous states from loading to success/failure; 4. Projects seeking enter/exit and overlay animations using pure CSS without JS libraries.
Not for: Not suitable for: 1. Page- or route-level transitions (use page-transition-animation); 2. Scrollytelling and complex timeline orchestration (use gsap-web); 3. Performance profiling and systemic governance of expensive properties (use 60fps-animation); 4. Time-driven animations requiring frame-by-frame deterministic verification (this skill's verification artifact is state-based, not frame-based).
Install Agent-Ready
① Verified Mirror 2026-09-28
Option A · Direct DownloadDownload micro-interaction.tar.gz
sha256:
Option B · Copy Guide for Agent17fbed1b9f12f5ad…Agents automatically download and verify mirrors from this JSON guide.
② Upstream GitHub
GitHub Repo ↗
Pinned to commit b6dba3eb75.