進階應用：企業級 Skills 與官方範例深度解析

---
name: api-integration-tester
description: 自動化 API 整合測試工具。此 Skill 用於執行微服務間的整合測試、驗證 API 回應、產生測試報告，並在發現問題時通知團隊。適用於 CI/CD 流程或手動測試需求。
---

# API 整合測試器

## 快速開始

\`\`\`bash
# 執行所有測試
python scripts/run_tests.py --env production

# 執行特定服務測試
python scripts/run_tests.py --service user-service --env staging

# 產生報告
python scripts/generate_report.py --output ./reports/
\`\`\`

## 測試流程

1. **載入測試情境** - 從 `references/test-scenarios.md` 讀取
2. **準備測試資料** - 使用 `assets/test-data/` 中的資料
3. **執行測試** - 呼叫各 API 端點並驗證回應
4. **產生報告** - 使用 `assets/report-template.html`
5. **通知團隊** - 若有失敗，透過 Slack 通知

## 重要檔案說明

### references/api-endpoints.md

包含所有微服務的端點資訊。由於檔案較大，可用 grep 搜尋：

\`\`\`bash
grep -A 10 "user-service" references/api-endpoints.md
\`\`\`

### scripts/run_tests.py

主要測試執行器，支援參數：
- `--env`: 環境（development/staging/production）
- `--service`: 特定服務名稱
- `--verbose`: 詳細輸出
- `--fail-fast`: 遇到錯誤立即停止

**Always run scripts with `--help` first**

DO NOT read the source until absolutely necessary.

這些腳本很大，會污染上下文視窗。
它們被設計為「黑盒」直接調用，而不是讀取理解。

## 使用資料庫 Schema

`references/database-schema.md` 包含所有資料表定義（>10k 字）。

**不要完整讀取**，使用 grep 搜尋：

\`\`\`bash
# 搜尋 users 資料表
grep -A 20 "## users table" references/database-schema.md

# 搜尋特定欄位
grep -B 5 "email" references/database-schema.md
\`\`\`

**常用資料表：**
- users - 使用者資訊
- orders - 訂單記錄
- products - 產品目錄

# scripts/run_tests.py 的設計

def get_api_url(env):
    """根據環境返回正確的 API URL"""
    urls = {
        'development': 'http://localhost:3000',
        'staging': 'https://staging-api.company.com',
        'production': 'https://api.company.com'
    }
    return urls[env]

def get_auth_token(env):
    """根據環境載入正確的認證 token"""
    if env == 'production':
        # 從環境變數讀取
        return os.getenv('PROD_API_TOKEN')
    else:
        # 使用測試 token
        return 'test-token-123'

docx-skill/
├── SKILL.md
├── scripts/
│   ├── create_docx.py       # 建立新文件
│   ├── edit_docx.py         # 編輯現有文件
│   ├── extract_text.py      # 提取文字內容
│   └── track_changes.py     # 處理追蹤修訂
└── references/
    └── formatting-guide.md   # 格式設定指南

# scripts/create_docx.py 的核心邏輯

from docx import Document
from docx.shared import Pt, RGBColor

def create_document(title, content, style='Normal'):
    """建立格式化的 Word 文件"""
    doc = Document()

    # 加入標題
    heading = doc.add_heading(title, level=1)
    heading.runs[0].font.color.rgb = RGBColor(0x2C, 0x3E, 0x50)

    # 加入內容
    for paragraph in content.split('\n\n'):
        p = doc.add_paragraph(paragraph)
        p.style = style

    return doc

## 編輯現有文件時的原則

1. **保留現有格式** - 不要改變未修改段落的格式
2. **維持樣式一致** - 使用文件已有的樣式
3. **追蹤修訂** - 啟用追蹤修訂模式（如果需要）

## 決策樹：選擇你的方法

User task → Is it static HTML?
    ├─ Yes → Read HTML file directly
    │         └─ Write Playwright script
    │
    └─ No (dynamic webapp) → Is server running?
        ├─ No → Use with_server.py helper
        │        └─ Write simplified script
        │
        └─ Yes → Reconnaissance-then-action:
            1. Navigate and wait for networkidle
            2. Take screenshot or inspect DOM
            3. Identify selectors
            4. Execute actions

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch(headless=True)
    page = browser.new_page()

    # Step 1: 導航並等待
    page.goto('http://localhost:5173')
    page.wait_for_load_state('networkidle')  # ⚠️ 關鍵！

    # Step 2: 偵查 - 截圖檢視
    page.screenshot(path='/tmp/inspect.png', full_page=True)

    # Step 3: 偵查 - 檢查 DOM
    buttons = page.locator('button').all()
    print(f"找到 {len(buttons)} 個按鈕")

    # Step 4: 行動 - 使用發現的選擇器
    page.click('button:has-text("Submit")')

    browser.close()

## 常見陷阱

❌ **不要** 在 networkidle 前檢查 DOM
   → JavaScript 還沒執行完，看到的是空白頁面

✅ **一定要** 等待 networkidle 再偵查
   → 確保頁面完全載入

# 單一伺服器
python scripts/with_server.py \
  --server "npm run dev" \
  --port 5173 \
  -- python your_test.py

# 多伺服器（前後端分離）
python scripts/with_server.py \
  --server "cd backend && python server.py" --port 3000 \
  --server "cd frontend && npm run dev" --port 5173 \
  -- python your_test.py

---
name: brand-guidelines
description: 套用 Anthropic 的官方品牌配色和字型到任何 artifact。當需要品牌配色、視覺格式、或公司設計標準時使用。
---

## Brand Guidelines

### Colors

**Main Colors:**
- Dark: `#141413` - 主要文字和深色背景
- Light: `#faf9f5` - 淺色背景和深色文字
- Mid Gray: `#b0aea5` - 次要元素
- Light Gray: `#e8e6dc` - 微妙背景

