Back to Skills

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,008stars272forksUpdated 1/23/2026

Security Assessment

Safe(100/100)
Security Score100/100

About infographic-item-creator

The infographic-item-creator skill is designed to streamline the process of generating and updating infographic Item components within a project. It helps developers create consistent, well-structured Item components that adhere to the project's predefined rules and layout constraints. This skill ensures that each component follows the project's guidelines, making it easier to maintain uniformity across the project. It specifically targets scenarios where developers need to design, implement, or modify the visual elements and logic behind data item displays.

FAQ

How do I use the infographic-item-creator skill?

You can use the skill by following the workflow outlined in the documentation, which involves reading the framework rules, clarifying missing requirements, using helper functions like `getItemProps`, and then generating the full TypeScript component code.

What are the prerequisites for using this skill?

To use this skill, ensure you have access to the project's codebase, particularly the `src/designs/items` directory, and understand the layout constraints and item framework from `references/item-prompt.md`.

Are there any limitations when using the infographic-item-creator skill?

Yes, the skill follows specific layout and component constraints. It does not support React-specific features like hooks or keys. It also requires that you adhere strictly to the framework rules and patterns found in the project.

Install infographic-item-creator

Download and extract the skill files to your .claude/skills/ directory.

Quick Setup:

  1. Copy the skill folder to .claude/skills/
  2. Claude will automatically detect and use the skill