AI Skills
infographic-item-creator

infographic-item-creator

Beliebt

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.

4KSterne
271Forks
Aktualisiert 1/21/2026
Skill holenQuellcode
SKILL.md
readonlyread-only
name
infographic-item-creator
description

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.

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).

You Might Also Like

Related Skills

coding-agent

coding-agent

179Kdev-codegen

Run Codex CLI, Claude Code, OpenCode, or Pi Coding Agent via background process for programmatic control.

openclaw avataropenclaw
Holen
add-uint-support

add-uint-support

97Kdev-codegen

Add unsigned integer (uint) type support to PyTorch operators by updating AT_DISPATCH macros. Use when adding support for uint16, uint32, uint64 types to operators, kernels, or when user mentions enabling unsigned types, barebones unsigned types, or uint support.

pytorch avatarpytorch
Holen
at-dispatch-v2

at-dispatch-v2

97Kdev-codegen

Convert PyTorch AT_DISPATCH macros to AT_DISPATCH_V2 format in ATen C++ code. Use when porting AT_DISPATCH_ALL_TYPES_AND*, AT_DISPATCH_FLOATING_TYPES*, or other dispatch macros to the new v2 API. For ATen kernel files, CUDA kernels, and native operator implementations.

pytorch avatarpytorch
Holen
skill-writer

skill-writer

97Kdev-codegen

Guide users through creating Agent Skills for Claude Code. Use when the user wants to create, write, author, or design a new Skill, or needs help with SKILL.md files, frontmatter, or skill structure.

pytorch avatarpytorch
Holen
implementing-jsc-classes-cpp

implementing-jsc-classes-cpp

87Kdev-codegen

Implements JavaScript classes in C++ using JavaScriptCore. Use when creating new JS classes with C++ bindings, prototypes, or constructors.

oven-sh avataroven-sh
Holen
implementing-jsc-classes-zig

implementing-jsc-classes-zig

87Kdev-codegen

Creates JavaScript classes using Bun's Zig bindings generator (.classes.ts). Use when implementing new JS APIs in Zig with JSC integration.

oven-sh avataroven-sh
Holen