Agent skill
infographic-structure-creator
Generate or update infographic Structure components for this repo (TypeScript/TSX in src/designs/structures). Use when asked to design, implement, or modify structure layouts (list/compare/sequence/hierarchy/relation/geo/chart), including layout logic, component composition, and registration.
Install this agent skill to your Project
npx add-skill https://github.com/crazywoola/dify-x/tree/main/.claude/skills/infographic-structure-creator
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).
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
crazywoola/dify-x
infographic-creator
Create beautiful infographics based on the given text content. Use this when users request creating infographics.
crazywoola/dify-x
infographic-template-updater
Update template catalogs and UI prompts after adding new infographic templates (src/templates/*.ts), including SKILL.md template list, site gallery template mappings, and the AIPlayground prompt list.
crazywoola/dify-x
infographic-item-creator
Generate or update infographic Item components for this repo (TypeScript/TSX in src/designs/items). Use when asked to design, implement, or modify data item visuals, layout logic, or registerItem composites.
crazywoola/dify-x
infographic-syntax-creator
Generate AntV Infographic syntax outputs. Use when asked to turn user content into the Infographic DSL (template selection, data structuring, theme), or to output `infographic <template>` plain syntax.
mattpocock/skills
edit-article
Edit and improve articles by restructuring sections, improving clarity, and tightening prose. Use when user wants to edit, revise, or improve an article draft.
mattpocock/skills
handoff
Compact the current conversation into a handoff document for another agent to pick up.
Didn't find tool you were looking for?