![Feature: [Feature Name]](http://pic.xiahunao.cn/yaotu/Feature: [Feature Name])
Feature: [Feature Name]【免费下载链接】claude-skills67 Specialized Skills for Full-Stack Developers. Transform Claude Code into your expert pair programmer.项目地址: https://gitcode.com/GitHub_Trending/claud/claude-skills[Frontend]UI components neededClient-side validationLoading/error statesOptimistic UI updatesAccessibility considerations[Backend]API endpoints (method, path)Request/response schemasDatabase operationsBusiness logicExternal service calls[Security]Authentication requirementsAuthorization rulesInput sanitizationRate limitingAudit logging逐层拆解每个检查点 **Frontend 层**要求从交互完整性出发设计 - **UI components needed所需 UI 组件**明确组件边界为后续编码提供清单 - **Client-side validation客户端校验**提供即时反馈但它只是第一道防线——SKILL.md 明确写着 Validate input on both client and server客户端校验永远不能替代服务端校验 - **Loading/error states加载与错误状态**配合 [error-handling.md](https://link.gitcode.com/i/a3fc69584ad5328cb79e306ae256cf93) 中的统一 useApi Hook 或 handleSubmit 模式为异步操作设计 loading 与 error 的双态展示 - **Optimistic UI updates乐观更新**先更新界面再请求服务器配合 [common-patterns.md](https://link.gitcode.com/i/83c93e320836f04b531501d27b8b4d82) 中 React Query onMutate / onError 回滚模式实现即时反馈与失败回滚 - **Accessibility considerations可访问性**对应 [frontend-patterns.md](https://link.gitcode.com/i/87345ba1a085af6f8a35b57fb67aca78) 中的可访问模态框roledialog aria-modal、键盘导航与焦点陷阱focus trap等模式。 **Backend 层**要求以契约与数据为核心设计 - **API endpoints (method, path)**遵循 [api-design-standards.md](https://link.gitcode.com/i/4e2a787d262596282b6e2c4991fe442e) 中的 RESTful 约定——复数名词 URL/api/users 而非 /api/user、语义化 HTTP 方法GET 读、POST 建、PUT/PATCH 改、DELETE 删 - **Request/response schemas**用 PydanticPython或 ZodTypeScript声明请求与响应结构保证类型安全与字段边界 - **Database operations**明确所需的数据操作并在实现阶段一律使用参数化查询parameterized queries而非字符串拼接从源头阻断 SQL 注入 - **Business logic**将校验、状态流转等业务规则与服务层解耦 - **External service calls**列出对第三方服务的调用设计时即考虑 [backend-patterns.md](https://link.gitcode.com/i/52546aa88d43010c34afef73f462cdff) 中的熔断器Circuit Breaker、幂等处理与超时策略。 **Security 层**要求防线前置 - **Authentication requirements**明确接口是否需要认证参考 [security-checklist.md](https://link.gitcode.com/i/5e01b87c261680e22a816160d2393aae) 中的认证模式NestJS JwtAuthGuard、FastAPI Depends 依赖注入 - **Authorization rules**所有权校验与基于角色的访问控制RBAC - **Input sanitization**输入净化抵御 XSS - **Rate limiting**限流策略如登录接口 5 次/15 分钟普通接口 100 次/15 分钟 - **Audit logging**记录登录失败、资料变更等安全事件。 ## 三、完整示例User Profile Update design-template.md 提供了一个完整的参考示例——用户资料更新功能展示了三个视角如何被同时设计 markdown ## Feature: User Profile Update ### [Frontend] - Form with name, email, bio, avatar fields - Client-side validation with real-time feedback - Loading states during submission - Error/success message display - Optimistic UI updates ### [Backend] - PUT /api/users/:id endpoint - Pydantic/Zod schema validation - Database transaction with rollback on error - Audit logging for profile changes - Email verification if email changes ### [Security] - Authorization: users can only update own profile - Input sanitization against XSS - Rate limiting (10 req/min per user) - File upload validation for avatar (type, size) - CSRF protection on form submission这个示例中值得注意的细节Backend 层点名了事务回滚Database transaction with rollback on error这是资料更新这类多步骤写操作的关键可靠性保障也与 deliverables-checklist.md 中数据库迁移支持回滚的交付要求一脉相承邮件变更触发二次验证Email verification if email changes这是业务规则的典型示例——设计阶段就把状态流转写入方案Security 层的仅能更新自己的资料users can only update own profile正是防 IDOR越权访问的标准写法对应 security-checklist.md 快速参考表中的 IDOR → Authorization checks头像上传校验File upload validation for avatar (type, size)意味着服务端必须校验文件类型与大小白名单而不是信任Content-Type头限流细化到单用户 10 req/min比全局限流更精细体现每端点按需配置的 api-design-standards.md 原则。四、Technical Design Document用 EARS 格式把设计落成文档三视角模板回答的是这个功能要做什么、涉及哪些层面而Technical Design Document技术设计文档回答的是这份设计如何沉淀为可评审、可追踪、可交接的文档资产。design-template.md规定为每个功能在仓库specs/目录下创建specs/{feature_name}_design.md其标准骨架如下# Feature: {Name} ## Requirements (EARS Format) While precondition, when trigger, the system shall response. Example: While a user is logged in, when they click Save, the system shall persist the form data and display a success message. ## Architecture - Frontend: [Components, state management] - Backend: [Endpoints, data models] - Security: [Auth, validation, protection] ## Implementation Plan - [ ] Step 1: Create Pydantic/Zod schemas - [ ] Step 2: Implement API endpoint - [ ] Step 3: Build UI component - [ ] Step 4: Add error handling - [ ] Step 5: Write tests这里引入的EARS 格式EARS即 While… When… The system shall… 的易读需求语法值得单独拆解While precondition前置条件描述系统状态如 a user is logged inwhen trigger触发事件描述用户或系统的动作如 when they click Savethe system shall response期望行为描述系统响应如 persist the form data and display a success message。这种格式把模糊的产品想法转译成可测试的系统行为每个需求都能直接映射到一条测试用例。仓库中另一技能 spec-miner 同样使用该语法体系说明 EARS 是 claude-skills 全库共享的需求表述标准。Implementation Plan 以任务清单checklist形式呈现Step 1 建 schema、Step 2 实现接口、Step 3 构建 UI、Step 4 加错误处理、Step 5 写测试——这个顺序本身就是 fullstack-guardian 写代码前先写实现计划 约束的载体。在 SKILL.md 的 Output Templates 输出模板 中实现功能时要求交付技术设计文档功能非平凡时、后端代码模型/schema/端点、前端代码组件/Hook/API 调用、简要安全说明。这与 design-template.md 的产物要求一一对应。五、三视角设计在 fullstack-guardian 工作流中的位置三视角设计不是孤立的文档模板它是 SKILL.md 核心工作流 的关键环节。完整工作流如下Gather requirements—— 理解功能范围与验收标准Design solution—— 从 Frontend / Backend / Security 三个视角设计方案即本文所讲的设计模板Write technical design—— 将方案写入specs/{feature}_design.mdSecurity checkpoint—— 在写任何代码前对照 security-checklist.md 逐项确认 auth、authz、validation、output encoding 已就位Implement—— 增量构建边做边测Hand off—— 交接给 Test Master 做 QA、DevOps 做部署。可以看到设计模板产出的三个层面清单正是第 4 步安全关卡和第 5 步增量实现的工作底稿。六、从设计到代码三视角的源码级落地示例为说明三视角设计如何落到真实代码SKILL.md 的三视角示例 给出了一个最小认证端点恰好覆盖设计模板的三大层面。Backend 层——认证路由 参数化查询 收窄的响应 schemarouter.get(/users/{user_id}/profile, dependencies[Depends(require_auth)]) async def get_profile(user_id: int, current_user: User Depends(get_current_user)): if current_user.id ! user_id: raise HTTPException(status_code403, detailForbidden) # Parameterized query — no raw string interpolation row await db.fetchone(SELECT id, name, email FROM users WHERE id ?, (user_id,)) if not row: raise HTTPException(status_code404, detailNot found) return ProfileResponse(**row) # explicit schema — no password/token leakage对应设计模板的检查点认证Depends(require_auth)、授权current_user.id ! user_id返回 403、参数化查询?占位符、响应 schema 显式排除敏感字段。Frontend 层——组件调用端点并优雅处理错误async function fetchProfile(userId: number): PromiseProfile { const res await apiFetch(/users/${userId}/profile); // apiFetch attaches auth header if (!res.ok) throw new Error(await res.text()); return res.json(); } // Client-side input guard (never the only guard) if (!Number.isInteger(userId) || userId 0) throw new Error(Invalid user ID);【免费下载链接】claude-skills67 Specialized Skills for Full-Stack Developers. Transform Claude Code into your expert pair programmer.项目地址: https://gitcode.com/GitHub_Trending/claud/claude-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/9/15 22:47:05 · 阅读 1.2k Feature: [Feature Name]
Feature: [Feature Name]【免费下载链接】claude-skills67 Specialized Skills for Full-Stack Developers. Transform Claude Code into your expert pair programmer.项目地址: https://gitcode.com/GitHub_Trending/claud/claude-skills[Frontend]UI components neededClient-side validationLoading/error statesOptimistic UI updatesAccessibility considerations[Backend]API endpoints (method, path)Request/response schemasDatabase operationsBusiness logicExternal service calls[Security]Authentication requirementsAuthorization rulesInput sanitizationRate limitingAudit logging逐层拆解每个检查点 **Frontend 层**要求从交互完整性出发设计 - **UI components needed所需 UI 组件**明确组件边界为后续编码提供清单 - **Client-side validation客户端校验**提供即时反馈但它只是第一道防线——SKILL.md 明确写着 Validate input on both client and server客户端校验永远不能替代服务端校验 - **Loading/error states加载与错误状态**配合 [error-handling.md](https://link.gitcode.com/i/a3fc69584ad5328cb79e306ae256cf93) 中的统一 useApi Hook 或 handleSubmit 模式为异步操作设计 loading 与 error 的双态展示 - **Optimistic UI updates乐观更新**先更新界面再请求服务器配合 [common-patterns.md](https://link.gitcode.com/i/83c93e320836f04b531501d27b8b4d82) 中 React Query onMutate / onError 回滚模式实现即时反馈与失败回滚 - **Accessibility considerations可访问性**对应 [frontend-patterns.md](https://link.gitcode.com/i/87345ba1a085af6f8a35b57fb67aca78) 中的可访问模态框roledialog aria-modal、键盘导航与焦点陷阱focus trap等模式。 **Backend 层**要求以契约与数据为核心设计 - **API endpoints (method, path)**遵循 [api-design-standards.md](https://link.gitcode.com/i/4e2a787d262596282b6e2c4991fe442e) 中的 RESTful 约定——复数名词 URL/api/users 而非 /api/user、语义化 HTTP 方法GET 读、POST 建、PUT/PATCH 改、DELETE 删 - **Request/response schemas**用 PydanticPython或 ZodTypeScript声明请求与响应结构保证类型安全与字段边界 - **Database operations**明确所需的数据操作并在实现阶段一律使用参数化查询parameterized queries而非字符串拼接从源头阻断 SQL 注入 - **Business logic**将校验、状态流转等业务规则与服务层解耦 - **External service calls**列出对第三方服务的调用设计时即考虑 [backend-patterns.md](https://link.gitcode.com/i/52546aa88d43010c34afef73f462cdff) 中的熔断器Circuit Breaker、幂等处理与超时策略。 **Security 层**要求防线前置 - **Authentication requirements**明确接口是否需要认证参考 [security-checklist.md](https://link.gitcode.com/i/5e01b87c261680e22a816160d2393aae) 中的认证模式NestJS JwtAuthGuard、FastAPI Depends 依赖注入 - **Authorization rules**所有权校验与基于角色的访问控制RBAC - **Input sanitization**输入净化抵御 XSS - **Rate limiting**限流策略如登录接口 5 次/15 分钟普通接口 100 次/15 分钟 - **Audit logging**记录登录失败、资料变更等安全事件。 ## 三、完整示例User Profile Update design-template.md 提供了一个完整的参考示例——用户资料更新功能展示了三个视角如何被同时设计 markdown ## Feature: User Profile Update ### [Frontend] - Form with name, email, bio, avatar fields - Client-side validation with real-time feedback - Loading states during submission - Error/success message display - Optimistic UI updates ### [Backend] - PUT /api/users/:id endpoint - Pydantic/Zod schema validation - Database transaction with rollback on error - Audit logging for profile changes - Email verification if email changes ### [Security] - Authorization: users can only update own profile - Input sanitization against XSS - Rate limiting (10 req/min per user) - File upload validation for avatar (type, size) - CSRF protection on form submission这个示例中值得注意的细节Backend 层点名了事务回滚Database transaction with rollback on error这是资料更新这类多步骤写操作的关键可靠性保障也与 deliverables-checklist.md 中数据库迁移支持回滚的交付要求一脉相承邮件变更触发二次验证Email verification if email changes这是业务规则的典型示例——设计阶段就把状态流转写入方案Security 层的仅能更新自己的资料users can only update own profile正是防 IDOR越权访问的标准写法对应 security-checklist.md 快速参考表中的 IDOR → Authorization checks头像上传校验File upload validation for avatar (type, size)意味着服务端必须校验文件类型与大小白名单而不是信任Content-Type头限流细化到单用户 10 req/min比全局限流更精细体现每端点按需配置的 api-design-standards.md 原则。四、Technical Design Document用 EARS 格式把设计落成文档三视角模板回答的是这个功能要做什么、涉及哪些层面而Technical Design Document技术设计文档回答的是这份设计如何沉淀为可评审、可追踪、可交接的文档资产。design-template.md规定为每个功能在仓库specs/目录下创建specs/{feature_name}_design.md其标准骨架如下# Feature: {Name} ## Requirements (EARS Format) While precondition, when trigger, the system shall response. Example: While a user is logged in, when they click Save, the system shall persist the form data and display a success message. ## Architecture - Frontend: [Components, state management] - Backend: [Endpoints, data models] - Security: [Auth, validation, protection] ## Implementation Plan - [ ] Step 1: Create Pydantic/Zod schemas - [ ] Step 2: Implement API endpoint - [ ] Step 3: Build UI component - [ ] Step 4: Add error handling - [ ] Step 5: Write tests这里引入的EARS 格式EARS即 While… When… The system shall… 的易读需求语法值得单独拆解While precondition前置条件描述系统状态如 a user is logged inwhen trigger触发事件描述用户或系统的动作如 when they click Savethe system shall response期望行为描述系统响应如 persist the form data and display a success message。这种格式把模糊的产品想法转译成可测试的系统行为每个需求都能直接映射到一条测试用例。仓库中另一技能 spec-miner 同样使用该语法体系说明 EARS 是 claude-skills 全库共享的需求表述标准。Implementation Plan 以任务清单checklist形式呈现Step 1 建 schema、Step 2 实现接口、Step 3 构建 UI、Step 4 加错误处理、Step 5 写测试——这个顺序本身就是 fullstack-guardian 写代码前先写实现计划 约束的载体。在 SKILL.md 的 Output Templates 输出模板 中实现功能时要求交付技术设计文档功能非平凡时、后端代码模型/schema/端点、前端代码组件/Hook/API 调用、简要安全说明。这与 design-template.md 的产物要求一一对应。五、三视角设计在 fullstack-guardian 工作流中的位置三视角设计不是孤立的文档模板它是 SKILL.md 核心工作流 的关键环节。完整工作流如下Gather requirements—— 理解功能范围与验收标准Design solution—— 从 Frontend / Backend / Security 三个视角设计方案即本文所讲的设计模板Write technical design—— 将方案写入specs/{feature}_design.mdSecurity checkpoint—— 在写任何代码前对照 security-checklist.md 逐项确认 auth、authz、validation、output encoding 已就位Implement—— 增量构建边做边测Hand off—— 交接给 Test Master 做 QA、DevOps 做部署。可以看到设计模板产出的三个层面清单正是第 4 步安全关卡和第 5 步增量实现的工作底稿。六、从设计到代码三视角的源码级落地示例为说明三视角设计如何落到真实代码SKILL.md 的三视角示例 给出了一个最小认证端点恰好覆盖设计模板的三大层面。Backend 层——认证路由 参数化查询 收窄的响应 schemarouter.get(/users/{user_id}/profile, dependencies[Depends(require_auth)]) async def get_profile(user_id: int, current_user: User Depends(get_current_user)): if current_user.id ! user_id: raise HTTPException(status_code403, detailForbidden) # Parameterized query — no raw string interpolation row await db.fetchone(SELECT id, name, email FROM users WHERE id ?, (user_id,)) if not row: raise HTTPException(status_code404, detailNot found) return ProfileResponse(**row) # explicit schema — no password/token leakage对应设计模板的检查点认证Depends(require_auth)、授权current_user.id ! user_id返回 403、参数化查询?占位符、响应 schema 显式排除敏感字段。Frontend 层——组件调用端点并优雅处理错误async function fetchProfile(userId: number): PromiseProfile { const res await apiFetch(/users/${userId}/profile); // apiFetch attaches auth header if (!res.ok) throw new Error(await res.text()); return res.json(); } // Client-side input guard (never the only guard) if (!Number.isInteger(userId) || userId 0) throw new Error(Invalid user ID);【免费下载链接】claude-skills67 Specialized Skills for Full-Stack Developers. Transform Claude Code into your expert pair programmer.项目地址: https://gitcode.com/GitHub_Trending/claud/claude-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考