Menu
用于实现或审查 SVG 动画、路径绘制、图标动效、Logo 动画、插画动效、微交互、CSS/SMIL/Framer Motion/GSAP 选型、动效无障碍或降级行为；中文触发词包括 SVG 动画、路径描边、动效。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
用于生成或编辑图表、图形资产、海报、UI 样机、产品图、信息图、学术图、漫画、头像、分镜、品牌板或图像编辑工作流，尤其是导出 PNG 需要视觉质检和有限自动修复时。文字密集图表优先使用确定性的 Mermaid/SVG/HTML/canvas 源；浏览器可打开的技术图优先使用 HTML technical diagrams，覆盖系统蓝图、架构图、部署拓扑、Agent runtime、memory flow、before-after architecture、流程、序列、数据流、生命周期、runbook、PII/数据血缘和状态机；不要用于不涉及生成图像的普通 UI 打磨。中文触发词包括 图片生成、图像编辑、图表生成、架构图、系统蓝图、部署拓扑、Agent runtime、memory flow、before-after architecture、工作流图、数据流、生命周期图、状态机、ER 图、UML、序列图、海报、UI 样机、产品图、信息图、学术图、漫画、头像、分镜、品牌板、PNG 自检、自动修复。
Use when generating or editing diagrams, charts, visual assets, posters, UI mockups, product images, infographics, academic figures, comics, avatars, storyboards, brand boards, or image-edit workflows, especially when exported PNGs need visual QA and bounded self-repair. Prefer deterministic Mermaid/SVG/HTML/canvas sources for text-heavy diagrams; use HTML technical diagrams for browser-ready system blueprints, architecture, deployment topology, agent runtime, memory flow, before-after architecture, workflow, sequence, data-flow, lifecycle, runbook, PII/data-lineage, and state-machine diagrams. Do not use for ordinary UI polish without generated imagery.
用于创建带 draw.io / diagrams.net 源文件的可编辑技术图，包括架构图、ERD、UML、序列图、流程图、ML 模型图、官方形状检索、品牌符号、Graphviz 自动布局、代码结构图、.drawio 校验或 draw.io CLI 导出兜底。不要用于普通位图生成、手绘草图、交互式 Canvas/Three.js 场景或装饰性 SVG 动画；中文触发词包括 draw.io、diagrams.net、可编辑架构图、.drawio、ER 图、UML、序列图、自动布局、形状检索、代码结构图。
Use when creating editable technical diagrams with draw.io / diagrams.net sources, including architecture diagrams, ERD, UML, sequence diagrams, flowcharts, ML model diagrams, official shape lookup, brand symbols, Graphviz auto-layout, codebase structure maps, .drawio validation, or draw.io CLI export fallback. Do not use for ordinary raster image generation, freehand sketches, interactive canvas/Three.js scenes, or decorative SVG animation. Chinese triggers include draw.io, diagrams.net, editable architecture diagrams, .drawio, ER diagrams, UML, sequence diagrams, auto layout, shape retrieval, code structure diagrams.
用于审查或改进前端无障碍、语义结构、键盘支持、焦点管理、ARIA 标签、屏幕阅读器行为、WCAG 2.2 问题、触控无障碍或辅助技术回归；中文触发词包括 无障碍、accessibility、a11y、WCAG、屏幕阅读器。
用于从参考系统中吸收想法、能力、工作流、架构、质量体系、生态扩展或工程实践，并通过原创的项目内重设计转化为当前项目能力，而不是复制原实现。
| name | fec-svg-animation |
| description | 用于实现或审查 SVG 动画、路径绘制、图标动效、Logo 动画、插画动效、微交互、CSS/SMIL/Framer Motion/GSAP 选型、动效无障碍或降级行为；中文触发词包括 SVG 动画、路径描边、动效。 |
为 SVG 图标、插画和数据可视化提供可维护、可访问、性能可控的动画方案。
prefers-reduced-motion 提供动效降级。按复杂度和运行时需求选型：
| 场景 | 推荐 |
|---|---|
| hover/focus、opacity、transform | CSS animation/transition |
| 路径描边、简单重复动效 | CSS + stroke-dasharray |
| React 组件状态驱动动画 | Framer Motion |
| 时间轴、复杂编排、滚动触发 | GSAP |
| 需要保持零依赖的静态 SVG | CSS 或 SMIL |
如果动效跨越页面转场、滚动叙事或复杂组件编排，应先按交互动效 workflow 判断强度、懒加载和 reduced-motion 策略；本 skill 只负责 SVG 图形本身的路径、形变和图标 motion。
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>
);
}
.checkmark-path {
stroke-dasharray: 24;
stroke-dashoffset: 24;
animation: draw-checkmark 420ms ease-out forwards;
}
@keyframes draw-checkmark {
to {
stroke-dashoffset: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.checkmark-path {
animation: none;
stroke-dashoffset: 0;
}
}
import { motion, useReducedMotion } from "framer-motion";
export function AnimatedSparkline({ path }: { path: string }) {
const reduceMotion = useReducedMotion();
return (
<svg viewBox="0 0 120 40" role="img" aria-label="趋势图">
<motion.path
d={path}
fill="none"
stroke="currentColor"
strokeWidth="2"
initial={reduceMotion ? false : { pathLength: 0, opacity: 0 }}
animate={{ pathLength: 1, opacity: 1 }}
transition={{ duration: 0.7, ease: "easeOut" }}
/>
</svg>
);
}
import { useLayoutEffect, useRef } from "react";
import gsap from "gsap";
export function LogoReveal() {
const rootRef = useRef<SVGSVGElement>(null);
useLayoutEffect(() => {
if (!rootRef.current) return;
const ctx = gsap.context(() => {
gsap.timeline({ defaults: { ease: "power2.out" } })
.from(".logo-mark", { scale: 0.9, opacity: 0, duration: 0.25 })
.from(".logo-line", { strokeDashoffset: 80, duration: 0.55 }, "-=0.1");
}, rootRef);
return () => ctx.revert();
}, []);
return (
<svg ref={rootRef} viewBox="0 0 120 32" aria-hidden="true">
<circle className="logo-mark" cx="16" cy="16" r="10" />
<path className="logo-line" d="M36 16h68" stroke="currentColor" />
</svg>
);
}
transform、opacity 和 SVG 路径属性；避免高频修改 layout 相关属性。aria-hidden="true"。prefers-reduced-motion，复杂动效必须提供静态或弱动效降级。产出一个可复用的 SVG 动画组件或样式方案，包含选型理由、动效降级和可访问性处理。验证时检查动画流畅、无布局抖动、键盘与 reduced-motion 场景可用。