ReddRadar
Agent skill
infographic-structure-generator
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/zhuxingwan/Infographic/tree/main/.skills/infographic-structure-generator
SKILL.md
Infographic Structure Generator
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.
zhuxingwan/Infographic
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.
zhuxingwan/Infographic
infographic-item-generator
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.
zhuxingwan/Infographic
infographic-syntax-generator
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
setup-pre-commit
Set up Husky pre-commit hooks with lint-staged (Prettier), type checking, and tests in the current repo. Use when user wants to add pre-commit hooks, set up Husky, configure lint-staged, or add commit-time formatting/typechecking/testing.
mattpocock/skills
obsidian-vault
Search, create, and manage notes in the Obsidian vault with wikilinks and index notes. Use when user wants to find, create, or organize notes in Obsidian.
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.
Didn't find tool you were looking for?