your-project/
├── .claude/
│   ├── settings.json          # 權(quán)限、MCP、環(huán)境變量配置
│   ├── settings.local.json    # 本地私有配置（不提交 git）
│   ├── rules/                 # 自動加載的規(guī)則文件（補充 CLAUDE.md）
│   │   ├── security.md
│   │   └── style.md
│   ├── commands/              # 斜杠命令（簡單指令）
│   │   ├── commit.md
│   │   └── test.md
│   └── skills/                # 斜杠命令（復(fù)雜工作流）
│       ├── review.md
│       └── deploy.md
└── CLAUDE.md                  # 項目說明書（自動加載）

# 項目名稱

## 技術(shù)棧
- React 18 + TypeScript + Vite
- 包管理器：pnpm（不要用 npm 或 yarn）
- 樣式：Tailwind CSS

## 常用命令
pnpm dev        # 啟動開發(fā)服務(wù)器（端口 3000）
pnpm build      # 構(gòu)建生產(chǎn)版本
pnpm lint       # 代碼檢查

## 代碼規(guī)范
- 組件文件：PascalCase（Button.tsx）
- 工具函數(shù)：camelCase（formatDate.ts）
- 新頁面必須使用 React.lazy() 懶加載
- 禁止使用 any 類型

## 架構(gòu)說明
- components/common/  → 通用基礎(chǔ)組件
- components/features/ → 業(yè)務(wù)功能組件
- pages/              → 頁面（懶加載）

## 注意事項
- 提交前必須通過 pnpm lint
- 不要修改 tailwind.config.js 的顏色變量

# Security Rules

- 所有用戶輸入必須經(jīng)過驗證和轉(zhuǎn)義，防止 XSS
- 禁止在客戶端代碼中硬編碼 API Key 或密碼
- SQL 查詢必須使用參數(shù)化查詢，禁止字符串拼接
- 敏感數(shù)據(jù)（密碼、token）禁止寫入 console.log
- fetch 請求必須處理錯誤狀態(tài)碼

# Code Style Rules

- 函數(shù)超過 50 行必須拆分
- 禁止嵌套超過 3 層的 if/else，使用提前返回
- React 組件 props 必須用 interface 定義類型
- 禁止使用魔法數(shù)字，提取為具名常量
- 注釋只寫"為什么"，不寫"是什么"

# Commit

分析暫存區(qū)的改動，生成符合 Conventional Commits 規(guī)范的提交信息并提交。

## 步驟
1. 運行 `git diff --staged` 查看改動
2. 根據(jù)改動類型選擇 type：feat / fix / style / refactor / docs / chore
3. 用中文寫 subject，不超過 50 字
4. 執(zhí)行 git commit

# Test

運行測試套件并報告結(jié)果。

- 執(zhí)行 `pnpm test`
- 如有失敗，分析原因并給出修復(fù)建議
- 不要自動修改測試文件，先詢問用戶

/commit
/test
/commit 只提交 src/ 目錄的改動

# Code Review

對當(dāng)前改動進行全面的代碼審查。

## 審查維度

### 1. 正確性
- 邏輯是否正確？邊界條件是否處理？
- 有無潛在的 null/undefined 錯誤？

### 2. 安全性
- 是否存在 XSS、SQL 注入等風(fēng)險？
- 用戶輸入是否經(jīng)過驗證？

### 3. 性能
- 是否有不必要的重渲染？
- 大列表是否做了虛擬化？

### 4. 可維護性
- 函數(shù)是否單一職責(zé)？
- 命名是否清晰？

## 輸出格式
用 Markdown 表格列出問題，包含：文件、行號、問題描述、嚴重程度（高/中/低）、修復(fù)建議。

# Deploy

執(zhí)行完整的部署流程。

1. 運行 `pnpm lint` — 有錯誤則停止，不自動修復(fù)
2. 運行 `pnpm build` — 確認構(gòu)建成功
3. 運行 `pnpm test` — 測試通過才繼續(xù)
4. 詢問用戶確認：是否部署到生產(chǎn)環(huán)境？
5. 執(zhí)行部署命令
6. 驗證部署結(jié)果，訪問健康檢查接口

"Bash(pnpm *)"              # 允許所有 pnpm 命令
"Bash(git add:*)"           # 允許 git add（: 后為參數(shù)通配）
"WebFetch(domain:github.com)" # 只允許訪問指定域名
"Skill(commit)"             # 允許調(diào)用指定 skill
"mcp__ide__getDiagnostics"  # 允許調(diào)用指定 MCP 工具

{
  "permissions": {
    "allow": [
      "Bash(pnpm install:*)",
      "Bash(pnpm dev:*)",
      "Bash(pnpm build:*)",
      "Bash(pnpm lint:*)",
      "Bash(pnpm add:*)",
      "Bash(pnpm tsc:*)",
      "Bash(git add:*)",
      "Bash(git commit:*)",
      "Bash(git push:*)",
      "Bash(git rm:*)",
      "Bash(git mv:*)",
      "Bash(npx playwright:*)",
      "WebSearch",
      "WebFetch(domain:api.github.com)",
      "mcp__ide__getDiagnostics",
      "mcp__context7__query-docs",
      "Skill(update-config)"
    ]
  }
}

.claude/
├── settings.json
├── commands/
│   ├── commit.md      →  /commit
│   └── lint.md        →  /lint
└── skills/
    ├── review.md      →  /review
    └── deploy.md      →  /deploy

你：幫我實現(xiàn)用戶登錄功能
Claude：（讀取 CLAUDE.md 了解項目規(guī)范，按規(guī)范實現(xiàn)代碼）

你：/review
Claude：（按 review.md 的維度進行代碼審查，輸出問題列表）

你：/lint
Claude：（運行 pnpm lint，修復(fù)發(fā)現(xiàn)的問題）

你：/commit
Claude：（分析改動，生成規(guī)范提交信息，執(zhí)行 git commit）

# 項目名

## 包管理器
pnpm（禁止使用 npm/yarn）

## 常用命令
pnpm dev / pnpm build / pnpm lint

## 規(guī)范
- TypeScript，禁止 any
- 組件 PascalCase，工具函數(shù) camelCase
- 提交前必須通過 lint

# Commit
查看 git diff --staged，生成 Conventional Commits 格式提交信息（中文 subject），執(zhí)行提交。

# Lint
運行 pnpm lint，自動修復(fù)可修復(fù)的問題，不可修復(fù)的列出并解釋原因。