# ai-skills

**Repository Path**: Guangloo/ai-skills

## Basic Information

- **Project Name**: ai-skills
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-10-30
- **Last Updated**: 2026-10-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# AI Skills

AI 开发技能集 — 面向 AI 编码助手（如 Claude Code）的开发工作流模板与最佳实践集合。

## 概述

本仓库包含一系列可复用的技能（Skills），每个技能对应一种特定开发场景的工作流模板。这些技能可被 AI 助手加载，帮助其以一致且高效的方式处理各类开发任务。

## 技能列表

| 技能 | 描述 |
|------|------|
| **Code Review** | 代码审查工具，从规范和需求两个维度审查变更 |
| **Grill Me** | 方案压力测试三件套，通过"盘问"验证方案可行性 |
| **Performance Optimization** | 性能优化工作流，包含测量、识别瓶颈、修复反模式 |
| **TDD** | 测试驱动开发模板，红-绿-重构循环实践 |
| **UI to Better** | 截图转 Vue 组件 + 界面细节打磨 |
| **Vite Patterns** | Vite 配置模式与最佳实践 |

## 快速开始

### 安装方式

#### 方式一：整体安装（推荐）

将整个仓库克隆到技能的默认目录：

```bash
# Claude Code
git clone https://gitee.com/Guangloo/ai-skills.git ~/.claude/skills/ai-skills
```

或按技能分别安装：

```bash
# 只安装某个技能
git clone https://gitee.com/Guangloo/ai-skills.git /path/to/skills
cp -r /path/to/skills/tdd ~/.claude/skills/tdd
```

#### 方式二：单文件安装

如只需某个技能的 `SKILL.md`，可直接复制对应文件：

```bash
# 复制 TDD 技能
cp tdd/SKILL.md ~/.claude/skills/tdd/SKILL.md
```

### 验证安装

安装完成后，AI 助手应能自动识别并使用这些技能处理对应场景。

## 技能详解

### Code Review

**使用场景**：审查分支、PR、进行中的变更，或要求"review since X"

从两个并行维度进行代码审查：
- **规范审查**：代码是否遵循既定编码规范
- **需求审查**：代码是否实现原始 issue/PRD 的要求

### Grill Me (方案压力测试)

**使用场景**：方案设计完成后的压力测试，验证方案可行性

三种测试模式：
- **Grill-me**：无状态盘问，快速验证
- **Grill-with-docs**：盘问 + 留痕，形成文档
- **Wayfinder**：超大 effort 时的决策地图

核心原则：一次一题、能查的事实自查、决策权归用户、达成共识前不行动。

### Performance Optimization

**使用场景**：存在性能需求、怀疑性能回归、需要改善 Core Web Vitals

工作流：
1. **测量**：Lighthouse、RUM、APM、日志
2. **识别瓶颈**：定位具体问题
3. **修复反模式**：N+1 查询、无界数据获取、重复渲染等
4. **验证**：性能预算检查

### TDD (测试驱动开发)

**使用场景**：测试优先构建功能或修复 Bug

遵循红-绿-重构循环，强调：
- 好的测试特征
- 测试隔离与Mock设计
- 常见反模式

### UI to Better

**使用场景**：将 UI 截图转换为 Vue 组件

两阶段流程：
1. **截图转组件**：AI 分析截图生成 Vue 代码
2. **Polish Pass**：光学对齐、阴影、字体平滑、动效等细节打磨

### Vite Patterns

**使用场景**：Vite 项目配置与构建优化

涵盖：
- 基础与条件配置
- 插件开发（HMR API）
- 环境变量安全
- 构建优化（Manual Chunks、预构建）
- 常见陷阱与反模式

## 目录结构

```
ai-skills/
├── code-review/
│   └── SKILL.md
├── grill-me-docs/
│   ├── README.md
│   └── SKILL.md
├── performance-optimization/
│   └── SKILL.md
├── tdd/
│   ├── SKILL.md
│   ├── mocking.md
│   └── tests.md
├── ui-to-better/
│   └── SKILL.md
└── vite-patterns/
    └── SKILL.md
```

## 相关资源

- [Claude Code](https://claude.com/claude-code) 
- [Vite 官方文档](https://vitejs.dev/)
- [Chrome DevTools Performance](https://developer.chrome.com/docs/devtools/performance)

## 许可

本仓库内容遵循各技能文件中所述的许可协议。