Generic Feature Developer

通用功能开发指南

Guide feature development across any tech stack.

指导任意技术栈下的功能开发工作。

When to Use This Skill

何时使用本Skill

Use for:

Adding new features to existing codebase
Modifying or extending current systems
Planning architectural changes
Choosing between implementation approaches
Designing data flow for new functionality

Don't use when:

Pure UI/styling work → use
```
generic-design-system
```
UX design decisions → use
```
generic-ux-designer
```
Code review → use
```
generic-code-reviewer
```

适用场景：

为现有代码库新增功能
修改或扩展现有系统
规划架构变更
选择实现方案
为新功能设计数据流

不适用场景：

纯UI/样式工作 → 使用
```
generic-design-system
```
UX设计决策 → 使用
```
generic-ux-designer
```
代码评审 → 使用
```
generic-code-reviewer
```

Development Workflow

开发工作流

Understand - Read CLAUDE.md, identify affected files, list constraints
Plan - Choose patterns, design data flow, identify edge cases
Implement - Small testable changes, commit frequently
Test & Document - Write tests, update docs, performance check

理解需求 - 阅读CLAUDE.md，识别受影响文件，列出约束条件
规划设计 - 选择架构模式，设计数据流，识别边缘情况
开发实现 - 拆分可测试的小改动，频繁提交代码
测试与文档 - 编写测试用例，更新文档，检查性能

Architecture by Project Type

按项目类型划分的架构

Static Sites

静态站点

project/
├── index.html
├── css/           # variables.css, style.css
├── js/            # main.js, utils.js
└── assets/

Patterns: CSS variables, ES modules, event delegation

project/
├── index.html
├── css/           # variables.css, style.css
├── js/            # main.js, utils.js
└── assets/

适用模式： CSS变量、ES模块、事件委托

React/Next.js

src/
├── components/    # ui/, features/, layout/
├── hooks/
├── stores/
├── services/
└── types/

Patterns: Container/Presentational, custom hooks, Zustand/React Query

src/
├── components/    # ui/, features/, layout/
├── hooks/
├── stores/
├── services/
└── types/

适用模式： 容器/展示组件、自定义hooks、Zustand/React Query

NestJS Backend

src/
├── modules/[feature]/
│   ├── feature.module.ts
│   ├── feature.controller.ts
│   ├── feature.service.ts
│   └── dto/
└── common/        # guards, decorators

Patterns: Module organization, DTOs, Guards, Prisma

src/
├── modules/[feature]/
│   ├── feature.module.ts
│   ├── feature.controller.ts
│   ├── feature.service.ts
│   └── dto/
└── common/        # guards, decorators

适用模式： 模块化组织、DTO、Guards、Prisma

Feature Decision Framework

功能决策框架

Scope Assessment (First)

范围评估（首要步骤）

Scope	Action
Single component	Implement directly
Cross-cutting concern	Design interface first
New subsystem	Create architecture doc, get approval

范围	行动方案
单一组件	直接实现
跨领域关注点	先设计接口
新子系统	编写架构文档并获得审批

Build vs Integrate

自研 vs 集成第三方库

Factor	Build Custom	Use Library
Core to product	Yes
Commodity feature		Yes
Tight integration needed	Yes
Time-critical		Yes
Long-term ownership	Yes

考量因素	自研实现	使用第三方库
产品核心功能	是
通用功能		是
需要深度集成	是
时间紧迫		是
长期维护需求	是

State Management Selection

状态管理方案选择

Scope	Solution
Component-local	useState/useReducer
Feature-wide	Context or Zustand slice
App-wide	Zustand/Redux store
Server state	React Query/SWR
Form state	React Hook Form

范围	解决方案
组件内部状态	useState/useReducer
功能级状态	Context或Zustand切片
应用级状态	Zustand/Redux Store
服务端状态	React Query/SWR
表单状态	React Hook Form

API Design Checklist

API设计检查清单

RESTful or GraphQL decision documented
Authentication method chosen
Error response format standardized
Pagination strategy defined
Rate limiting considered

Common Features

常见功能实现步骤

Adding UI Component

新增UI组件

Create component → 2. Export → 3. Add tests → 4. Document

创建组件 → 2. 导出组件 → 3. 添加测试 → 4. 编写文档

Adding API Endpoint

新增API接口

Define route → 2. Add validation → 3. Implement service → 4. Test

定义路由 → 2. 添加验证 → 3. 实现服务逻辑 → 4. 测试

Adding State Management

新增状态管理

Define shape → 2. Create store → 3. Add actions → 4. Connect components

定义状态结构 → 2. 创建Store → 3. 添加操作方法 → 4. 关联组件

Database Changes

数据库变更

