infographic-structure-creator
Installation
SKILL.md
Infographic Structure Creator
Overview
Generate complete Structure component code for the infographic framework, following the project's component rules, layout constraints, and registration requirements.
Workflow
- Read
references/structure-prompt.mdfor the full framework rules, allowed components, and output requirements. - Clarify minimal requirements if missing: structure category, layout direction, hierarchy depth, and whether add/remove buttons are needed.
- Choose Item vs Items, compute layout from
getElementBounds, and plan decor elements under ItemsGroup. - Produce a full TypeScript file: imports, Props extends BaseStructureProps, component implementation, and
registerStructurewith accuratecomposites. - Self-check against the constraints in the reference (no unlisted components, no SVG cx/cy/r, correct indexes, empty-state handling).
Notes
- Prefer scanning
src/designs/structuresfor similar existing structures to match local patterns when appropriate. - Keep output concise; avoid React-only features (keys, hooks).
Related skills
More from twwch/openskills
docx-processor
处理 Word 文档,支持读取、分析、总结和转换 docx 文件
27multi-chart-draw
支持多种图表类型的绘制工具,包括思维导图、流程图、数据可视化图表、数学函数图等;可根据用户需求生成 Mermaid、ECharts、Mindmap、DrawIO、GeoGebra 等格式的图表,并导出为 PNG、SVG、HTML 等格式
15excel-processor
处理 Excel 文件,支持读取、分析、统计和导出 xlsx 数据
13infographic-creator
基于给定文字内容创建精美信息图。当用户请求创建信息图时使用。
13meeting-summary
生成结构化的会议纪要,包含议题摘要、决策事项和行动项
12file-to-article-generator
解析用户上传的文件(PDF/Word/图片),提取文本内容和图片并保存到本地,使用图像识别能力理解图片内容,根据文件内容和用户需求判断文章类型(品牌动向/产品动态/政策规则/营销战役/客户证言/行业资讯),使用不同prompt生成Markdown格式的文章,使用Markdown语法引用图片,确保配图与文章内容契合,并对生成结果进行质量打分。适用于需要从现有文档生成各类品牌和产品内容的场景,如品牌报道、产品发布、政策公告、营销宣传、客户案例等。
10