SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场generic-feature-developer

generic-feature-developer

编程与开发

查看项目

更新于 10-16 10:40

技能介绍

用途

Generic Feature Developer 用于在任意技术栈上指导功能开发。适用于以下场景：

  • 向现有代码库添加新功能
  • 修改或扩展现有系统
  • 规划架构变更
  • 在多种实现方案之间做选择
  • 为新功能设计数据流

不适用场景：纯 UI/样式工作（应使用 generic-design-system）；UX 设计决策（应使用 generic-ux-designer）；代码审查（应使用 generic-code-reviewer）。

开发工作流

  1. 理解 - 阅读 CLAUDE.md，识别受影响文件，列出约束条件
  2. 规划 - 选择模式，设计数据流，识别边界情况
  3. 实现 - 小步可审查的变更，频繁提交
  4. 审查与文档 - 对照边界情况和调用方审查 diff，更新文档，进行性能检查

按项目类型的架构

静态站点

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/

模式：Container/Presentational、自定义 hooks、Zustand/React Query

NestJS 后端

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

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

功能决策框架

范围评估（首先进行）

范围 行动
单个组件 直接实现
横切关注点 先设计接口
新子系统 创建架构文档，获得批准

自建 vs 集成

因素 自建 使用库
产品核心 是
通用商品功能 是
需要紧密集成 是
时间紧迫 是
长期维护 是

状态管理选择

范围 方案
组件本地 useState/useReducer
功能级 Context 或 Zustand slice
应用级 Zustand/Redux store
服务端状态 React Query/SWR
表单状态 React Hook Form

API 设计清单

  • [ ] 已记录 RESTful 或 GraphQL 决策
  • [ ] 已选择认证方式
  • [ ] 错误响应格式已标准化
  • [ ] 分页策略已定义
  • [ ] 已考虑限流

常见功能

添加 UI 组件

  1. 创建组件 → 2. 导出 → 3. 审查使用情况和边界情况 → 4. 文档

添加 API 端点

  1. 定义路由 → 2. 添加验证 → 3. 实现服务 → 4. 审查错误路径

添加状态管理

  1. 定义形态 → 2. 创建 store → 3. 添加 actions → 4. 连接组件

数据库变更

  1. 设计 schema → 2. 创建迁移 → 3. 更新模型 → 4. 添加服务

数据流模式

前端数据流

用户操作 → 事件处理器 → 状态更新 → 重新渲染 → UI 反馈
  • 乐观更新： 立即更新 UI，出错时回滚
  • 悲观更新： 等待服务器确认
  • 决策： 低风险操作（点赞）用乐观，高风险操作（支付）用悲观

API 请求流

请求 → 认证检查 → 验证 → 业务逻辑 → 数据库 → 响应
  • 验证失败时尽早退出
  • 多步操作使用事务边界
  • 一致的错误响应格式

事件驱动模式

事件类型 方法
用户事件 即时反馈
服务器事件 WebSocket/SSE 实时推送
后台任务 长操作使用队列

错误处理策略

错误类型 前端 后端
验证 内联字段错误 400 + 字段错误
认证 重定向到登录 401/403
未找到 空状态或重定向 404
服务端错误 通用提示 + 重试 500 + 日志
网络 离线指示 + 队列 不适用

前端模式

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

后端模式

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

测试策略（当用户要求测试时）

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

性能

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

功能实现检查清单

在标记功能完成之前：

  • [ ] 正常路径可用
  • [ ] 错误状态已处理
  • [ ] 加载状态已实现
  • [ ] 边界情况已审查
  • [ ] TypeScript 类型完整
  • [ ] 测试已编写（仅当用户要求时）
  • [ ] 文档已更新

参见

  • Code Review Standards（./../_shared/CODE_REVIEW_STANDARDS.md） - 质量检查
  • Design Patterns（./../_shared/DESIGN_PATTERNS.md） - UI 模式
  • generic-design-system - 样式和视觉一致性
  • generic-ux-designer - UX 流程决策
  • 项目 CLAUDE.md - 工作流规则

阅读共享标准的情况：

  • 复杂功能设计 → CODE_REVIEW_STANDARDS.md（架构部分）
  • UI 组件模式 → DESIGN_PATTERNS.md（组件部分）

暂未提供该技能的收费、价格或平台信息。