Code Validator

---
name: code-validator
description: 驗證 maihouses 專案的 TypeScript/React 代碼品質，確保符合 CLAUDE.md 的最高規格標準。當修改或審查代碼時自動使用。
allowed-tools: Read, Grep, Bash, Edit
---

# Code Validator Skill

依照專案根目錄的 `CLAUDE.md` 規範驗證代碼品質。

## 🎯 執行時機

當以下情況發生時，Claude 會自動使用此 skill：

- 修改任何 `.ts` 或 `.tsx` 檔案後
- 用戶要求代碼審查
- 用戶要求檢查代碼品質
- 用戶提到「驗證」、「檢查」、「審查」等關鍵字

## 🚨 驗證項目

### 1. 禁止模式檢查

使用 Grep 搜尋以下禁止模式：

```bash
# 檢查 any 類型
Grep: pattern=": any\\b" glob="*.ts,*.tsx" output_mode="files_with_matches"

# 檢查 console.log (排除註解)
Grep: pattern="console\\.log\\(" glob="*.ts,*.tsx" output_mode="content"

# 檢查 @ts-ignore
Grep: pattern="@ts-ignore" glob="*.ts,*.tsx" output_mode="files_with_matches"

# 檢查 eslint-disable
Grep: pattern="eslint-disable" glob="*.ts,*.tsx" output_mode="files_with_matches"
```

### 2. TypeScript 類型檢查

```bash
npm run typecheck
```

必須通過，無任何類型錯誤。

### 3. ESLint 檢查

```bash
npm run lint
```

必須通過，無任何 linting 錯誤。

### 4. 代碼結構檢查

使用 Read 工具閱讀檔案，檢查：

- ✅ 所有 async 函數有 try-catch 錯誤處理
- ✅ 所有 API 呼叫有錯誤處理
- ✅ 變數命名有意義（不是 a, b, x, temp）
- ✅ 函數不超過 50 行
- ✅ 無重複代碼
- ✅ interface/type 定義清晰

### 5. React 特定檢查

- ✅ Props 有明確的 TypeScript interface
- ✅ Event handlers 有正確的類型（如 `React.MouseEvent<HTMLButtonElement>`）
- ✅ useState/useEffect 依賴正確
- ✅ 組件命名為 PascalCase

## 📋 回報格式

驗證完成後，必須提供以下格式的報告：

```markdown
## 代碼驗證報告

### 檔案：path/to/file.tsx

#### ✅ 通過項目

- TypeScript 類型檢查通過
- ESLint 檢查通過
- 無禁止模式

#### ❌ 發現問題

1. **行 42**: 使用了 `any` 類型
   - 建議：定義具體的 interface

2. **行 58**: 缺少錯誤處理
   - 建議：在 async 函數中加入 try-catch

#### 🔧 修復建議

[具體的修復步驟]

### 整體評分

- 類型安全: ⭐⭐⭐⭐⭐
- 錯誤處理: ⭐⭐⭐⭐☆
- 代碼風格: ⭐⭐⭐⭐⭐
```

## ⚠️ 重要提醒

1. **必須先 Read 再 Edit** - 永遠不要在沒有閱讀檔案的情況下修改
2. **完整閱讀相關檔案** - 包括類型定義、API 層、hooks、context
3. **逐項檢查** - 不可跳過任何驗證步驟
4. **發現問題立即回報** - 不可隱藏或繞過問題

## 🎓 參考規範

所有驗證標準基於：專案根目錄的 `CLAUDE.md`

違反任何規範即為驗證失敗。