Design schema → 2. Create migration → 3. Update models → 4. Add service

设计Schema → 2. 创建迁移脚本 → 3. 更新模型 → 4. 新增服务层

Data Flow Patterns

数据流模式

Frontend Data Flow

前端数据流

User Action → Event Handler → State Update → Re-render → UI Feedback

Optimistic updates: Update UI immediately, rollback on error
Pessimistic updates: Wait for server confirmation
Decision: Optimistic for low-risk (likes), pessimistic for high-risk (payments)

用户操作 → 事件处理器 → 状态更新 → 重新渲染 → UI反馈

乐观更新： 立即更新UI，出错时回滚
悲观更新： 等待服务端确认后再更新
决策依据： 低风险操作（如点赞）用乐观更新，高风险操作（如支付）用悲观更新

API Request Flow

API请求流程

Request → Auth Check → Validation → Business Logic → Database → Response

Early exit on validation failure
Transaction boundaries around multi-step operations
Consistent error response format

请求 → 权限校验 → 数据验证 → 业务逻辑 → 数据库操作 → 响应

验证失败时提前终止流程
多步骤操作使用事务边界
保持统一的错误响应格式

Event-Driven Patterns

事件驱动模式

Event Type	Approach
User events	Immediate feedback
Server events	WebSocket/SSE for real-time
Background tasks	Queue for long operations

事件类型	处理方式
用户事件	即时反馈
服务端事件	使用WebSocket/SSE实现实时推送
后台任务	用队列处理长耗时操作

Error Handling Strategy

错误处理策略

Error Type	Frontend	Backend
Validation	Inline field errors	400 + field errors
Auth	Redirect to login	401/403
Not Found	Empty state or redirect	404
Server Error	Generic message + retry	500 + log
Network	Offline indicator + queue	N/A

错误类型	前端处理方式	后端处理方式
验证错误	字段内联错误提示	400 + 字段错误信息
权限错误	重定向至登录页	401/403
资源不存在	空状态展示或重定向	404
服务端错误	通用提示+重试按钮	500 + 日志记录
网络错误	离线状态提示+请求队列	N/A

Frontend Pattern

前端实现模式

typescript

try {
  await apiCall();
} catch (error) {
  if (error instanceof ValidationError) showFieldErrors(error.fields);
  else showGenericError();
}

typescript

try {
  await apiCall();
} catch (error) {
  if (error instanceof ValidationError) showFieldErrors(error.fields);
  else showGenericError();
}

Backend Pattern

后端实现模式

typescript

if (err instanceof ValidationError)
  return res.status(400).json({ errors: err.errors });
if (err instanceof AuthError)
  return res.status(401).json({ message: "Unauthorized" });

typescript

if (err instanceof ValidationError)
  return res.status(400).json({ errors: err.errors });
if (err instanceof AuthError)
  return res.status(401).json({ message: "Unauthorized" });

Testing Strategy

测试策略

Layer	Type	Tools
UI	Component	Testing Library
Logic	Unit	Jest, Vitest
API	Integration	Supertest
E2E	End-to-end	Playwright

层级	测试类型	工具
UI层	组件测试	Testing Library
逻辑层	单元测试	Jest, Vitest
API层	集成测试	Supertest
端到端	端到端测试	Playwright

Performance

性能优化建议

Frontend: Code splitting, lazy loading, memoization, debounce Backend: DB indexing, caching, connection pooling, background jobs

前端： 代码分割、懒加载、记忆化、防抖 后端： 数据库索引、缓存、连接池、后台任务

generic-feature-developer

Original

Translation

Generic Feature Developer

通用功能开发指南

When to Use This Skill

何时使用本Skill

Development Workflow

开发工作流

Architecture by Project Type

按项目类型划分的架构

Static Sites

静态站点

React/Next.js

React/Next.js

NestJS Backend

NestJS Backend

Feature Decision Framework

功能决策框架

Scope Assessment (First)

范围评估（首要步骤）

Build vs Integrate

自研 vs 集成第三方库

State Management Selection

状态管理方案选择

API Design Checklist

API设计检查清单

Common Features

常见功能实现步骤

Adding UI Component

新增UI组件

Adding API Endpoint

新增API接口

Adding State Management

新增状态管理

Database Changes

数据库变更

Data Flow Patterns

数据流模式

Frontend Data Flow

前端数据流

API Request Flow

API请求流程

Event-Driven Patterns

事件驱动模式

Error Handling Strategy

错误处理策略

Frontend Pattern

前端实现模式

Backend Pattern

后端实现模式

Testing Strategy

测试策略

Performance

性能优化建议

Feature Implementation Checklist

功能完成检查清单

See Also

相关链接