home / skills / antvis / infographic / infographic-template-updater

infographic-template-updater skill

/.skills/infographic-template-updater

This skill updates template catalogs and UI prompts when new infographic templates are added, syncing lists across skill files and prompt references.

npx playbooks add skill antvis/infographic --skill infographic-template-updater

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
1.3 KB
---
name: infographic-template-updater
description: 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.
---

# Infographic Template Updater

## Overview

Update public template lists and gallery mappings when new templates are added in `src/templates`.

## Workflow

1. Collect new template names from the added `src/templates/*.ts` file (object keys).
   - If templates are composed via spreads (e.g. `...listZigzagTemplates`), also confirm the final keys in `src/templates/built-in.ts`.
2. Update template lists:
   - `.skills/infographic-creator/SKILL.md` in the "Available Templates" list.
   - `site/src/components/AIPlayground/Prompt.ts` in the template list.
   - `.skills/infographic-syntax-creator/references/prompt.md` in the template list.
   Keep existing ordering/grouping; add new `list-*` entries near other list templates.
3. 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.ts` to match its structure.

Overview

This skill updates public template catalogs and UI prompts after new infographic templates are added. It ensures template names are propagated to the site gallery, prompt lists, and dataset references so new templates appear and work correctly for users. The process preserves existing ordering and naming conventions.

How this skill works

Scan the newly added src/templates/*.ts file for object keys that define template names. If templates are composed via spreads, resolve final keys from the built-in templates file to get the actual names. Then insert the exact, lower-case template names into the site prompt lists, gallery mappings, and prompt reference files, and add example dataset entries where needed.

When to use it

  • After adding one or more files under src/templates/*.ts with new template objects
  • When templates are composed using spread operators and final keys must be confirmed
  • Before deploying or publishing so the UI and prompts list include the new templates
  • When a new template requires example data to render properly in the gallery

Best practices

  • Keep existing ordering and grouping; add new list-* entries near similar list templates
  • Never remove or rename existing entries; only append new names in the correct groups
  • Use exact, lower-case template names to match runtime lookup behavior
  • Run a repository-wide search for each template name to confirm all required files were updated
  • Add or extend example datasets in the gallery dataset file if the template expects specific fields

Example use cases

  • Add three marketing templates in src/templates and update the site prompt and gallery so they are selectable in the UI
  • Introduce a composed zigzag template via spread; resolve its final keys and add them to prompt lists
  • Add an educational chart template that requires example dataset fields; update the gallery datasets file to include a matching sample
  • Make sure newly added templates appear in the AI playground prompt list so users can generate infographics immediately

FAQ

How do I find the final template keys when spreads are used?

Open the built-in templates file that aggregates spreads and confirm the resolved object keys; use those exact keys when updating lists.

What should I check after updating lists?

Run a code search for the template name across site prompt lists, gallery mappings, and prompt reference files to verify presence and correct spelling.