关于 infographic-structure-creator
此技能为信息图框架生成完整的 TypeScript Structure 组件代码，并遵循组件、布局和注册约束。
主要功能
- 01生成完整的 Structure 组件代码
- 02依据元素边界规划布局
- 03支持 Item 和 Items 模式
- 04包含导入、属性和注册代码
- 05检查组件与空状态约束
适用场景
- 01为新信息图布局创建结构
- 02实现层级或方向排列
- 03向项目添加已注册的 Structure 组件
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/infographic-structure-creator确认已加载。
附带文件references/structure-prompt.md
详细介绍
信息图结构创建器
概述
按照项目的组件规则、布局约束和注册要求，为信息图框架生成完整的 Structure 组件代码。
工作流程
- 阅读
references/structure-prompt.md，了解完整的框架规则、允许使用的组件和输出要求。 - 如果缺少必要信息，请澄清最低限度的要求：结构类别、布局方向、层级深度，以及是否需要添加/删除按钮。
- 选择 Item 或 Items，根据
getElementBounds计算布局，并规划 ItemsGroup 下的装饰元素。 - 生成完整的 TypeScript 文件：导入、继承 BaseStructureProps 的 Props、组件实现，以及包含准确
composites的registerStructure。 - 根据参考资料中的约束进行自查（不得使用未列出的组件、不得使用 SVG cx/cy/r、索引正确，并处理空状态）。
注意事项
- 适当时，优先查看
src/designs/structures中类似的现有结构，以遵循本地模式。 - 保持输出简洁；避免仅适用于 React 的功能（keys、hooks）。
评论
支持 Markdown