一文彻底掌握.claude/目录(让Claude Code真正懂你的项目)

your-project/
├── .claude/
│   ├── settings.json          # 权限、MCP、环境变量配置
│   ├── settings.local.json    # 本地私有配置（不提交 git）
│   ├── rules/                 # 自动加载的规则文件（补充 CLAUDE.md）
│   │   ├── security.md
│   │   └── style.md
│   ├── commands/              # 斜杠命令（简单指令）
│   │   ├── commit.md
│   │   └── test.md
│   └── skills/                # 斜杠命令（复杂工作流）
│       ├── review.md
│       └── deploy.md
└── CLAUDE.md                  # 项目说明书（自动加载）

# 项目名称

## 技术栈
- React 18 + TypeScript + Vite
- 包管理器：pnpm（不要用 npm 或 yarn）
- 样式：Tailwind CSS

## 常用命令
pnpm dev        # 启动开发服务器（端口 3000）
pnpm build      # 构建生产版本
pnpm lint       # 代码检查

## 代码规范
- 组件文件：PascalCase（Button.tsx）
- 工具函数：camelCase（formatDate.ts）
- 新页面必须使用 React.lazy() 懒加载
- 禁止使用 any 类型

## 架构说明
- components/common/  → 通用基础组件
- components/features/ → 业务功能组件
- pages/              → 页面（懒加载）

## 注意事项
- 提交前必须通过 pnpm lint
- 不要修改 tailwind.config.js 的颜色变量

# Security Rules

- 所有用户输入必须经过验证和转义，防止 XSS
- 禁止在客户端代码中硬编码 API Key 或密码
- SQL 查询必须使用参数化查询，禁止字符串拼接
- 敏感数据（密码、token）禁止写入 console.log
- fetch 请求必须处理错误状态码

# Code Style Rules

- 函数超过 50 行必须拆分
- 禁止嵌套超过 3 层的 if/else，使用提前返回
- React 组件 props 必须用 interface 定义类型
- 禁止使用魔法数字，提取为具名常量
- 注释只写"为什么"，不写"是什么"

# Commit

分析暂存区的改动，生成符合 Conventional Commits 规范的提交信息并提交。

## 步骤
1. 运行 `git diff --staged` 查看改动
2. 根据改动类型选择 type：feat / fix / style / refactor / docs / chore
3. 用中文写 subject，不超过 50 字
4. 执行 git commit

# Test

运行测试套件并报告结果。

- 执行 `pnpm test`
- 如有失败，分析原因并给出修复建议
- 不要自动修改测试文件，先询问用户

/commit
/test
/commit 只提交 src/ 目录的改动

# Code Review

对当前改动进行全面的代码审查。

## 审查维度

### 1. 正确性
- 逻辑是否正确？边界条件是否处理？
- 有无潜在的 null/undefined 错误？

### 2. 安全性
- 是否存在 XSS、SQL 注入等风险？
- 用户输入是否经过验证？

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

### 4. 可维护性
- 函数是否单一职责？
- 命名是否清晰？

## 输出格式
用 Markdown 表格列出问题，包含：文件、行号、问题描述、严重程度（高/中/低）、修复建议。

# Deploy

执行完整的部署流程。

1. 运行 `pnpm lint` — 有错误则停止，不自动修复
2. 运行 `pnpm build` — 确认构建成功
3. 运行 `pnpm test` — 测试通过才继续
4. 询问用户确认：是否部署到生产环境？
5. 执行部署命令
6. 验证部署结果，访问健康检查接口

"Bash(pnpm *)"              # 允许所有 pnpm 命令
"Bash(git add:*)"           # 允许 git add（: 后为参数通配）
"WebFetch(domain:github.com)" # 只允许访问指定域名
"Skill(commit)"             # 允许调用指定 skill
"mcp__ide__getDiagnostics"  # 允许调用指定 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

你：帮我实现用户登录功能
Claude：（读取 CLAUDE.md 了解项目规范，按规范实现代码）

你：/review
Claude：（按 review.md 的维度进行代码审查，输出问题列表）

你：/lint
Claude：（运行 pnpm lint，修复发现的问题）

你：/commit
Claude：（分析改动，生成规范提交信息，执行 git commit）

# 项目名

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

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

## 规范
- TypeScript，禁止 any
- 组件 PascalCase，工具函数 camelCase
- 提交前必须通过 lint

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

# Lint
运行 pnpm lint，自动修复可修复的问题，不可修复的列出并解释原因。