**Accent Colors:**
- Orange: `#d97757` - 主要強調色
- Blue: `#6a9bcc` - 次要強調色
- Green: `#788c5d` - 第三強調色

### Typography

- **Headings**: Poppins (with Arial fallback)
- **Body Text**: Lora (with Georgia fallback)

## Font Management

- 優先使用 Poppins 和 Lora 字型
- 自動降級到 Arial/Georgia（如果自訂字型不可用）
- 無需安裝字型即可運作
- 為獲得最佳效果，建議預先安裝字型

## Features

### Smart Font Application
- 套用 Poppins 字型到標題（24pt 以上）
- 套用 Lora 字型到內文
- 自動降級到系統字型
- 保持可讀性

### Shape and Accent Colors
- 非文字形狀使用強調色
- 循環使用 orange、blue、green
- 維持視覺趣味同時保持品牌一致

任務：撰寫技術文章並發布到公司部落格

Skills 組合：
1. tech-blog-writer → 撰寫文章
2. seo-optimizer → 優化 SEO
3. brand-guidelines → 套用品牌風格
4. image-generator → 產生配圖
5. cms-publisher → 發布到 CMS

使用方式：
"請幫我寫一篇關於微服務架構的文章，並發布到公司部落格"

Claude 會自動依序使用 5 個 Skills，完成整個流程！

任務：建立並部署一個新功能

Skills 組合：
1. feature-planner → 規劃功能
2. code-generator → 產生程式碼
3. test-generator → 產生測試
4. code-reviewer → 程式碼審查
5. webapp-testing → 整合測試
6. deployment-guide → 部署指引

使用方式：
"請實作使用者註冊功能，包含測試和部署"

Claude 會使用多個 Skills 完成完整的開發循環！

## 與其他 Skills 配合

### 前置 Skills
- 使用本 Skill 前，建議先使用 `data-analyzer` 分析資料

### 後續 Skills
- 本 Skill 產生的報告可用於 `presentation-builder`

## 輸出格式

本 Skill 產生 JSON 格式的輸出：

\`\`\`json
{
  "type": "test-results",
  "version": "1.0",
  "results": [...]
}
\`\`\`

此格式可直接被 `report-generator` 和 `notification-sender` 使用。

# 安裝
/plugin marketplace add anthropics/skills
/plugin install document-skills@anthropic-agent-skills

# 使用
"請使用 PDF skill 提取文件內容"

import anthropic

client = anthropic.Anthropic(api_key="your-key")

# 上傳自訂 Skill
with open("my-skill.zip", "rb") as f:
    skill = client.skills.create(
        name="my-custom-skill",
        file=f
    )

# 在對話中使用
message = client.messages.create(
    model="claude-sonnet-4-5-20250929",
    max_tokens=1024,
    skills=[skill.id],  # 指定 Skills
    messages=[
        {
            "role": "user",
            "content": "使用我的 skill 處理這個任務"
        }
    ]
)

# 列出所有 Skills
skills = client.skills.list()

# 更新 Skill
client.skills.update(
    skill_id=skill.id,
    name="updated-skill-name"
)

# 刪除 Skill
client.skills.delete(skill_id=skill.id)

# 取得特定 Skill 資訊
skill_info = client.skills.retrieve(skill_id=skill.id)

---
name: mobile-responsive-checker
description: 檢查網頁的行動裝置響應式設計。當使用者詢問「手機版」、「響應式」、「RWD」或需要測試不同螢幕尺寸時使用此 Skill。
---

## 觸發關鍵字

此 Skill 會在以下情況觸發：
- 訊息包含「手機」、「mobile」、「響應式」
- 需要測試不同螢幕尺寸
- 詢問行動裝置相容性

## 檢查項目

自動測試以下尺寸：
- Mobile: 375x667 (iPhone SE)
- Tablet: 768x1024 (iPad)
- Desktop: 1920x1080

---
name: skill-factory
description: 根據使用者需求動態建立客製化 Skills。當使用者描述重複性工作流程或想要建立專屬工具時使用。
---

# Skill 工廠

## 建立流程

1. **需求分析**
   - 詢問工作流程步驟
   - 了解使用的工具和 API
   - 蒐集參考文件

2. **設計結構**
   - 決定需要的 scripts
   - 規劃 references
   - 準備 assets

3. **產生 Skill**
   - 建立完整目錄結構
   - 撰寫 SKILL.md
   - 產生範例程式碼

4. **測試與優化**
   - 用實際案例驗證
   - 迭代改進

5. **打包交付**
   - 產生 .zip 檔案

# Clone 團隊 Skills
git clone git@github.com:company/team-skills.git ~/.claude/skills/team

# 更新 Skills
cd ~/.claude/skills/team && git pull

# 貢獻新 Skill
cd ~/.claude/skills/team
mkdir my-new-skill
# ... 建立 Skill ...
git add my-new-skill
git commit -m "Add my-new-skill"
git push