fec-motion-interaction SKILL.md skillA
fec-motion-interaction from bovinphang/frontend-craft is an agent skill: a SKILL.md folder an AI agent loads when a task calls for it.
mdr add bovinphang/frontend-craft/fec-motion-interaction@git:20260611.9d7f5e4Pins git:20260611.9d7f5e4 in mdr.lock. Pin the fingerprint instead.
- Audit grade
- A, 17 of 17 checks passed
- Kind
- SKILL.md skill
- Repository
- bovinphang/frontend-craft
- Path
localized/zh-CN/skills/fec-motion-interaction/SKILL.md- Versions recorded
- 1
- Latest version
- git:20260611.9d7f5e4, committed Jun 11, 2026
- Size
- 5,610 bytes
- Repository stars
- 22
- License
- MIT
用于设计、实现或审查前端交互动效、页面转场、滚动动画、Framer Motion、GSAP、Lottie、CSS 动画、动效强度、动画性能、减少动效行为或兼具表现力与可访问性的 UI 动效。不要用于仅 SVG 路径绘制、Canvas/WebGL 渲染或普通 hover 状态；中文触发词包括 动效设计、交互动效、页面转场、滚动动画、Framer Motion、GSAP。.
Collected from public GitHub. Every version is saved exactly as it was and never changes. Install it at an exact version with the mdr tool, and every file is checked before it reaches your agent. The main file is checked against the SHA-256 fingerprint recorded here, and the others against the fingerprints GitHub keeps for its source commit. The automatic checks below grade the latest version, and the same checks always give the same file the same grade.
What the file says
# 交互动效 适用于需要把页面转场、滚动叙事、组件入场、微交互和反馈节奏设计成可维护、可降级、可验证的前端动效任务。需要具体实现模式时加载 [motion-patterns.md](references/motion-patterns.md)。 ## 用途 为前端界面选择合适动效工具、强度和质量门禁。 ## 流程 1. 判断动效职责 - 先写清动效服务的用户意图：定位、反馈、层级变化、状态确认、叙事引导或品牌记忆。 - 工具型界面默认克制，优先保障扫描效率；营销页和作品页可增加节奏，但不能遮挡主要信息。 - 若动效只装饰而不改善理解、反馈或品牌识别，应删掉或改成静态视觉处理。 - loading、skeleton、toast、错误提示和成功反馈属于状态沟通；动效只能增强反馈节奏，不能替代文本、语义或可见状态。 2. 选择技术路线 - CSS transition/keyframes：hover、focus、toast、简单入场和小型状态反馈。 - Framer Motion：React 状态驱动、布局过渡、列表编排和可中断的组件级动画。 - GSAP：时间轴、滚动触发、复杂序列和跨元素精确编排。 - Lottie：设计工具输出的图标或空状态动画，按需懒加载。 - CSS scroll-driven animation：可接受渐进增强且无需旧浏览器一致性时使用。 3. 定义强度等级 - Level 1-2：只用 150-250ms opacity/transform，适合后台、表单和高频工具。 - Level 3-4：加入短 stagger、局部 spring 和轻量 reveal，适合仪表盘、设置页和管理台。 - Level 5-6：加入视差、布局 morph、指针响应，适合产品展示和交互式首页。 - Level 7+：使用滚动叙事、固定段落或 3D/WebGL 配合，必须单独做移动端和 reduced-motion 降级。 - 场景默认值：公共服务、医疗、金融和强可访问性产品从 Level 1-2 起步；SaaS 工具和数据后台从 Level 2-3 起步；营销页、品牌页和作品集可从 Level 4-6 起步；实验性活动页或沉浸式叙事才考虑 Level 7+。 - 如果 UI 设计流程已经设定了动效强度拨盘，沿用该拨盘；不要因为引入了某个动效库就自动提高强度。 4. 建立性能边界 - 只高频动画 `transform`、`opacity`，谨慎使用 `filter` 和 `clip-path`。 - GSAP、Lottie、Three.js、重型动画组件必须动态导入或隔离在叶子组件。 …
Read the whole file at its exact version.
How to install
mdr add bovinphang/frontend-craft/fec-motion-interaction@sha256:4d1c221bcb1d56d3The line at the top of this page pins the label git:20260611.9d7f5e4, which is what most people want. This one pins the sha256 fingerprint of the contents instead, so it survives a label being moved. Either way the exact version is written to mdr.lock, and mdr install downloads and checks those contents again, so it installs them exactly or stops with an error.
[](https://markdownregistry.com/a/art_hey64neobvc63b4c)
2 badge image fetches in 30 days. What the badge shows.
Versions
The registry has recorded 1 version of this file, committed on Jun 11, 2026.
Audit of the latest version
- pass: Frontmatter block present
- pass: Frontmatter declares a name
- pass: Frontmatter declares a description
- pass: Size between 200 bytes and 200 KB (5610 bytes)
- pass: No zero-width or bidi control characters
- pass: No instruction hidden inside an HTML comment
- pass: No link to an exfiltration or paste host
- pass: No credential-shaped string
- pass: No instruction to send local credentials anywhere
- pass: No text hidden with inline styles
- pass: No prompt-injection phrasing
- pass: No curl or wget piped into a shell
- pass: No recursive delete of root, home or parent
- pass: No instruction to read or print local credentials
- pass: No base64 blob over 200 characters
- pass: No link to a raw IP address
- pass: No script tag
Source
bovinphang/frontend-craft · 22 stars · license MIT · pushed 2026-09-26 · branch main
API
GET https://markdownregistry.com/api/v1/artifacts/art_hey64neobvc63b4c GET https://markdownregistry.com/api/v1/resolve?ref=bovinphang/frontend-craft/fec-motion-interaction GET https://markdownregistry.com/api/v1/blob/4d1c221bcb1d56d3c60531bfe7fa442311749e6898908800364c637b4cf03bbb
Your AI assistant does the legwork. You hear about the deals worth your word. Hand yours the standing instructions at modelranch.com and it joins the network that reads files like this one.
Guides: the SKILL.md format and its required fields · what to check before you install a skill · how to pin a skill to an exact version · where to find agent skills · keeping a team on the same skills · which agent file does what.
More from bovinphang/frontend-craft
Every file in bovinphang/frontend-craft