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.

Stars 4,720
Forks 340

Install this agent skill to your Project

npx add-skill https://github.com/antvis/Infographic/tree/main/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

  1. Read references/structure-prompt.md for the full framework rules, allowed components, and output requirements.
  2. Clarify minimal requirements if missing: structure category, layout direction, hierarchy depth, and whether add/remove buttons are needed.
  3. Choose Item vs Items, compute layout from getElementBounds, and plan decor elements under ItemsGroup.
  4. Produce a full TypeScript file: imports, Props extends BaseStructureProps, component implementation, and registerStructure with accurate composites.
  5. 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/structures for similar existing structures to match local patterns when appropriate.
  • Keep output concise; avoid React-only features (keys, hooks).

Expand your agent's capabilities with these related and highly-rated skills.

antvis/Infographic

infographic-creator

基于给定文字内容创建精美信息图。当用户请求创建信息图时使用。

4,720 340
Explore
antvis/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.

4,720 340
Explore
antvis/Infographic

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.

4,720 340
Explore
antvis/Infographic

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.

4,720 340
Explore
petekp/claude-code-setup

ubiquitous-language

Extract a DDD-style ubiquitous language glossary from the current conversation, flagging ambiguities and proposing canonical terms. Saves to UBIQUITOUS_LANGUAGE.md. Use when user wants to define domain terms, build a glossary, harden terminology, create a ubiquitous language, or mentions "domain model" or "DDD".

20 6
Explore
petekp/claude-code-setup

every-style-editor

This skill should be used when reviewing or editing copy to ensure adherence to Every's style guide. It provides a systematic line-by-line review process for grammar, punctuation, mechanics, and style guide compliance.

20 6
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results