dev-coding

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

/dev-coding - Implementation Skill

/dev-coding - 功能实现技能

Skill Awareness: See
skills/_registry.md
for all available skills.
Before: Ensure
/dev-specs
completed,
/dev-scout
for patterns
During: Auto-loads
/dev-coding-backend
,
/dev-coding-frontend
After: Suggest
/dev-review
for code review

Implement features based on specs. Orchestrates backend and frontend work.

技能说明: 查看
skills/_registry.md
获取所有可用技能。
前置步骤: 确保
/dev-specs
已完成，执行
/dev-scout
了解代码模式
执行过程: 自动加载
/dev-coding-backend
、
/dev-coding-frontend
技能
完成后: 建议执行
/dev-review
进行代码评审

根据需求规格实现功能，协调前后端开发工作。

When to Use

使用场景

Implement a use case from /dev-specs
Build feature end-to-end (API + UI)
Make changes defined in implementation plan

根据
```
/dev-specs
```
中的用例实现功能
端到端构建功能（API + UI）
根据实现计划进行代码修改

Usage

使用方法

/dev-coding UC-AUTH-001              # Implement specific UC
/dev-coding auth                     # Implement all UCs for feature
/dev-coding UC-AUTH-001 --backend    # Backend only
/dev-coding UC-AUTH-001 --frontend   # Frontend only

/dev-coding UC-AUTH-001              # 实现指定用例
/dev-coding auth                     # 实现某功能下的所有用例
/dev-coding UC-AUTH-001 --backend    # 仅实现后端部分
/dev-coding UC-AUTH-001 --frontend   # 仅实现前端部分

Prerequisites

前置条件

Before using, ensure:

```
/debrief
```
completed → BRD exists
```
/dev-specs
```
completed → Implementation plan exists
```
/dev-scout
```
completed → Codebase patterns known

使用前请确保：

```
/debrief
```
已完成 → 存在业务需求文档（BRD）
```
/dev-specs
```
已完成 → 存在实现计划
```
/dev-scout
```
已完成 → 了解代码库模式

Output

输出结果

Updates to codebase:

New/modified files
Tests (if required)
Updated docs-graph

Updates to specs:

Task status in
```
plans/features/{feature}/specs/
```
Implementation notes

代码库更新：

新增/修改文件
测试用例（如有需要）
更新docs-graph

需求规格更新：

```
plans/features/{feature}/specs/
```
中的任务状态
实现说明

Workflow

工作流程

Phase 0: Load Context

阶段0：加载上下文

1. Read UC spec
   → plans/features/{feature}/specs/{UC-ID}/README.md

2. Read scout for patterns
   → plans/features/{feature}/scout.md OR plans/scout/README.md

3. Read docs-graph for dependencies
   → plans/docs-graph.json

4. Check: Are dependencies complete?
   → If UC depends on another UC, verify it's done
   → Warn if not, let user decide to proceed

1. 读取用例规格
   → plans/features/{feature}/specs/{UC-ID}/README.md

2. 读取scout文档了解代码模式
   → plans/features/{feature}/scout.md 或 plans/scout/README.md

3. 读取docs-graph了解依赖关系
   → plans/docs-graph.json

4. 检查：依赖是否已完成？
   → 如果当前用例依赖其他用例，验证其是否已完成
   → 若未完成则发出警告，由用户决定是否继续

Phase 1: Determine Work Type

阶段1：确定工作类型

Based on spec, determine what's needed:

Spec Contains	Work Type	Skill to Load
API endpoints, schema	Backend	dev-coding-backend
UI components, pages	Frontend	dev-coding-frontend
Both	Full-stack	Backend first, then Frontend

Read spec → Extract:
- API changes needed?
- Schema/DB changes needed?
- UI components needed?
- Pages/routes needed?

根据需求规格确定所需工作：

规格包含内容	工作类型	加载的技能
API接口、数据模型	后端	dev-coding-backend
UI组件、页面	前端	dev-coding-frontend
以上两者	全栈	先执行后端，再执行前端

读取规格 → 提取信息：
- 是否需要修改API？
- 是否需要修改数据模型/数据库？
- 是否需要新增UI组件？
- 是否需要新增页面/路由？

Phase 2: Load Sub-Skills

阶段2：加载子技能

If backend work needed:

Read: skills/dev-coding-backend/SKILL.md
Read: skills/dev-coding-backend/references/{tech}.md (if exists)

Tech detected from scout:
- directus → directus.md
- node → node.md
- prisma → prisma.md

If frontend work needed:

Read: skills/dev-coding-frontend/SKILL.md
Read: skills/dev-coding-frontend/references/{tech}.md (if exists)

Tech detected from scout:
- nextjs → nextjs.md
- vue → vue.md
- react → react.md

若需要后端工作：

读取：skills/dev-coding-backend/SKILL.md
读取：skills/dev-coding-backend/references/{tech}.md（如果存在）

