| name | frontend-dev |
| description | 专业前端开发技能，支持 React/Vue/Next.js 组件开发、TypeScript 编码、状态管理、API 集成、性能优化、代码审查、单元测试、CI/CD 配置、Docker 部署。使用场景：生成组件代码、审查代码质量、调试问题、架构设计、性能优化、测试编写、项目脚手架、CI/CD 配置。 |
Frontend Development Skill
专业级前端研发技能，聚焦现代 Web 应用开发全流程。
核心能力
1. 组件开发
- React/Vue/Next.js 组件生成和重构
- TypeScript 类型定义和接口设计
- Hooks/Composables 封装
- 响应式设计和状态管理
- 自动生成测试文件 (Vitest + Testing Library)
2. 代码质量
- 代码审查（ESLint 规则、最佳实践）
- 性能优化建议（渲染优化、bundle 大小）
- 可访问性检查（WCAG 标准）
- 安全漏洞扫描（XSS、CSRF 防护）
- 增强的审查规则 (50+ 检查项)
3. 架构设计
- 项目结构规划
- 状态管理方案（Redux/Zustand/Pinia）
- API 集成模式（React Query/SWR）
- 微前端架构
- 5+ 完整项目案例参考
4. 工程化
- 构建配置（Vite/Webpack/Next.js）
- 测试策略（Jest/Vitest/Cypress/Playwright）
- CI/CD 流程 (GitHub Actions 模板)
- Docker 部署配置 (多阶段构建)
- 代码规范配置
工作流程
组件开发流程
1. 需求分析 → 2. 接口设计 → 3. 组件实现 → 4. 测试编写 → 5. 文档生成
对话式使用:
"帮我生成一个用户卡片组件，显示姓名、邮箱、头像，带编辑按钮"
AI 会自动调用 component_generator.py 生成完整代码（含测试）。
代码审查流程
1. 语法检查 → 2. 类型安全 → 3. 性能分析 → 4. 安全审计 → 5. 优化建议
对话式使用:
"帮我审查这段代码" [粘贴代码]
AI 会自动调用 code_reviewer.py 进行审查并给出修复建议。
项目创建流程
1. 选择框架 → 2. 配置选项 → 3. 生成脚手架 → 4. 安装依赖
对话式使用:
"帮我创建一个 Next.js 项目，用于 SaaS 仪表盘"
AI 会自动调用 project_scaffold.py 生成完整项目结构。
问题排查流程
1. 错误定位 → 2. 日志分析 → 3. 复现步骤 → 4. 根因分析 → 5. 修复方案
技术栈支持
核心框架
- React 18+: Hooks, Context, Server Components
- Vue 3+: Composition API, Pinia
- Next.js 14+: App Router, Server Actions
- Angular 15+: Standalone Components, Signals
语言
- TypeScript 5+ (严格模式)
- JavaScript ES2022+
样式
- Tailwind CSS
- CSS Modules
- Styled Components
- Sass/Less
构建工具
- Vite (首选)
- Webpack 5
- Turbopack
- Next.js Build
测试
- Vitest/Jest (单元测试)
- React Testing Library / Vue Test Utils
- Cypress/Playwright (E2E)
部署
- Docker (多阶段构建)
- Nginx (反向代理配置)
- Vercel/Netlify
- GitHub Pages
脚本工具
| 脚本 | 用途 | 示例 |
|---|
scripts/component_generator.py | 生成组件模板（含测试） | uv run python scripts/component_generator.py --type react --name UserProfile --props "name:string,email:string" |
scripts/code_reviewer.py | 代码审查（50+ 规则） | uv run python scripts/code_reviewer.py --file src/components/Button.tsx --strict |
scripts/project_scaffold.py | 项目脚手架（支持 Next.js） | uv run python scripts/project_scaffold.py --framework nextjs --name my-app |
scripts/dependency_checker.py | 依赖检查 | uv run python scripts/dependency_checker.py |
参考文档
| 文档 | 内容 |
|---|
references/coding_standards.md | 编码规范、命名约定、代码风格 |
references/component_patterns.md | 组件设计模式、最佳实践 (10+ 模式) |
references/performance_guide.md | 性能优化清单、指标监控 (Core Web Vitals) |
references/security_checklist.md | 安全检查清单、常见漏洞防护 (OWASP Top 10) |
references/testing_guide.md | 测试策略、用例编写指南 (单元/集成/E2E) |
references/project_examples.md | 5 个完整项目案例 (电商/SaaS/移动端/组件库/表单) |
references/dialogue_usage_guide.md | 🆕 对话式工具使用指南 (自然语言调用) |
项目模板
assets/templates/ 包含预配置的项目模板和配置：
框架模板
react-vite-ts/ - React + Vite + TypeScriptvue-vite-ts/ - Vue 3 + Vite + TypeScriptnextjs-app/ - Next.js 14 App Router
CI/CD 配置
github-ci.yml - GitHub Actions ( lint/test/build/deploy)dockerfile - Docker 多阶段构建docker-compose.yml - Docker Compose 配置nginx.conf - Nginx 生产配置
快速开始
生成新组件（含测试）
uv run python scripts/component_generator.py --type react --name Button --props "label:string,onClick:function,disabled:boolean"
生成文件:
Button.tsx - 组件实现Button.types.ts - 类型定义Button.module.css - 样式Button.test.tsx - 单元测试index.ts - 导出
审查代码
uv run python scripts/code_reviewer.py --file src/App.tsx --strict
创建新项目
uv run python scripts/project_scaffold.py --framework react --name my-app --build vite
uv run python scripts/project_scaffold.py --framework nextjs --name my-app
使用 CI/CD 模板
cp assets/templates/github-ci.yml .github/workflows/ci.yml
cp assets/templates/Dockerfile .
cp assets/templates/docker-compose.yml .
触发场景
对话式使用（推荐）
直接用自然语言描述需求，AI 会自动调用工具：
组件生成:
"帮我生成一个用户卡片组件，显示姓名、邮箱、头像，带编辑按钮"
代码审查:
"帮我审查这段代码有什么问题" [粘贴代码]
项目创建:
"创建一个 Next.js 项目，用于 SaaS 仪表盘"
依赖检查:
"检查项目依赖有没有安全漏洞"
传统使用场景
使用此 skill 当需要：
- ✅ 生成 React/Vue/Next.js 组件代码（含测试）
- ✅ 审查前端代码质量（50+ 检查规则）
- ✅ 解决 TypeScript 类型问题
- ✅ 优化应用性能（Core Web Vitals）
- ✅ 设计组件架构（10+ 设计模式）
- ✅ 编写单元测试/集成测试/E2E 测试
- ✅ 配置构建工具（Vite/Webpack/Next.js）
- ✅ 排查运行时错误
- ✅ 创建新项目脚手架（React/Vue/Next.js）
- ✅ 配置 CI/CD 流程（GitHub Actions）
- ✅ Docker 部署配置
- ✅ 参考完整项目案例（5+ 实战案例）
- ✅ 对话式工具调用（自然语言交互）
项目案例参考
查看 references/project_examples.md 获取完整案例：
- 电商后台管理系统 - React + Ant Design + React Query
- SaaS 数据仪表盘 - Next.js 14 + Tailwind + Recharts
- 移动端 H5 应用 - Vue 3 + Vant + Pinia
- 组件库开发 - TypeScript + Rollup + Storybook
- 表单密集型应用 - React Hook Form + Zod
每个案例包含：
- 完整项目结构
- 核心代码实现
- 性能优化方案
- 最佳实践建议
改进记录
v2.1 (对话集成)
- ✅ 新增
frontend_tools.py 对话集成脚本
- ✅ 支持自然语言组件生成请求
- ✅ 支持对话式代码审查
- ✅ 支持对话式项目创建
- ✅ 支持对话式依赖检查
- ✅ 新增
dialogue_usage_guide.md 使用指南
- ✅ 智能属性识别（中文描述自动映射到 props）
- ✅ 上下文理解（支持连续对话操作）
v2.0 (工程化增强)
- ✅ 增加 Next.js 14 项目模板支持
- ✅ 组件生成自动包含测试文件
- ✅ 添加 CI/CD 配置模板（GitHub Actions）
- ✅ 添加 Docker 部署配置（多阶段构建）
- ✅ 添加 Nginx 生产配置
- ✅ 增加 5 个完整项目案例
- ✅ 代码审查规则扩展到 50+ 项
- ✅ 增强测试生成（props 测试）
