Synchronizes template metadata across source files, galleries, and AI prompt configurations when new templates are added.
Install
mkdir -p .claude/skills/infographic-template-updater && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/8025" && unzip -o skill.zip -d .claude/skills/infographic-template-updater && rm skill.zipInstalls to .claude/skills/infographic-template-updater
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.
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.Key capabilities
- →Collect template names from src/templates
- →Update SKILL.md template lists
- →Sync site gallery template mappings
- →Update AIPlayground prompt lists
How it works
The updater scans new template object keys in the source directory and propagates these names to designated configuration and documentation files.
Inputs & outputs
When to use infographic-template-updater
- →Add new infographic templates
- →Sync template gallery metadata
- →Update playground prompts
About this skill
Infographic Template Updater
Overview
Update public template lists and gallery mappings when new templates are added in src/templates.
Workflow
- Collect new template names from the added
src/templates/*.tsfile (object keys).- If templates are composed via spreads (e.g.
...listZigzagTemplates), also confirm the final keys insrc/templates/built-in.ts.
- If templates are composed via spreads (e.g.
- Update template lists:
skills/infographic-creator/SKILL.mdin the "Available Templates" list.site/src/components/AIPlayground/Prompt.tsin the template list.skills/infographic-syntax-creator/references/prompt.mdin the template list. Keep existing ordering/grouping; add newlist-*entries near other list templates.
- Sanity check with
rg -n "<template-name>"across the above files to confirm presence.
Notes
- Do not remove or rename existing entries.
- Keep template names exact and lower-case.
- If a template needs example data, update or extend
site/src/components/Gallery/datasets.tsto match its structure.
When not to use it
- →Removing existing entries
- →Renaming existing entries
Limitations
- →Requires manual sanity check with rg
- →Template names must be exact and lower-case
How it compares
This automates metadata synchronization across multiple files instead of manually updating each list individually.
Compared to similar skills
infographic-template-updater side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| infographic-template-updater (this skill) | 1 | 5mo | No flags | Beginner |
| web-artifacts-builder | 49 | 3mo | Review | Intermediate |
| prowler-ui | 1 | 2mo | Review | Intermediate |
| implementing-figma-ui-tempad-dev | 0 | 5mo | 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
web-artifacts-builder
anthropics
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
prowler-ui
prowler-cloud
Prowler UI-specific patterns. For generic patterns, see: typescript, react-19, nextjs-15, tailwind-4. Trigger: When working inside ui/ on Prowler-specific conventions (shadcn vs HeroUI legacy, folder placement, actions/adapters, shared types/hooks/lib).
implementing-figma-ui-tempad-dev
ecomfe
Implement integration-ready UI code from a Figma selection or a provided nodeId using TemPad Dev MCP as the only source of design evidence (code snapshot, structure, screenshot, assets, tokens, codegen config). Detect the target repo stack and conventions first, then translate TemPad Dev’s Tailwind-like JSX/Vue IR into project-native code without adding new dependencies. Never guess key styles or measurements; avoid screenshot tuning loops. If required evidence is missing/contradictory or assets cannot be handled under repo policy, stop or ship a safe base with explicit warnings and omissions.
drizzle
lobehub
Drizzle ORM schema and database guide. Use when working with database schemas (src/database/schemas/*), defining tables, creating migrations, or database model code. Triggers on Drizzle schema definition, database migrations, or ORM usage questions.
zustand
lobehub
Zustand state management guide. Use when working with store code (src/store/**), implementing actions, managing state, or creating slices. Triggers on Zustand store development, state management questions, or action implementation.
motion-canvas
davila7
Complete production-ready guide for Motion Canvas with ESM/CommonJS workarounds, full setup templates, and troubleshooting for programmatic video creation using TypeScript