# 檢查 Node.js 版本
node --version
# 預期輸出：v20.x.x 或更高

# 檢查 Python 版本
python3 --version
# 預期輸出：Python 3.10+ 

# 檢查 pipx 是否已安裝
pipx --version
# 若未安裝，執行：python3 -m pip install --user pipx

# 檢查 Claude Code CLI
claude --version
# 預期輸出：最新穩定版

# 步驟 1：從 PyPI 安裝 SuperClaude CLI
pipx install superclaude

# 步驟 2：安裝所有 30 個 Slash 指令到 Claude Code
superclaude install

# 步驟 3：驗證安裝結果
superclaude install --list    # 列出已安裝的指令
superclaude doctor            # 執行健康檢查

🔍 SuperClaude Health Check
━━━━━━━━━━━━━━━━━━━━━━━━━━
✅ SuperClaude CLI: v4.3.0
✅ Claude Code CLI: detected
✅ Slash Commands: 30/30 installed
✅ Configuration: valid
⚠️ MCP Servers: 0/8 installed (optional)
━━━━━━━━━━━━━━━━━━━━━━━━━━
Status: HEALTHY (MCP optional)

# 步驟 1：Clone 儲存庫
git clone https://github.com/SuperClaude-Org/SuperClaude_Framework.git

# 步驟 2：進入目錄並執行安裝
cd SuperClaude_Framework
./install.sh

# 步驟 3：驗證
superclaude doctor

# 全域安裝
npm install -g @bifrost_inc/superclaude

# 安裝指令
superclaude install

# 驗證
superclaude doctor

pip install SuperClaude
superclaude install
superclaude doctor

# 列出所有可用的 MCP Servers 及其狀態
superclaude mcp --list

# 互動式安裝（會引導你選擇要安裝的 Server）
superclaude mcp

# 安裝指定的 MCP Servers（建議先安裝這兩個）
superclaude mcp --servers tavily --servers context7

# 安裝全部 MCP Servers
superclaude mcp --all

# 申請 Tavily API Key（免費方案每月 1000 次查詢）
# 至 https://tavily.com 註冊

# 設定 API Key
export TAVILY_API_KEY="tvly-your-api-key-here"

# 或加入 .env 檔案
echo 'TAVILY_API_KEY=tvly-your-api-key-here' >> .env

superclaude doctor

# 啟動 Claude Code
claude

# 在對話中輸入
/sc

# 測試說明指令
/sc:help

# 測試簡單實作指令
/sc:explain "什麼是 RESTful API 的最佳設計原則？"

# 測試 Research 功能（需要 Tavily MCP）
/sc:research "Node.js 20 LTS 主要新特性" --depth quick

使用者輸入 /sc:implement "使用者登入 API"
  ↓
Claude Code 讀取 ~/.claude/commands/implement.md
  ↓
implement.md 定義：需求分析 → 程式碼生成 → 測試建立 → 品質檢查
  ↓
Claude 依指令執行完整的實作流程

<!-- CLAUDE.md 範例結構 -->
# 專案名稱：電商平台 EShop

## 角色設定
你是一位資深全端工程師，專精 React + Node.js + PostgreSQL 技術棧。

## 絕對規則
1. 所有 API 必須實作身份驗證與授權檢查
2. 不得在前端存放敏感資訊（API Key、密碼等）
3. 所有資料庫查詢必須使用參數化查詢，防止 SQL Injection
4. 每個功能必須附帶單元測試
5. 程式碼風格遵循專案 ESLint/Prettier 配置

## 技術棧
- Frontend: React 18 + TypeScript 5.x + Tailwind CSS 3
- Backend: Node.js 20 + Express 4 + Prisma ORM
- Database: PostgreSQL 16
- Testing: Vitest + React Testing Library + Supertest
- CI/CD: GitHub Actions

## 程式碼慣例
- 使用 TypeScript strict mode
- React 元件使用 Function Component + Hooks
- API 路由遵循 RESTful 設計
- 錯誤處理使用統一的 ErrorHandler middleware

## 參考文件
- 閱讀 PLANNING.md 了解架構決策
- 閱讀 TASK.md 了解當前任務
- 閱讀 KNOWLEDGE.md 參考已知問題與解法

.claude/
├── settings.json          # Claude Code 本地設定
├── commands/              # 自訂指令模板
│   ├── custom-review.md   # 團隊自訂的 Code Review 指令
│   └── deploy-check.md    # 部署前檢查指令
└── contexts/              # 額外上下文文件
    ├── api-standards.md   # API 設計標準
    └── security-rules.md  # 資安規範

# .env.example — 複製為 .env 並填入實際值

# MCP Server API Keys
TAVILY_API_KEY=tvly-your-key-here
CONTEXT7_API_KEY=your-key-here

# SuperClaude 設定
SC_DEFAULT_MODE=standard           # 預設行為模式
SC_TOKEN_BUDGET=auto               # Token 預算管理（auto / strict / unlimited）
SC_RESEARCH_DEPTH=standard         # 預設研究深度（quick / standard / deep / exhaustive）
SC_AUTO_SAVE=true                  # 是否自動儲存 Session
SC_LOG_LEVEL=info                  # 記錄層級（debug / info / warn / error）

# 架構設計原則

