fec-svg-animation SKILL.md skillA
fec-svg-animation 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-svg-animation@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-svg-animation/SKILL.md- Versions recorded
- 1
- Latest version
- git:20260611.9d7f5e4, committed Jun 11, 2026
- Size
- 4,764 bytes
- Repository stars
- 22
- License
- MIT
用于实现或审查 SVG 动画、路径绘制、图标动效、Logo 动画、插画动效、微交互、CSS/SMIL/Framer Motion/GSAP 选型、动效无障碍或降级行为；中文触发词包括 SVG 动画、路径描边、动效。.
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
# SVG 动画实现
## 用途
为 SVG 图标、插画和数据可视化提供可维护、可访问、性能可控的动画方案。
## 适用场景
- 需要实现 SVG 图标、Logo、插画或路径描边动画。
- 需要在 React/Vue 组件中接入 Framer Motion、GSAP 或 CSS 动画。
- 需要根据 `prefers-reduced-motion` 提供动效降级。
- 不用于复杂 3D/WebGL 场景；此类场景优先使用 Canvas / Three.js workflow。
## 流程
### 1. 选择动画方式
按复杂度和运行时需求选型：
| 场景 | 推荐 |
| --- | --- |
| hover/focus、opacity、transform | CSS animation/transition |
| 路径描边、简单重复动效 | CSS + `stroke-dasharray` |
| React 组件状态驱动动画 | Framer Motion |
| 时间轴、复杂编排、滚动触发 | GSAP |
| 需要保持零依赖的静态 SVG | CSS 或 SMIL |
如果动效跨越页面转场、滚动叙事或复杂组件编排，应先按交互动效 workflow 判断强度、懒加载和 reduced-motion 策略；本 skill 只负责 SVG 图形本身的路径、形变和图标 motion。
### 2. 使用 CSS 实现路径描边
```tsx
export function CheckmarkIcon() {
return (
<svg viewBox="0 0 24 24" className="checkmark" aria-hidden="true">
<path
className="checkmark-path"
d="M5 12.5l4.5 4.5L19 7"
fill="none"
stroke="currentColor"
strokeWidth="2.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
}
```
```css
.checkmark-path {
stroke-dasharray: 24;
stroke-dashoffset: 24;
animation: draw-checkmark 420ms ease-out forwards;
}
@keyframes draw-checkmark {
to {
stroke-dashoffset: 0;
…Read the whole file at its exact version.
How to install
mdr add bovinphang/frontend-craft/fec-svg-animation@sha256:306e88f4f0518a51The 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_w23lxwno7lv2uqzo)
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 (4764 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_w23lxwno7lv2uqzo GET https://markdownregistry.com/api/v1/resolve?ref=bovinphang/frontend-craft/fec-svg-animation GET https://markdownregistry.com/api/v1/blob/306e88f4f0518a51a42a23f15889a5f14cce2d8bee03359776ef0d09128dafa3
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