用途:向 src/client/bui/icons/ 的图形注册表添加图标,或替换某语义位现有图形。图形唯一真源为 glyphs.tsx,渲染入口为同目录 Icon.tsx,动手前需先读两文件头部 docblock。
主要流程:先分清是「换现有语义位形状」(改 content,key 不动)还是「加新语义位」(加 key,可能连带改消费方类型),不确定应询问用户。取 SVG 时主路径是用户在 central web app 逐个 Copy as SVG(免费额度 20 个导出);strip 到 stroke 版后用 python3 .claude/skills/add-icon/scripts/central.py < /tmp/icon.svg 校验并输出可贴的 content。项目钉在 round-outlined-radius-2-stroke-2,weight 必须在导出时选对,不可导 1.5 再改 strokeWidth。
消费点排查:用 grep 同时查单行与多行 <Icon> 写法,单行需排除注释;动态 name={变量} 要回溯取值来源;发现残留内联 svg 则搬进注册表(TodoRows 进度环除外)。写表时描边属性不写进 content,多子元素用 <>…</> 包裹,每条注释图形出处;换形状需复核钉在旧绘制元素或旧 d 上的断言。随后在 glyphs.test.tsx 的 EXPECTED 与 EXPECTED_RATIO 登记,比值写成除式。
验证顺序:npx tsc --noEmit、npx vitest run src/client/bui/icons、npx vitest run src/client/bui、npm run build,并真机查看明暗两模式渲染。可用 node .claude/skills/add-icon/scripts/shoot.mjs 截图;chrome-devtools MCP 需模拟系统偏好暗色、dpr 3 截图,注意折叠段展开选择器范围与可见性判据。最后量视觉线宽并给同屏对照,非真源图形记入 bui/README.md 偏离表,并注明 central 付费集与公开仓库的许可冲突及知情保留裁决。
限制:central 是付费图标集,许可与本公开仓库存在冲突(已由人裁决知情保留),不得扩大暴露面、不囤积候选 path;图标数据不可自行抓取,也不应自行搜索获取。