chore: optimize skills (#136)

* chore: optimize skills add more information about hierarchy structure

* chore: fix template updater skill

Author: Aarebecca

.skills/infographic-creator/SKILL.md

@@ -47,6 +47,7 @@ theme
 - `data` should contain title/desc/items (which can be omitted according to semantics)
 - `data.items` should contain label(string)/value(number)/desc(string)/icon(string)/children(object), where children represents the hierarchical structure
 - For comparison templates (template names starting with `compare-`), construct exactly two root nodes and place every comparison item under them as children to keep the hierarchy clear
+- For `hierarchy-structure`, `data.items` renders top-to-bottom (first item at the top) and supports up to 3 levels (root -> group -> item)
 - `theme` field is for customizing the theme of the infographic, including palette, font, etc.
   e.g. dark theme with custom palette:
   ```plain

.skills/infographic-syntax-creator/references/prompt.md

@@ -34,6 +34,7 @@
 - `data.items` 常见字段：
   - `label`(string) / `value`(number) / `desc`(string) / `icon`(string) / `children`(array)
 - 对比类模板（名称以 `compare-` 开头）必须构建两个根节点，所有对比项作为这两个根节点的 children
+- `hierarchy-structure` 模板最多支持 3 层（根层 → 分组 → 子项），且 `data.items` 顺序即从上到下的层级顺序（第 1 个在最上）
 - `theme` 可用 `theme <theme-name>`，或使用 block 自定义 `palette` 等；不写即默认主题，可选主题名：`dark`、`hand-drawn`
 - icon 直接使用图标名（如 `mdi/chart-line`）
 - 禁止输出 JSON、Markdown 或解释性文字
@@ -50,41 +51,64 @@
 - 关系 → `relation-*`
 
 **可用模板**：
+
 - sequence-zigzag-steps-underline-text
 - sequence-horizontal-zigzag-underline-text
+- sequence-horizontal-zigzag-simple-illus
 - sequence-circular-simple
 - sequence-filter-mesh-simple
 - sequence-mountain-underline-text
 - sequence-cylinders-3d-simple
-- compare-binary-horizontal-simple-fold
-- compare-hierarchy-left-right-circle-node-pill-badge
-- quadrant-quarter-simple-card
-- quadrant-quarter-circular
-- list-grid-badge-card
-- list-grid-candy-card-lite
-- list-grid-ribbon-card
-- list-row-horizontal-icon-arrow
-- relation-circle-icon-badge
-- sequence-ascending-steps
-- compare-swot
 - sequence-color-snake-steps-horizontal-icon-line
 - sequence-pyramid-simple
-- list-sector-plain-text
 - sequence-roadmap-vertical-simple
+- sequence-roadmap-vertical-plain-text
 - sequence-zigzag-pucks-3d-simple
+- sequence-ascending-steps
 - sequence-ascending-stairs-3d-underline-text
+- sequence-snake-steps-compact-card
+- sequence-snake-steps-underline-text
+- sequence-snake-steps-simple
+- sequence-stairs-front-compact-card
+- sequence-stairs-front-pill-badge
+- sequence-timeline-simple
+- sequence-timeline-rounded-rect-node
+- sequence-timeline-simple-illus
+- compare-binary-horizontal-simple-fold
+- compare-hierarchy-left-right-circle-node-pill-badge
+- compare-swot
+- quadrant-quarter-simple-card
+- quadrant-quarter-circular
+- quadrant-simple-illus
+- relation-circle-icon-badge
+- relation-circle-circular-progress
 - compare-binary-horizontal-badge-card-arrow
 - compare-binary-horizontal-underline-text-vs
 - hierarchy-tree-tech-style-capsule-item
 - hierarchy-tree-curved-line-rounded-rect-node
 - hierarchy-tree-tech-style-badge-card
+- hierarchy-structure
 - chart-column-simple
 - chart-bar-plain-text
 - chart-line-plain-text
 - chart-pie-plain-text
 - chart-pie-compact-card
 - chart-pie-donut-plain-text
 - chart-pie-donut-pill-badge
+- chart-wordcloud
+- list-grid-badge-card
+- list-grid-candy-card-lite
+- list-grid-ribbon-card
+- list-row-horizontal-icon-arrow
+- list-row-simple-illus
+- list-sector-plain-text
+- list-column-done-list
+- list-column-vertical-icon-arrow
+- list-column-simple-vertical-arrow
+- list-zigzag-down-compact-card
+- list-zigzag-down-simple
+- list-zigzag-up-compact-card
+- list-zigzag-up-simple
 
 ## 生成流程
 

.skills/infographic-template-updater/SKILL.md

@@ -14,10 +14,11 @@ Update public template lists and gallery mappings when new templates are added i
 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:
-   - `SKILL.md` in the "Available Templates" list.
+   - `.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 three files to confirm presence.
+3. Sanity check with `rg -n "<template-name>"` across the above files to confirm presence.
 
 ## Notes
 

site/src/components/AIPlayground/Prompt.ts

@@ -36,6 +36,7 @@ theme
 - data 应包含 title/desc/items（根据语义可省略不必要字段）
 - data.items 可包含 label(string)/value(number)/desc(string)/icon(string)/children(array) 等字段，children 表示层级结构
 - 对比类模板（名称以 \`compare-\` 开头）应构建两个根节点，所有对比项作为这两个根节点的 children，确保结构清晰
+- hierarchy-structure 模板最多支持 3 层（根层 → 分组 → 子项），且 data.items 顺序即从上到下的层级顺序（第 1 个在最上）
 - theme 可用 \`theme <theme-name>\`，或使用 block 自定义 palette 等；不写即默认主题，可选：dark、hand-drawn
 - 根据语义选择模板：列表用 list-*，顺序用 sequence-*，对比用 compare-*，层级用 hierarchy-*，统计用 chart-*，象限用 quadrant-*，关系用 relation-*
 - 严禁输出 JSON、Markdown、解释或额外文本