## 絕對規則（不可違反）
1. 資料庫 Schema 變更必須透過 Migration，禁止手動修改
2. 所有外部 API 呼叫必須有 Retry + Circuit Breaker 機制
3. 敏感資料必須加密儲存，傳輸必須使用 TLS

## 架構決策紀錄（ADR）

### ADR-001：選擇 PostgreSQL 作為主資料庫
- **日期**：2026-01-15
- **狀態**：已採用
- **情境**：需要支援 JSONB、全文搜尋、高併發
- **決策**：採用 PostgreSQL 16，搭配 Prisma ORM
- **後果**：團隊需學習 PostgreSQL 進階功能

### ADR-002：前端狀態管理採用 Zustand
- **日期**：2026-01-20
- **狀態**：已採用
- **情境**：Redux 過於冗長，需要輕量方案
- **決策**：採用 Zustand，搭配 React Query 處理 Server State

# 當前任務

## 🔴 P0（必須立即處理）
- [ ] 修復使用者登入 Token 過期未自動更新的問題 (#142)

## 🟡 P1（本週完成）
- [ ] 實作商品搜尋 API（含分頁、篩選、排序）
- [ ] 前端商品列表頁面元件開發
- [x] 資料庫 Schema 設計審查 ✅ 2026-03-10

## 🟢 P2（本月完成）
- [ ] 訂單模組 API 設計
- [ ] 整合第三方支付（綠界/藍新）
- [ ] E2E 測試框架建置

# 專案知識庫

## 已知問題與解法

### Prisma 連線池耗盡
- **現象**：高併發時出現 `P2024: Connection pool timeout` 
- **原因**：預設連線池大小 10 不足
- **解法**：在 `DATABASE_URL` 加入 `?connection_limit=20&pool_timeout=30`

### React Hydration Mismatch
- **現象**：SSR 與 CSR 渲染結果不一致
- **原因**：使用了 `Date.now()` 等非確定性值
- **解法**：使用 `useEffect` 處理客戶端專屬邏輯

## 效能基準
- API 回應時間目標：P95 < 200ms
- 首頁 LCP：< 2.5 秒
- 資料庫查詢：單次查詢 < 50ms

# 步驟 1：在專案根目錄建立設定文件
cd your-web-project

# 步驟 2：建立 CLAUDE.md（最重要）
touch CLAUDE.md

# 步驟 3：建立輔助文件
touch PLANNING.md TASK.md KNOWLEDGE.md

# 步驟 4：建立 .claude 目錄（可選）
mkdir -p .claude/commands .claude/contexts

# 步驟 5：更新 .gitignore
echo '.env' >> .gitignore
echo '.claude/settings.json' >> .gitignore

<!-- CLAUDE.md 團隊模板 -->
# {專案名稱}

## 團隊規範
- 遵循 {團隊名稱} 編碼標準
- Commit Message 格式：`type(scope): description`
  - type: feat / fix / refactor / docs / test / chore
- PR 至少需要 1 位 Reviewer 批准
- 分支命名：`feature/xxx`, `bugfix/xxx`, `hotfix/xxx`

## 技術棧
{請根據專案填入}

## 安全性要求
1. OWASP Top 10 防護
2. 所有使用者輸入必須驗證與消毒
3. API 必須實作 Rate Limiting
4. 敏感操作必須記錄 Audit Log

## SuperClaude 使用規範
- 使用 `/sc:implement` 前先確認 TASK.md 中的任務優先順序
- 使用 `/sc:git` 提交前先執行 `/sc:analyze` 進行程式碼品質檢查
- 每日工作結束前使用 `/sc:save` 儲存 Session
- 遇到難題先使用 `/sc:research` 調研再動手實作

# .claude/mcp-config.yaml
gateway:
  port: 3100
  log_level: info

servers:
  tavily:
    enabled: true
    api_key: ${TAVILY_API_KEY}
    rate_limit: 100/hour
    
  context7:
    enabled: true
    api_key: ${CONTEXT7_API_KEY}
    cache_ttl: 3600  # 快取 1 小時
    
  sequential-thinking:
    enabled: true
    max_steps: 10
    timeout: 30s
    
  serena:
    enabled: true
    storage_path: .claude/sessions/
    max_sessions: 50

  playwright:
    enabled: false  # 依需要啟用
    browsers:
      - chromium
      - firefox

# 驗證所有已安裝 MCP Server 的連線狀態
superclaude mcp --status

# 預期輸出：
# ✅ Tavily: connected (API quota: 850/1000)
# ✅ Context7: connected
# ✅ Sequential-Thinking: connected
# ✅ Serena: connected (sessions: 12)
# ❌ Playwright: not configured
# ❌ Magic: not installed
# ❌ Morphllm: not installed
# ❌ Chrome DevTools: not installed

// .claude/custom-mcp/internal-api.ts
import { MCPServer } from '@modelcontextprotocol/sdk';

const server = new MCPServer({
  name: 'internal-api',
  version: '1.0.0',
  description: '公司內部 API 查詢工具',
});

server.addTool({
  name: 'query_internal_docs',
  description: '查詢公司內部技術文件',
  parameters: {
    query: { type: 'string', description: '搜尋關鍵字' },
  },
  handler: async ({ query }) => {
    // 呼叫內部文件 API
    const response = await fetch(`https://docs.internal.company/api/search?q=${encodeURIComponent(query)}`);
    return await response.json();
  },
});

server.start();

/sc:brainstorm "<主題描述>" [--perspectives <數量>] [--format <格式>]

# 範例 1：探索新功能需求
/sc:brainstorm "電商平台的會員忠誠度系統設計方案"

# 範例 2：指定多角度分析
/sc:brainstorm "前端狀態管理方案選型（Redux vs Zustand vs Jotai）" --perspectives 5

# 範例 3：產出特定格式
/sc:brainstorm "微服務拆分策略" --format mindmap

/sc:design "<設計需求>" [--scope <範圍>] [--pattern <設計模式>]

# 範例 1：完整系統架構設計
/sc:design "電商平台整體架構設計，需支援 10 萬日活用戶"

# 範例 2：指定設計範圍
/sc:design "使用者認證授權模組設計" --scope module

# 範例 3：指定設計模式
/sc:design "訂單處理系統" --pattern "event-driven microservice"

/sc:estimate "<估算目標>" [--team-size <人數>] [--granularity <粒度>]

# 範例 1：MVP 工作量估算
/sc:estimate "電商平台 MVP 版本：使用者註冊登入 + 商品展示 + 購物車 + 結帳"

# 範例 2：指定團隊規模
/sc:estimate "從 REST API 遷移至 GraphQL" --team-size 3

# 範例 3：細粒度估算
/sc:estimate "實作即時通知系統（WebSocket + Push Notification）" --granularity detailed

/sc:spec-panel [spec|@file] [--mode discussion|critique|socratic] [--experts "name1,name2"] [--focus requirements|architecture|testing|compliance] [--iterations N]

# 範例 1：API 規格審查（批判模式）
/sc:spec-panel @auth_api.spec.yml --mode critique --focus requirements,architecture

# 範例 2：需求工作坊（討論模式）
/sc:spec-panel "使用者故事內容" --mode discussion --experts "wiegers,adzic,cockburn"

# 範例 3：學習式問答
/sc:spec-panel @my_first_spec.yml --mode socratic --iterations 2

# 範例 4：迭代改善（3 輪）
/sc:spec-panel @complex_system.spec.yml --iterations 3 --format detailed

/sc:implement "<實作需求>" [--lang <語言>] [--framework <框架>] [--with-tests]

# 範例 1：API 端點實作
/sc:implement "使用者註冊 API：接收 email/password，驗證格式，bcrypt 加密密碼，存入 PostgreSQL" --with-tests

# 範例 2：React 元件實作
/sc:implement "商品卡片元件：顯示圖片、名稱、價格、評分，支援加入購物車"

# 範例 3：完整 CRUD 模組
/sc:implement "商品管理 CRUD API（Create/Read/Update/Delete），含分頁查詢與關鍵字搜尋"

/sc:build "<建置需求>" [--target <目標>]

# 範例 1：Docker 化
/sc:build "建立多階段 Dockerfile，支援開發與生產環境"

# 範例 2：CI/CD Pipeline
/sc:build "GitHub Actions CI Pipeline：Lint → Test → Build → Deploy to Staging"

# 範例 3：建置腳本優化
/sc:build "優化 Webpack 建置：實作 Code Splitting、Tree Shaking、壓縮"

/sc:improve "<檔案或程式碼區塊>" [--focus <改善面向>]

# 範例 1：效能改善
/sc:improve "src/services/productService.ts" --focus performance

# 範例 2：安全性改善
/sc:improve "src/middleware/auth.ts" --focus security

# 範例 3：可讀性改善
/sc:improve "src/utils/dataTransform.ts" --focus readability

/sc:cleanup "<清理目標>" [--scope <範圍>] [--aggressive]

# 範例 1：單一檔案清理
/sc:cleanup "src/components/Dashboard.tsx"

# 範例 2：目錄級清理
/sc:cleanup "src/api/" --scope directory

# 範例 3：積極清理（含重構）
/sc:cleanup "src/legacy/" --aggressive

/sc:explain "<檔案或程式碼區塊>" [--depth <深度>] [--audience <對象>]

# 範例 1：解釋複雜邏輯
/sc:explain "src/services/paymentService.ts" --depth detailed

# 範例 2：給新手的解釋
/sc:explain "src/middleware/rateLimiter.ts" --audience junior

# 範例 3：解釋特定函式
/sc:explain "src/utils/jwt.ts#verifyToken 函式的工作流程"

/sc:test "<測試目標>" [--type <測試類型>] [--coverage <覆蓋率目標>]

# 範例 1：產生單元測試
/sc:test "src/services/userService.ts" --type unit

# 範例 2：產生 API 整合測試
/sc:test "src/routes/products.ts" --type integration

# 範例 3：高覆蓋率測試
/sc:test "src/utils/validators.ts" --coverage 95

/sc:analyze "<分析目標>" [--focus <分析面向>] [--report <報告格式>]

# 範例 1：全面安全性分析
/sc:analyze "src/" --focus security

# 範例 2：效能分析
/sc:analyze "src/services/" --focus performance --report detailed

# 範例 3：程式碼品質分析
/sc:analyze "src/components/" --focus quality

/sc:troubleshoot "<問題描述>" [--context <額外資訊>]

# 範例 1：API 問題排查
/sc:troubleshoot "POST /api/orders 在高併發時偶爾回傳 500 錯誤"

# 範例 2：附帶錯誤日誌
/sc:troubleshoot "使用者登入後 JWT Token 驗證失敗" --context "錯誤訊息：TokenExpiredError: jwt expired"

# 範例 3：效能問題排查
/sc:troubleshoot "商品列表頁面首次載入需要 5 秒以上"

/sc:reflect [--scope <回顧範圍>] [--period <時間範圍>]

# 範例 1：今日工作回顧
/sc:reflect --scope today

# 範例 2：模組開發回顧
/sc:reflect "使用者認證模組的開發品質回顧"

# 範例 3：Sprint 回顧
/sc:reflect --scope sprint --period "2026-03-01 to 2026-03-14"

/sc:document "<文件需求>" [--type <文件類型>] [--format <格式>]

# 範例 1：API 文件
/sc:document "src/routes/" --type api --format openapi

# 範例 2：README 生成
/sc:document "為專案產生完整的 README.md"

# 範例 3：架構文件
/sc:document "系統架構技術文件，含架構圖與元件說明" --type architecture

/sc:help [<指令名稱>]

# 範例 1：查看所有指令
/sc:help

# 範例 2：查看特定指令用法
/sc:help implement

# 範例 3：查看 Flags 說明
/sc:help flags

/sc:git "<操作描述>" [--action <動作>]

# 範例 1：產生 Commit Message
/sc:git "為當前變更產生 Conventional Commit Message"

# 範例 2：分支管理
/sc:git "建立 feature/user-auth 分支並設定上游追蹤" --action branch

# 範例 3：Release 準備
/sc:git "準備 v1.2.0 Release：產生 CHANGELOG、建立 Tag" --action release

# 範例 4：合併策略建議
/sc:git "feature/payment 分支合併回 main 的最佳策略"

/sc:pm "<管理需求>" [--view <視圖>]

# 範例 1：專案狀態總覽
/sc:pm "顯示當前專案狀態摘要"

# 範例 2：風險評估
/sc:pm "評估本季度交付風險" --view risk

# 範例 3：進度報告
/sc:pm "產出本週 Sprint 進度報告"

/sc:task "<任務操作>" [--priority <優先級>] [--assignee <負責人>]

# 範例 1：新增任務
/sc:task "新增：實作商品搜尋 API" --priority P1

# 範例 2：更新任務狀態
/sc:task "完成：使用者認證模組 (#142)"

# 範例 3：查看任務儀表板
/sc:task "顯示所有進行中的任務"

/sc:workflow "<工作流程定義>" [--template <模板>]

# 範例 1：完整開發流程
/sc:workflow "新功能開發流程：設計 → 實作 → 測試 → Review → 文件"

# 範例 2：使用預設模板
/sc:workflow "bug-fix" --template hotfix

# 範例 3：CI/CD 工作流程
/sc:workflow "設定 GitHub Actions：PR 觸發 → Lint → Test → Build → Deploy Preview"

/sc:research "<研究主題>" [--depth <深度>] [--sources <來源數>]

# 範例 1：技術調研
/sc:research "2026 年前端框架效能比較（React vs Vue vs Svelte vs Solid）"

# 範例 2：深度研究
/sc:research "WebAuthn / Passkey 在電商平台的實作最佳實踐" --depth deep

# 範例 3：快速查詢
/sc:research "Node.js 20 的 Permission Model 使用方式" --depth quick

/sc:business-panel [content|@file] [--experts "porter,christensen"] [--mode discussion|debate|socratic] [--focus domain] [--synthesis-only]

# 範例 1：商業計畫分析
/sc:business-panel @business_plan.md

# 範例 2：競爭分析（指定專家）
/sc:business-panel @market_analysis.md --experts "porter,christensen" --focus "competitive-analysis"

# 範例 3：策略壓力測試
/sc:business-panel @strategy.md --mode debate

# 範例 4：僅產出綜合結論
/sc:business-panel @pitch_deck.md --synthesis-only

# 範例 1：指定資安代理人
/sc:agent security "審查這段認證程式碼的安全性"

# 範例 2：指定效能代理人
/sc:agent performance "分析這個 SQL 查詢的效能瓶頸"

# 範例 1：完整索引
/sc:index-repo

# 範例 2：僅索引特定目錄
/sc:index-repo --path src/

/sc:index

# 範例 1：描述你的需求
/sc:recommend "我想要改善這段程式碼的效能"
# 推薦：/sc:improve --focus performance

# 範例 2：
/sc:recommend "我需要為明天的 Demo 準備文件"
# 推薦：/sc:document --type readme

# 範例：
/sc:select-tool "我需要查詢 React 18 的 useTransition API 文件"
# 選擇：Context7 MCP → 查詢官方 React 文件

# 範例 1：平行產出測試
/sc:spawn "為 src/services/ 下的所有檔案產出單元測試"

# 範例 2：平行分析
/sc:spawn "同時分析 frontend/ 和 backend/ 的程式碼品質"

# 範例：
/sc:load "電商平台開發 - Day 3 進度"

# 範例：
/sc:save "電商平台開發 - Day 4 API 模組完成"

/sc

# 語法
@agent-<代理人名稱> "<任務描述>"

# 範例
@agent-security "審查 src/middleware/auth.ts 的 OWASP 合規性"
@agent-python-expert "優化這段資料處理管線"
@agent-quality-engineer "建立完整測試套件"
@agent-socratic-mentor "解釋這個設計模式"

# 語法
/sc:agent <代理人名稱> "<任務描述>"

# 範例
/sc:agent security "審查認證模組"
/sc:agent frontend "設計響應式導覽元件"

任務流程：
1. 使用者請求 → 自動啟動選擇專業代理人
2. 專業代理人 → 執行實作（backend-architect, frontend-architect 等）
3. pm-agent（自動觸發）→ 記錄學習內容至 docs/
4. 知識庫 → 更新模式、錯誤、改進項目

@agent-backend "實作訂單服務：建立訂單、查詢訂單、更新狀態、庫存扣減"

@agent-frontend "設計電商平台的前端元件架構，包含商品展示、購物車、結帳流程"

@agent-devops "建立完整的 CI/CD Pipeline：PR 檢查 → 自動測試 → Staging 部署 → 手動核准 → Production 部署"

/sc:research "比較 Socket.io vs ws vs Bun WebSocket 在即時通知場景的效能與穩定性" --depth deep

# 步驟 1：requirements-analyst 分析需求
@agent-requirements-analyst "將『商品搜尋功能』拆解成可執行的開發任務與驗收標準"

# 步驟 2：system-architect 設計方案
@agent-system-architect "商品搜尋功能的技術方案：全文搜尋引擎選型與架構"

# 步驟 3：backend-architect 設計 API
@agent-backend "設計商品搜尋 API：支援關鍵字搜尋、分類篩選、價格範圍、排序、分頁"

# 步驟 4：backend-architect 設計索引
@agent-backend "為商品搜尋設計 PostgreSQL 全文索引（tsvector + GIN index）"

# 步驟 5：實作後端
/sc:implement "商品搜尋 API 實作，使用 PostgreSQL 全文搜尋"

# 步驟 6：實作前端
/sc:implement "商品搜尋頁面元件：搜尋框、篩選面板、結果列表、分頁"

# 步驟 7：quality-engineer 測試
/sc:test "商品搜尋功能完整測試：單元測試 + API 整合測試"

# 步驟 8：performance-engineer 優化
@agent-performance-engineer "分析商品搜尋在大量資料（100 萬筆商品）下的效能"

/sc:brainstorm "主題"
# 或手動切換
切換到腦力激盪模式

## 🧠 腦力激盪：即時通知系統方案

### 方案 1：WebSocket + Redis Pub/Sub
- 優點：低延遲、雙向通訊
- 缺點：需維護連線狀態

### 方案 2：Server-Sent Events (SSE)
- 優點：簡單、HTTP 原生支援
- 缺點：單向通訊

### 方案 3：Long Polling
- 優點：全瀏覽器相容
- 缺點：資源浪費、延遲較高

### 方案 4：Third-Party Service (Firebase / Pusher)
- 優點：免維護基礎設施
- 缺點：供應商鎖定、成本

### 方案 5：GraphQL Subscription
- 優點：與現有 GraphQL 整合
- 缺點：複雜度較高

/sc:business-panel "主題"

/sc:research "主題"

/sc:workflow "流程定義"
# 或自動觸發於複雜多步驟任務

/sc:workflow "實作完整的使用者認證功能：
1. 設計 API 規格
2. 建立資料庫 Schema
3. 實作後端 API
4. 實作前端登入頁面
5. 撰寫測試
6. 安全性審查
7. 產出文件"

# 建議在長對話中主動啟用
請切換到 Token-Efficiency Mode

/sc:task "顯示任務"
/sc:pm "管理專案"

/sc:reflect

## 🔍 自省報告

### 做得好的部分
- API 設計遵循 RESTful 慣例
- 測試覆蓋率達 85%

### 需要改善的部分
- 錯誤處理不夠一致（部分 API 直接拋出 500）
- 缺少 Rate Limiting Middleware
- 部分 SQL 查詢未使用索引

### 技術債清單
1. [高] auth middleware 重構（硬編碼 Token 過期時間）
2. [中] 統一錯誤回應格式
3. [低] 移除未使用的套件依賴

# 確認某個 API 的用法
/sc:research "React useOptimistic Hook 的使用方式與限制" --depth quick

# 查詢特定版本的 Breaking Changes
/sc:research "Prisma 6.0 Breaking Changes 列表" --depth quick

# 技術方案調研
/sc:research "Node.js 後端框架比較：Express vs Fastify vs Hono vs Elysia"

# 最佳實踐整理
/sc:research "React Server Components 在生產環境的最佳實踐與常見陷阱"

# 安全性研究
/sc:research "JWT 身份驗證的安全最佳實踐（2026 年更新版）"

# 架構決策研究
/sc:research "微服務 vs Modular Monolith：中小型電商平台的最佳架構選擇" --depth deep

# 效能研究
/sc:research "PostgreSQL vs MongoDB 在電商場景下的效能、擴展性與維運成本比較" --depth deep

# 新技術全面評估
/sc:research "WebAssembly 在伺服器端的應用案例、效能基準與成熟度分析" --depth exhaustive

# 競品分析
/sc:research "Shopify、WooCommerce、Magento 技術架構深度比較與演進趨勢" --depth exhaustive

## 📋 研究報告：JWT vs Session-based 認證比較

> 信心指數：0.87 | 來源數：18 | 搜尋深度：Standard

### 摘要
（2-3 句話的研究結論）

### 詳細比較

| 面向 | JWT | Session-based |
|------|-----|--------------|
| 可擴展性 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ |
| 安全性 | ⭐⭐⭐ | ⭐⭐⭐⭐ |
| 實作複雜度 | ⭐⭐⭐ | ⭐⭐ |
| Token 撤銷 | ⭐⭐ | ⭐⭐⭐⭐⭐ |
| 適用場景 | SPA、微服務 | 傳統 Web、需要即時撤銷 |

### 建議
根據我們的電商平台需求（需支援行動端 + Web）...

### 參考來源
1. [來源標題](URL) — 可信度：高
2. [來源標題](URL) — 可信度：中高
...

# Step 1：腦力激盪探索需求
/sc:brainstorm "電商平台 MVP 核心功能需求清單"

# Step 2：規格分析
/sc:spec-panel "使用者認證模組完整規格：註冊、登入、忘記密碼、OAuth、2FA"

# Step 3：工作量估算
/sc:estimate "電商平台 MVP 版本開發工作量，3 人團隊" --granularity detailed

# Step 4：建立任務清單
/sc:task "根據估算結果建立 Sprint Backlog"

# Step 1：技術調研
/sc:research "2026 年全端 Web 開發技術棧推薦（React/Next.js + Node.js/Bun + PostgreSQL）" --depth standard

# Step 2：架構設計
/sc:design "電商平台前後端分離架構設計，需支援 10 萬 DAU"

# Step 3：技術選型評估
/sc:business-panel "技術選型評估：Next.js 14 vs Remix vs Nuxt 3 作為前端框架"

# Step 4：API 規格設計
@agent-backend "設計電商平台核心 API：商品、購物車、訂單、使用者"

# Step 5：資料庫設計
@agent-backend "設計電商平台 PostgreSQL Schema，含 ER 圖"

# Step 1：後端 — 使用者認證
/sc:implement "使用者認證 API：
- POST /api/auth/register（註冊）
- POST /api/auth/login（登入，回傳 JWT）
- POST /api/auth/refresh（更新 Token）
- POST /api/auth/logout（登出）
使用 bcrypt 加密密碼，JWT + Refresh Token 雙 Token 機制" --with-tests

# Step 2：後端 — 商品 CRUD
/sc:implement "商品管理 API（CRUD + 搜尋 + 分頁），使用 Prisma ORM"

# Step 3：前端 — 登入頁面
/sc:implement "React 登入頁面元件：
- Email/Password 表單
- 表單驗證（react-hook-form + zod）
- 錯誤顯示
- 登入 API 呼叫
- JWT Token 儲存至 httpOnly Cookie"

# Step 4：前端 — 商品列表
/sc:implement "商品列表頁面：
- 搜尋框
- 分類篩選側欄
- 商品卡片網格
- 無限滾動分頁
- 載入骨架屏（Skeleton）"

# Step 5：Docker 配置
/sc:build "建立開發環境 Docker Compose：
- Node.js App（Hot Reload）
- PostgreSQL 16
- Redis（Session/Cache）
- Adminer（DB 管理 UI）"

# Step 1：單元測試
/sc:test "src/services/authService.ts" --type unit --coverage 90

# Step 2：API 整合測試
/sc:test "src/routes/products.ts" --type integration

# Step 3：安全性分析
/sc:analyze "src/" --focus security

# Step 4：效能分析
/sc:analyze "src/services/" --focus performance

# Step 5：程式碼品質整體審查
/sc:analyze "src/" --focus quality --report detailed

# Step 6：問題排查（如有問題）
/sc:troubleshoot "POST /api/orders 在壓力測試時偶爾回傳 503"

# Step 1：API 文件
/sc:document "src/routes/" --type api --format openapi

# Step 2：README 更新
/sc:document "更新 README.md，包含專案說明、快速開始、API 概覽"

# Step 3：CI/CD Pipeline
/sc:build "GitHub Actions CI/CD：
- PR 觸發：Lint → Test → Build
- main 合併：Build → Deploy to Staging
- 手動核准：Deploy to Production"

# Step 4：Git Release
/sc:git "準備 v1.0.0 Release：產生 CHANGELOG、建立 Tag"

# Step 5：品質回顧
/sc:reflect "MVP 版本開發品質回顧"

# 日常工作結束時儲存
/sc:save "電商平台 - Sprint 1 Day 3：完成使用者認證 API + 前端登入頁面"

# 里程碑儲存
/sc:save "電商平台 MVP - Phase 2 完成：架構設計 + DB Schema 定案"

# 隔天繼續工作
/sc:load "電商平台 - Sprint 1 Day 3：完成使用者認證 API + 前端登入頁面"

/sc:brainstorm "SaaS 專案管理工具，核心功能：專案看板、任務指派、時間追蹤、報表"
/sc:design "前後端分離架構：Next.js 14 + Hono + PostgreSQL + Redis"
/sc:estimate "3 人全端團隊，MVP 開發期程"

/sc:workflow "使用者認證功能完整實作：
1. API 設計（RESTful）
2. DB Schema（users, sessions, refresh_tokens）
3. 後端實作（JWT + Refresh Token + bcrypt）
4. 前端登入/註冊頁面
5. 單元 + 整合測試
6. 安全性審查"

/sc:troubleshoot "GET /api/products 在 10 萬筆資料下回應時間 > 2 秒"
@agent-performance-engineer "分析商品列表 API 效能瓶頸，提供優化方案"
/sc:improve "src/services/productService.ts" --focus performance

/sc:research "台灣主流金流服務比較：綠界 vs 藍新 vs LINE Pay" --depth standard
@agent-backend "設計綠界金流整合方案：建立訂單→導向付款→回調通知→更新狀態"
/sc:implement "綠界金流 API 整合 Service，含 AES 加解密與交易驗證"

@agent-backend "設計從 MongoDB 遷移至 PostgreSQL 的方案，保留所有現有資料"
/sc:estimate "MongoDB → PostgreSQL 遷移工作量" --granularity detailed
/sc:implement "資料遷移腳本：讀取 MongoDB → 轉換 Schema → 寫入 PostgreSQL"

/sc:analyze "src/components/" --focus performance
/sc:research "React 18 效能優化技巧：useMemo, useCallback, React.lazy, Suspense" --depth quick
/sc:improve "src/pages/ProductList.tsx" --focus performance

/sc:agent security "對整個專案進行 OWASP Top 10 安全性審查"
/sc:analyze "src/" --focus security --report detailed
/sc:implement "Rate Limiting Middleware：每 IP 每分鐘 100 次呼叫，登入端點 5 次/分鐘"

/sc:analyze "src/" --focus quality  # 最終品質檢查
/sc:agent security "生產部署前安全檢查清單"
/sc:build "Production Dockerfile 最佳化：多階段建置、最小映像檔"
/sc:document "建立部署手冊 DEPLOYMENT.md"

/sc:troubleshoot "使用者反映在特定時間登入會顯示 Session 過期錯誤" --context "問題發生在 UTC+8 凌晨 00:00~01:00 間"
/sc:implement "修復 JWT Token 時區處理問題" --with-tests
/sc:git "提交修復：fix(auth): 修正 JWT Token 時區計算錯誤 (#256)"

/sc:reflect "盤點專案中的技術債"
/sc:cleanup "src/legacy/" --aggressive
/sc:analyze "src/" --focus quality
/sc:document "更新技術債清單與處理優先序"

/sc:explain "src/" --depth detailed --audience junior
/sc:document "撰寫新人開發環境建置指南（Onboarding Guide）"
/sc:recommend "我是新加入的前端工程師，該從哪裡開始熟悉這個專案？"

/sc:pm "Sprint 5 規劃：盤點 Backlog 中優先級最高的 5 個 User Story"
/sc:estimate "Sprint 5 的 5 個 User Story 工作量估算" --team-size 3
/sc:task "建立 Sprint 5 的任務看板"

/sc:<指令> "任務描述" --flag1 value1 --flag2 value2

# 無 Flags（使用預設值）
/sc:implement "使用者登入 API"

# 有 Flags（精細控制）
/sc:implement "使用者登入 API" --lang typescript --framework express --with-tests --verbose

# 快速實作，不追求完美
/sc:implement "使用者註冊頁面原型" --quiet --framework react

# 完整實作，含測試與詳細輸出
/sc:implement "使用者認證 API" --with-tests --verbose --lang typescript --framework express

# 專注安全性的詳細分析報告
/sc:analyze "src/" --focus security --report detailed --output security-report.md

# 先預覽重構變更，不實際修改
/sc:cleanup "src/legacy/" --aggressive --dry-run

# 確認無誤後實際執行
/sc:cleanup "src/legacy/" --aggressive

# 在省 Token 模式下分析大量程式碼
/sc:analyze "src/" --focus quality --mode efficiency --quiet

/sc:document "src/routes/" --type api --format openapi --output docs/api-spec.yaml

# 完整健康檢查
superclaude doctor

# 預期輸出（健康狀態）：
# 🔍 SuperClaude Health Check v4.3.0
# ━━━━━━━━━━━━━━━━━━━━━━━━━━
# ✅ CLI Version: 4.2.0
# ✅ Claude Code: v1.x.x (connected)
# ✅ Slash Commands: 30/30 installed
# ✅ Configuration: CLAUDE.md found, valid
# ✅ MCP Tavily: connected (quota: 780/1000)
# ✅ MCP Context7: connected
# ✅ MCP Serena: connected (sessions: 24)
# ⚠️ MCP Playwright: not installed
# ⚠️ MCP Magic: not installed
# ⚠️ MCP Morphllm: not installed
# ⚠️ MCP Chrome DevTools: not installed
# ━━━━━━━━━━━━━━━━━━━━━━━━━━
# Status: HEALTHY
# Recommendations:
#   - Consider installing Playwright for E2E testing

# 列出所有已安裝的指令及其狀態
superclaude install --list

# 檢查單一指令
superclaude install --check implement

# 查看所有 MCP Server 狀態
superclaude mcp --status

# 測試 MCP 連線
superclaude mcp --test tavily
superclaude mcp --test context7

# Step 1：確認安裝狀態
superclaude install --list

# Step 2：強制重新安裝
superclaude install --force

# Step 3：重啟 Claude Code
# 完全關閉 Claude Code 後重新開啟

# Step 4：驗證
# 在 Claude Code 中輸入 /sc 確認

# Step 1：檢查連線狀態
superclaude mcp --status

# Step 2：測試個別 Server
superclaude mcp --test tavily

# Step 3：檢查 API Key
echo $TAVILY_API_KEY  # 確認環境變數已設定

# Step 4：重新安裝 MCP Server
superclaude mcp --servers tavily --reinstall

# 查看最近的 CLI 記錄
superclaude logs --tail 50

# 查看 MCP 記錄
superclaude logs --mcp --tail 20

# 輸出診斷報告（用於回報問題）
superclaude doctor --report > diagnostic-report.txt

# 產生問題報告
superclaude doctor --report

# 至 GitHub 提交 Issue
# https://github.com/SuperClaude-Org/SuperClaude_Framework/issues
# 附上 diagnostic-report.txt

# 方式 1：Git 版本控制（推薦）
# 以下文件應加入版本控制：
# ✅ CLAUDE.md
# ✅ PLANNING.md
# ✅ TASK.md
# ✅ KNOWLEDGE.md
# ✅ .claude/commands/ （自訂指令）
# ✅ .claude/contexts/ （額外上下文）
# ❌ .env （敏感資訊）
# ❌ .claude/settings.json （個人設定）
# ❌ .claude/sessions/ （Session 資料）

# 方式 2：手動備份
superclaude backup --output ~/superclaude-backup-$(date +%Y%m%d).tar.gz

# 匯出設定
superclaude config export > superclaude-config.json

# 在新機器匯入
superclaude config import superclaude-config.json

# 安裝指令與 MCP
superclaude install
superclaude mcp

# 查看目前版本
superclaude --version
# 輸出：superclaude v4.3.0

# 查看詳細版本資訊
superclaude --version --verbose
# 輸出：
# SuperClaude CLI: v4.3.0
# Commands Pack: v4.3.0
# MCP Pack: v4.1.3
# Claude Code: v1.x.x

# Step 1：查看可用更新
superclaude update --check

# Step 2：備份目前設定
superclaude backup --output ~/sc-backup-before-upgrade.tar.gz

# Step 3：升級 CLI
pipx upgrade superclaude

# Step 4：重新安裝指令（升級後必做）
superclaude install

# Step 5：更新 MCP Servers
superclaude mcp

# Step 6：驗證升級結果
superclaude doctor
superclaude --version

# Step 7：在 Claude Code 中測試
# 重啟 Claude Code 後輸入 /sc 確認所有指令可用

npm update -g @bifrost_inc/superclaude
superclaude install
superclaude doctor

cd SuperClaude_Framework
git fetch origin
git pull origin master
./install.sh
superclaude doctor

<!-- 團隊標準 CLAUDE.md 模板 v1.0 -->
# {專案名稱}

## 團隊資訊
- 團隊：{團隊名稱}
- Tech Lead：{姓名}
- 成員：{成員列表}

## 技術棧
- Frontend: {框架 + 版本}
- Backend: {框架 + 版本}
- Database: {資料庫 + 版本}
- IaC/Deploy: {部署工具}

## 編碼規範
1. 使用 TypeScript strict mode
2. 遵循 ESLint + Prettier 配置
3. Commit Message 格式：Conventional Commits
4. PR 描述必須包含：背景、變更、測試

## 安全性規範
1. 所有使用者輸入必須驗證
2. API 必須實作 Authentication + Authorization
3. 敏感資料加密儲存
4. SQL 查詢使用參數化
5. 禁止在前端存放 Secret

## SuperClaude 使用規範
1. implement 前先確認 TASK.md
2. 每個 implement 搭配 --with-tests
3. PR 前執行 /sc:analyze --focus security
4. 每日下班前 /sc:save
5. 遇到問題先 /sc:research 再動手

## 參考規範
- 架構規則：見 PLANNING.md
- 任務追蹤：見 TASK.md
- 知識庫：見 KNOWLEDGE.md

# PR 提交者在提交前執行：
/sc:analyze "src/changed-files/" --focus quality --report detailed
/sc:analyze "src/changed-files/" --focus security

# Reviewer 使用 SuperClaude 輔助審查：
/sc:explain "src/changed-files/" --depth detailed
@agent-quality-engineer "審查 PR：{PR 標題與描述}"

# 團隊知識庫

## 🐛 已知問題與解法
### {問題標題}
- **現象**：
- **原因**：
- **解法**：
- **日期**：
- **貢獻者**：

## 📐 架構決策紀錄（ADR）
### ADR-{NNN}：{決策標題}
- **日期**：
- **決策者**：
- **背景**：
- **方案**：
- **結論**：

## ⚡ 效能基準
- {指標}：{目標值}

## 🔒 安全性注意事項
- {注意事項}

## 💡 最佳實踐
- {實踐描述}

.claude/prompts/
├── auth/
│   ├── implement-jwt-auth.md
│   └── implement-oauth.md
├── testing/
│   ├── api-integration-test.md
│   └── e2e-test-setup.md
├── deployment/
│   ├── docker-setup.md
│   └── cicd-github-actions.md
└── review/
    ├── security-review.md
    └── performance-review.md

# 查看 Token 使用統計
superclaude stats --period monthly

# 預期輸出：
# 📊 Token Usage (2026-03)
# ━━━━━━━━━━━━━━━━━━━━━━
# Total: 1,254,800 tokens
# By Command:
#   implement: 420,000 (33%)
#   research:  310,000 (25%)
#   analyze:   180,000 (14%)
#   test:      150,000 (12%)
#   others:    194,800 (16%)
# Savings (via MCP): ~380,000 tokens (23%)

# 每月執行團隊效能回顧
/sc:reflect "本月團隊使用 SuperClaude 的效益回顧：
- 完成的功能數量
- 程式碼品質變化
- Token 用量效率
- 遇到的問題與改善建議"