Automates the creation and modification of infographic UI components in TypeScript.
Install
mkdir -p .claude/skills/infographic-item-creator && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/3459" && unzip -o skill.zip -d .claude/skills/infographic-item-creator && rm skill.zipInstalls to .claude/skills/infographic-item-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 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.Key capabilities
- →Generate TypeScript infographic Item components
- →Implement layout logic using getElementBounds
- →Extract custom props via getItemProps
- →Register composite components with registerItem
- →Enforce framework-specific item rules
How it works
The generator reads framework rules and layout constraints to produce code that extends BaseItemProps and utilizes specific helper functions for prop extraction and registration.
Inputs & outputs
When to use infographic-item-creator
- →Design new infographic visuals
- →Modify existing layout logic for data items
- →Register new composite components
About this skill
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).
When not to use it
- →When implementing React-specific features like hooks or keys
Prerequisites
Limitations
- →Restricted to components defined in the framework rules
- →Prohibits the use of standard React hooks
How it compares
Unlike manual component creation, this tool enforces strict adherence to project-specific layout constraints and registration patterns defined in the framework.
Compared to similar skills
infographic-item-creator side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| infographic-item-creator (this skill) | 1 | 5mo | No flags | Intermediate |
| infographic-structure-creator | 1 | 5mo | No flags | Intermediate |
| scroll-experience | 101 | 6mo | No flags | Intermediate |
| anthropic-frontend-design | 12 | 6mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by antvis
View all by antvis →You might also like
infographic-structure-creator
antvis
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.
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
threejs-postprocessing
CloudAI-X
Three.js post-processing - EffectComposer, bloom, DOF, screen effects. Use when adding visual effects, color grading, blur, glow, or creating custom screen-space shaders.