mcpField
M
morphing-icons

morphing-icons

github.com/raphaelsalaja设计与 UI46367 次安装今天更新
代码仓库

关于 morphing-icons

morphing-icons 是用于构建或审查图标的技能，图标通过移动固定的三条 SVG 线段实现变形。它规定共享几何、动效、减少动态效果的处理方式，以及图标组件的无障碍检查。

主要功能

  1. 01将每个图标建模为三条 SVG 线段
  2. 02统一使用 14×14 viewBox
  3. 03定义分组旋转变体
  4. 04指定变形缓动和时长
  5. 05检查减少动态效果和无障碍属性

适用场景

  1. 01构建可在状态间变形的图标
  2. 02审查 SVG 图标插值组件
  3. 03检查分组箭头的旋转行为

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/raphaelsalaja/skills --skill morphing-icons

安装后在 Claude Code 中输入/morphing-icons确认已加载。

附带文件agents/openai.yaml

详细介绍

变形图标

此技能用于构建或审查通过移动相同的三条 SVG 线来变形的图标。任何图标都可以变成任何其他图标，因为线条数量始终不变。

每项检查都是一组配对。出问题的线条与替换它的线条并排呈现。

必须恰好有三条线。14 的 viewBox 是已发布的坐标系，中心点为 7。两条线的检查若省略第三条线，则属于一项问题。图标周围按钮的按下和悬停时序由 timing-functions 负责。线条变形本身使用此技能中的过渡。

何时使用

当用户要求创建变形图标、在两个图标之间制作动画，或审查会插值 SVG 线条的图标组件时，请使用此技能。不要将其用于两个 <svg> 树之间的交叉淡化。

1. 固定模型

每条线都是 { x1, y1, x2, y2, opacity? }。每个图标都是 { lines, rotation?, group? }，其中 lines 是由三条线组成的元组。收起的线段在中心处长度为零，并设为 opacity: 0。

const CENTER = 7;
const collapsed = { x1: CENTER, y1: CENTER, x2: CENTER, y2: CENTER, opacity: 0 };

2. 在约束内绘制

每个图标都有三条线。未使用的线条必须设为 collapsed，不能是 null，也不能省略。这些分别属于 morphing-three-lines 和 morphing-use-collapsed。每个图标都使用相同的 viewBox。已发布的尺寸为 14 乘 14。这属于 morphing-consistent-viewbox。

对勾图标保持第三条线收起状态。菜单图标使用三条真实线段。“更多”图标使用三个长度为零的点。旋转变体（例如四个箭头）共用一个线条列表和一个 group，并将 rotation 设为 0、90、180 或 -90。为 arrow-down 和 arrow-right 使用不同的点列表会违反 morphing-group-variants。

3. 移动线条

描边插值使用 ease: [0.19, 1, 0.22, 1] 和 duration: 0.4。此时长用于变形，而非按下或悬停。组内旋转通过 useSpring 使用弹簧动画。跨组时调用 rotation.jump，而非带动画的 set。这些分别属于 morphing-spring-rotation 和 morphing-jump-non-grouped。

当 useReducedMotion() 为 true 时，过渡时长为 0。这属于 morphing-reduced-motion。线条设置 strokeLinecap="round"。这属于 morphing-strokelinecap-round。如果 svg 是装饰性的，则设置 aria-hidden="true"。这属于 morphing-aria-hidden。

4. 报告或构建，然后停止

如果用户要求审查，请撰写问题报告和摘要。如果用户要求制作图标，请在项目的组件中构建，不要在现有图标系统旁再添加一套图标系统。

配对规则

每项检查都是一组配对。出问题的线条与替换它的线条并排呈现。

规则问题写法替代写法
morphing-three-lines对勾图标只有两个线条对象添加第三条线并设为 collapsed
morphing-use-collapsed线条元组中出现 null使用 collapsed 常量
morphing-consistent-viewbox一个图标使用 14 的框，另一个使用 28 的框所有图标都使用 VIEWBOX_SIZE = 14
morphing-group-variantsarrow-down 使用独立的点绘制使用相同的 arrowLines、group: "arrow" 和 rotation: 90
morphing-spring-rotation对组内旋转使用 transition={{ duration: 0.3 }}对该旋转使用 useSpring
morphing-jump-non-grouped组不同时使用 rotation.set使用 rotation.jump
morphing-reduced-motion变形没有减少动态效果的分支开启减少动态效果时将 duration 设为 0
morphing-strokelinecap-roundstrokeLinecap="butt"strokeLinecap="round"
morphing-aria-hidden<svg width={size} height={size}>aria-hidden="true"

报告

严重性。 HIGH 表示线条数量不为 3，或旋转变体不共用同一组和线条列表。MEDIUM 表示缺少减少动态效果分支，或旋转动画跨越多个组。LOW 表示使用平头线帽，或装饰性图标缺少 aria-hidden。

验证。 阅读范围内文件中声明的值。浏览器可用可不用。将无法执行的检查标记为 Not verified。

格式。 每个根因对应一条发现：

file:line - [rule-id] what is wrong

然后提供摘要：

规则数量严重性

只要仍有任何 HIGH，就标记为 Block。否则标记为 Approve，并在表格中保留较低严重性的行。不得 Approve 未阅读的文件。如果没有可报告的问题，请写“没有可采取行动的发现”，并列出未验证的内容。

评论

支持 Markdown