从scout文档中识别技术栈：
- directus → directus.md
- node → node.md
- prisma → prisma.md

若需要前端工作：

读取：skills/dev-coding-frontend/SKILL.md
读取：skills/dev-coding-frontend/references/{tech}.md（如果存在）

从scout文档中识别技术栈：
- nextjs → nextjs.md
- vue → vue.md
- react → react.md

Phase 3: Execute Backend (if needed)

阶段3：执行后端工作（如有需要）

Follow dev-coding-backend workflow:

Schema changes (if needed)
- Create/modify collections, tables, models
- Run migrations
- Verify schema
API implementation
- Create endpoints per spec
- Implement business logic
- Add validation, error handling

Backend verification

bash

# Test API works
curl -X POST http://localhost:3000/api/auth/login \
  -H "Content-Type: application/json" \
  -d '{"email":"test@test.com","password":"test"}'

Document what was created
- Endpoints available
- Request/response shapes
- Auth requirements

遵循dev-coding-backend工作流程：

数据模型修改（如有需要）
- 创建/修改集合、数据表、模型
- 执行数据库迁移
- 验证数据模型
API实现
- 根据规格创建接口
- 实现业务逻辑
- 添加验证、错误处理

后端验证

bash

# 测试API是否正常工作
curl -X POST http://localhost:3000/api/auth/login \
  -H "Content-Type: application/json" \
  -d '{"email":"test@test.com","password":"test"}'

记录创建内容
- 可用接口列表
- 请求/响应格式
- 权限要求

Phase 4: Execute Frontend (if needed)

阶段4：执行前端工作（如有需要）

Follow dev-coding-frontend workflow:

Components (if needed)
- Create/modify UI components
- Follow project conventions from scout
Pages/Routes (if needed)
- Create page files
- Set up routing
API Integration
- Connect to backend (use info from Phase 3)
- Handle loading, error states
Frontend verification
- Visual check (Playwright screenshot or manual)
- Interaction test

遵循dev-coding-frontend工作流程：

组件开发（如有需要）
- 创建/修改UI组件
- 遵循scout文档中的项目规范
页面/路由设置（如有需要）
- 创建页面文件
- 配置路由
API集成
- 与后端对接（使用阶段3的信息）
- 处理加载、错误状态
前端验证
- 视觉检查（Playwright截图或手动检查）
- 交互测试

Phase 5: Integration Test

阶段5：集成测试

End-to-end verification:

1. Start from UI
2. Perform user action
3. Verify API called correctly
4. Verify response handled
5. Verify UI updated

Methods:

Playwright for automated
Manual walkthrough
curl + UI check

端到端验证：

1. 从UI界面开始
2. 执行用户操作
3. 验证API是否被正确调用
4. 验证响应是否被正确处理
5. 验证UI是否更新

方法：

使用Playwright进行自动化测试
手动走查
curl命令 + UI检查

Phase 6: Quality Checks

阶段6：质量检查

Before marking complete:

[ ] Code follows project conventions (from scout)
[ ] No linting errors
[ ] No type errors
[ ] Tests pass (if project has tests)
[ ] No console.log / debug code left
[ ] No hardcoded secrets
[ ] Error handling in place

标记完成前需检查：

[ ] 代码符合项目规范（来自scout文档）
[ ] 无语法检查错误
[ ] 无类型错误
[ ] 测试用例通过（如果项目有测试）
[ ] 无残留console.log/调试代码
[ ] 无硬编码密钥
[ ] 已实现错误处理

Phase 7: Complete

阶段7：完成任务

Update spec status

markdown

<!-- In specs/{UC-ID}/README.md -->
> **Status**: Complete
> **Completed**: {date}

Document changes

markdown

## Implementation Notes

### Files Changed
- `src/api/auth/login.ts` - Created login endpoint
- `src/components/LoginForm.tsx` - Created form component

### Deviations from Spec
- Added rate limiting (not in spec, but security best practice)

### Next Steps
- UC-AUTH-002 can now proceed (depends on this)

Update docs-graph (automatic via hook)

更新规格状态

markdown

<!-- 在specs/{UC-ID}/README.md中 -->
> **状态**: 已完成
> **完成时间**: {日期}

记录修改内容

markdown

## 实现说明

### 修改的文件
- `src/api/auth/login.ts` - 创建登录接口
- `src/components/LoginForm.tsx` - 创建表单组件

### 与规格的差异
- 添加了速率限制（规格中未提及，但属于安全最佳实践）

### 下一步
- UC-AUTH-002现在可以开始（依赖本用例）

更新docs-graph（通过钩子自动完成）

Communication Protocol

沟通规则

When to Ask

何时询问

Situation	Action
Spec unclear	Ask for clarification
Multiple valid approaches	Present options, ask preference
Stuck > 15 min	Document attempts, ask for help
Spec seems wrong	Flag it, propose alternative
Scope creep detected	Stop, suggest CR

