sync-website-skilllisted
Install: claude install-skill MrPippi/MJP-Claude-Skills
# Sync Website Skill
## 目標
當 `.cursor/skills/` 下新增或修改了一個 Skill 後，同步更新 MPS 網站（`web/` 目錄）的展示內容，確保網頁與 Skill 文件保持一致。
---
## 工作流程
### Step 1：確認 Skill 基本資料
從新增的 `.cursor/skills/<skill-name>/SKILL.md` frontmatter 與內容取得：
- `name`（Skill ID，對應網頁 slug）
- 英文 `title` 與繁中 `titleZh`
- 英文 `description` 與繁中 `descriptionZh`（簡短一句）
- `category`（需對應現有 category id，見下方清單）
- `tags`、`triggerKeywords`
- `version`（預設 `"1.0.0"`）
**現有 category 清單**（對應 `CategoryIcon.tsx` 已定義的圖示）：
| category id | categoryLabel | categoryLabelEn |
|---|---|---|
| `api-integration` | API 整合 | API Integration |
| `scaffolding` | 專案骨架 | Scaffolding |
| `configuration` | 配置管理 | Configuration |
| `commands` | 指令系統 | Commands |
| `events` | 事件監聽 | Events |
| `testing` | 測試 | Testing |
| `devops` | DevOps | DevOps |
| `database` | 資料庫 | Database |
| `integrations` | 整合 | Integrations |
| `permission` | 權限系統 | Permission |
> 若需要全新 category，必須同步更新 `web/components/icons/CategoryIcon.tsx`，加入對應 SVG `case`。
---
### Step 2：建立網頁資料檔
路徑：`web/data/skills/<skill-name>.md`
使用以下 frontmatter 範本：
```markdown
---
id: <skill-name>
title: <英文標題（Title Case）>
titleZh: <繁中標題>
description: <英文一句描述>
descriptionZh: <繁中一句描述>
version: "1.0.0"
status: active
category: <category-id>
categoryLabel: <繁中分類名>
categoryLabelEn: <英文分類名>
tags: [tag1, tag2, ...]
triggerKeywords:
- "關鍵字1"
- "關鍵字2"
updatedAt: "<YYYY-MM-DD>"
githubPath: Skills/<skill-name>/SKILL.md
featured: false
---
# <英文標題> Skill
## 目標
<兩三句說明此 Skill 的用��>
---
## 使用流程
（從 SKILL.m