infographic-item-creator
Installation
SKILL.md
Infographic Item Generator
Overview
Generate complete Item component code for the infographic framework, following the project's item rules, layout constraints, and registration requirements.
Workflow
- Read
references/item-prompt.mdfor the full framework rules, allowed components, and output requirements. - Clarify minimal requirements if missing: desired visuals, required fields (icon/label/value/desc/illus), sizing, and alignment needs.
- Use
getItemPropsto extract custom props and compute layout withgetElementBounds. - Produce a full TypeScript file: imports, Props extends BaseItemProps, component implementation, and
registerItemwith accuratecomposites. - Self-check against the constraints in the reference (no unlisted components, indexes passed to all wrapped components, correct conditional rendering).
Notes
- Prefer scanning
src/designs/itemsfor similar items 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 文件
29multi-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