Agent skill

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.

View SKILL.md on GitHub Repository
Stars 3
Forks 0

Install this agent skill to your Project

npx add-skill https://github.com/crazywoola/dify-x/tree/main/.claude/skills/infographic-item-creator

SKILL.md

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

  1. Read references/item-prompt.md for the full framework rules, allowed components, and output requirements.
  2. Clarify minimal requirements if missing: desired visuals, required fields (icon/label/value/desc/illus), sizing, and alignment needs.
  3. Use getItemProps to extract custom props and compute layout with getElementBounds.
  4. Produce a full TypeScript file: imports, Props extends BaseItemProps, component implementation, and registerItem with accurate composites.
  5. 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/items for similar items 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.

3 0
Explore
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.

3 0
Explore
crazywoola/dify-x

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.

3 0
Explore
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.

3 0
Explore
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.

111,310 9,758
Explore
mattpocock/skills

handoff

Compact the current conversation into a handoff document for another agent to pick up.

111,310 9,758
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results