前端编码约定技能
为 SkillHub React 前端提供编码约定、架构模式与测试规则，确保遵循 Feature-Sliced Design 并使用生成的 OpenAPI 类型。
技能描述聚焦于编码规范与测试规则，未涉及敏感数据操作、权限提升或外部副作用，风险面较低。但缺少显式的用户确认机制、最小权限说明和数据流透明度，且来源未验证，故扣分。
规则清晰，但未提供测试用例、边界情况处理或错误反馈机制，关键路径依赖外部命令（如make generate-api）和本机环境，且未验证运行，存在不确定性。
技能场景明确（前端开发），触发条件描述清晰，但未明确非适用边界，且依赖的生成OpenAPI命令需要后端运行，可能影响在国内环境下的可达性。
文档结构良好，有分层明确的信息架构和示例命令，但缺少版本控制、变更日志、维护责任声明和已知限制，license仅为Apache-2.0声明。
技能提供的规则可指导前端开发，但其直接效用未验证，输出需要开发者的判断和代码执行，边际价值未证实。
只有源文件本身，无第三方执行证据，也未提供可复现的测试数据，验证性较低。
- 该技能为代码规范类技能，不涉及敏感操作，但未说明权限需求，应确保使用时遵循最小权限原则。
- 技能中提到的make generate-api命令需要后端服务运行，若后端不可用将无法生成API类型，用户应注意后端状态。
- 技能未提供版本记录和维护说明，使用前应检查仓库更新情况。
这个 Skill 能做什么，适合哪些场景？
该技能为 SkillHub 仓库的 React 前端开发提供了一套完整的编码规范，包括 Feature-Sliced Design 分层、数据获取（TanStack Query）、状态管理（Zustand）、组件组合（Radix UI）、样式（Tailwind）和国际化的具体规则。它指导开发者将代码放置在适当的层级，使用生成的类型，并遵循既定的构建与测试流程。该技能是 SkillHub 仓库的一部分，附带 23 个技能，但本档案仅针对这个前端约定技能。
读取并应用前端约定：检查代码分层（pages/features/entities/shared），确保使用 TanStack Query 进行数据获取且避免在 useEffect 中请求，使用 Zustand 管理本地状态，使用 Radix UI 和 cva 构建组件，使用 Tailwind 和 cn() 工具，遵循 i18next 国际化，并运行 make 命令进行开发、构建、类型检查、 lint 和测试。当 OpenAPI 合约变化时，运行 make generate-api 并提交生成的 schema.d.ts，并使用 check-openapi-generated.sh 验证其一致性。
- 开发者添加新页面或功能时，确保放入正确的目录并遵循现有模式。
- 开发者修改 API 调用时，知道使用 openapi-fetch 和生成的类型，而不是 any。
- 开发者需要为新的 UI 组件选择状态管理方案时，依据技能区分服务器状态与本地状态。
- 后端 API 合约变更后，开发者按流程重新生成类型并提交。
- 开发者进行前端构建或测试时，找到所有相关的 make 命令并确保通过。
这个 Skill 有哪些优点和局限？
- 详细且实用，覆盖分层、数据获取、状态管理、样式和国际化。
- 与项目实际依赖（TanStack Query、Zustand、Radix UI、Tailwind）紧密结合。
- 提供了具体的验证命令（typecheck、lint、测试）和 OpenAPI 类型一致性检查。
- 基于 Apache-2.0 许可，可自由使用和修改。
- 仅适用于 SkillHub 前端项目，若用于其他项目需大量调整。
- 针对特定技术栈（React 19、TanStack Router、Vite 等），不通用。
- 没有独立的测试套件来验证技能本身，作为技能其有效性未经过验证。
- 未包含在主要 Agent 平台（如 Claude、OpenAI）发布的官方技能市场中，需手动安装。
如何安装这个 Skill？
该技能包含在 SkillHub 仓库中，位于 .agents/skills/frontend-conventions/SKILL.md。要使用它，需要克隆仓库或复制该文件夹到您的 Agent 技能目录（例如 Claude Code 的 skills 目录）。该技能是集合的一部分，整体安装方式遵循仓库的 README，通常通过 Git 克隆或下载存档。没有单独的独立安装命令。
如何使用这个 Skill？
将技能文件放置在 Agent 能访问的目录下，然后在处理纯 React/TypeScript 前端任务时触发它。例如，可以说“请按 frontend-conventions 技能的要求，新增一个搜索功能页面”。该技能会指导您遵循 Feature-Sliced Design 分层、使用 TanStack Query、类型安全等。运行相关命令前请确认仓库中的 Make 目标（如 make dev-web、make typecheck-web）存在。