场景	操作
规格不清晰	请求澄清
存在多种可行方案	提供选项，询问偏好
卡壳超过15分钟	记录尝试过程，请求帮助
规格似乎有误	标记问题，提出替代方案
发现范围蔓延	停止工作，建议变更请求（CR）

How to Ask

询问方式

markdown

**Blocker**: {What's blocking}

**Tried**:
1. {Attempt 1} → {Result}
2. {Attempt 2} → {Result}

**Options**:
A) {Option A} - {Tradeoff}
B) {Option B} - {Tradeoff}

**Recommendation**: {Your suggestion}

markdown

**阻塞问题**: {具体阻塞内容}

**已尝试的方法**:
1. {尝试1} → {结果}
2. {尝试2} → {结果}

**可选方案**:
A) {方案A} - {权衡点}
B) {方案B} - {权衡点}

**建议**: {你的建议}

Scope Creep Protocol

范围蔓延处理规则

Deviation	Action
Tiny (typo)	Fix silently
Small (edge case)	Ask + proceed
Medium (new field)	Document + ask
Large (approach wrong)	Stop + create CR

偏差程度	操作
微小（如拼写错误）	直接修复
较小（如边缘情况）	询问后继续
中等（如新增字段）	记录后询问
较大（如实现方式错误）	停止工作，创建变更请求

Dependency Handling

依赖处理

When UC depends on another:

1. Check docs-graph for dependencies
2. For each dependency:
   - Is UC marked complete? → OK
   - Is code actually there? → Check (more reliable)
3. If dependency missing:
   - Warn user
   - Ask: Proceed anyway? / Do dependency first?

当用例依赖其他用例时：

1. 查看docs-graph中的依赖关系
2. 对每个依赖项：
   - 用例是否标记为已完成？ → 确认
   - 代码是否实际存在？ → 检查（更可靠）
3. 如果依赖项缺失：
   - 向用户发出警告
   - 询问：是否继续？ / 先处理依赖项？

Tools Used

使用的工具

Tool	Purpose
`Read`	Load specs, scout, sub-skills
`Write`	Create new files
`Edit`	Modify existing files
`Bash`	Run commands, curl tests
`Glob`	Find files
`Grep`	Search code
`mcp__playwright__*`	UI verification

工具	用途
`Read`	加载规格、scout文档、子技能
`Write`	创建新文件
`Edit`	修改现有文件
`Bash`	执行命令、curl测试
`Glob`	查找文件
`Grep`	搜索代码
`mcp__playwright__*`	UI验证

Integration

集成的技能

Skill	Relationship
`/dev-specs`	Reads implementation plan from
`/dev-scout`	Reads patterns/conventions from
`/dev-coding-backend`	Loads for API/schema work
`/dev-coding-frontend`	Loads for UI work
`/docs-graph`	Auto-updates on file changes
`/dev-review`	Review after implementation

技能	关系
`/dev-specs`	从中读取实现计划
`/dev-scout`	从中读取代码模式/规范
`/dev-coding-backend`	处理API/数据模型工作时加载
`/dev-coding-frontend`	处理UI工作时加载
`/docs-graph`	文件变更时自动更新
`/dev-review`	实现完成后进行评审

Example Flow

示例流程

User: /dev-coding UC-AUTH-001

1. Load UC-AUTH-001 spec
   → Backend: POST /api/auth/login
   → Frontend: LoginForm component, /login page

2. Check dependencies
   → None for UC-AUTH-001 (it's first)

3. Load dev-coding-backend
   → Create login endpoint
   → Test with curl ✓

4. Load dev-coding-frontend
   → Create LoginForm component
   → Create /login page
   → Connect to API
   → Test with Playwright ✓

5. Integration test
   → Fill form → Submit → Verify redirect ✓

6. Quality checks
   → Lint ✓, Types ✓, No debug code ✓

7. Complete
   → Update spec status
   → Document changes
   → Suggest: "UC-AUTH-002 (Signup) is now unblocked"

用户: /dev-coding UC-AUTH-001

1. 加载UC-AUTH-001规格
   → 后端：POST /api/auth/login
   → 前端：LoginForm组件、/login页面

2. 检查依赖
   → UC-AUTH-001无依赖（它是第一个用例）

3. 加载dev-coding-backend
   → 创建登录接口
   → 用curl测试 ✓

4. 加载dev-coding-frontend
   → 创建LoginForm组件
   → 创建/login页面
   → 对接API
   → 用Playwright测试 ✓

5. 集成测试
   → 填写表单 → 提交 → 验证跳转 ✓

6. 质量检查
   → 语法检查 ✓、类型检查 ✓、无调试代码 ✓

7. 完成任务
   → 更新规格状态
   → 记录修改内容
   → 提示："UC-AUTH-002（注册）现在可以开始"