Creates and updates TypeScript infographic layouts for lists, comparisons, sequences, hierarchies, and charts.
Install
mkdir -p .claude/skills/infographic-structure-creator && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/4055" && unzip -o skill.zip -d .claude/skills/infographic-structure-creator && rm skill.zipInstalls to .claude/skills/infographic-structure-creator
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
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.Key capabilities
- →Generate TypeScript infographic structure components
- →Implement layout logic for lists, hierarchies, and charts
- →Register components with the infographic framework
- →Define layout direction and hierarchy depth
How it works
It follows a predefined framework rule set to generate TypeScript components that extend BaseStructureProps and register themselves with the system.
Inputs & outputs
When to use infographic-structure-creator
- →Creating data visualization components
- →Implementing infographic layouts
- →Updating UI design structures
About this skill
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).
When not to use it
- →General React component development
- →Creating non-infographic UI elements
Prerequisites
Limitations
- →Restricted to framework-approved components
- →No support for React-specific features like hooks
How it compares
It enforces strict framework constraints and registration patterns instead of allowing arbitrary React component structures.
Compared to similar skills
infographic-structure-creator side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| infographic-structure-creator (this skill) | 1 | 5mo | No flags | Intermediate |
| scroll-experience | 101 | 6mo | No flags | Intermediate |
| anthropic-frontend-design | 12 | 6mo | No flags | Intermediate |
| logo-with-variants | 4 | 8mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by antvis
View all by antvis →You might also like
scroll-experience
davila7
Expert in building immersive scroll-driven experiences - parallax storytelling, scroll animations, interactive narratives, and cinematic web experiences. Like NY Times interactives, Apple product pages, and award-winning web experiences. Makes websites feel like experiences, not just pages. Use when: scroll animation, parallax, scroll storytelling, interactive story, cinematic website.
anthropic-frontend-design
chaibuilder
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
logo-with-variants
crafter-station
Create logo components with multiple variants (icon, wordmark, logo) and light/dark modes. Use when the user provides logo SVG files and wants to create a variant-based logo component following the Clerk pattern in the Elements project.
design-context
WellApp-ai
Refresh UI/UX context from design system, Storybook, and codebase
add-template
TonnyWong1052
Add new UI style template to the ui-style-react project. This skill should be used when users want to add a new style template with HTML/CSS code, create a new preview page, or register a template in the system. Triggers include "add template", "create new style", "add new template", or when users provide HTML code for a new UI style.
core-components
davila7
Core component library and design system patterns. Use when building UI, using design tokens, or working with the component library.