关于 infographic-item-creator
此技能为信息图框架生成完整的 TypeScript Item 组件代码，并遵循属性、布局、渲染和注册规则。
主要功能
- 01生成完整的 Item 组件代码
- 02使用 getItemProps 提取自定义属性
- 03依据元素边界规划布局
- 04包含导入、属性和注册代码
- 05检查索引传递与条件渲染
适用场景
- 01创建自定义信息图条目视觉
- 02实现图标、标签、数值或描述字段
- 03向项目添加已注册的 Item 组件
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/infographic-item-creator确认已加载。
附带文件references/item-prompt.md
详细介绍
信息图项目生成器
概述
按照项目的项目规则、布局约束和注册要求，为信息图框架生成完整的 Item 组件代码。
工作流
- 阅读
references/item-prompt.md，了解完整的框架规则、允许使用的组件和输出要求。 - 如果缺少信息，请明确最基本的需求：期望的视觉效果、必需字段（icon/label/value/desc/illus）、尺寸和对齐需求。
- 使用
getItemProps提取自定义 props，并通过getElementBounds计算布局。 - 生成完整的 TypeScript 文件：导入语句、继承 BaseItemProps 的 Props、组件实现，以及 composites 准确的
registerItem。 - 根据参考资料中的约束进行自检（不使用列表外的组件、为所有包装组件传入索引、正确进行条件渲染）。
备注
- 适当情况下，优先查看
src/designs/items中的相似项目，以匹配本地模式。 - 保持输出简洁；避免使用仅适用于 React 的功能（keys、hooks）。
评论
支持 Markdown