crearize-develop-frontend Skill 技能

crearize-develop-frontend 是 Skillstore 上面向前端团队的 Next.js + React 工作流编排技能，为 Claude / Codex / Claude Code 等 AI 代理设计。它把 Next.js App Router 项目中最容易出错的组件分层、API 客户端封装、表单校验、测试体系、本地验证等环节，沉淀为一套结构化的工作流与提示词库，帮助前端工程师与全栈团队快速产出符合现代 React 规范、可测试、可直接发布的高质量 Web 应用。

技能深度整合 Next.js、React Hook Form、Zod、shadcn/ui、Vitest、Testing Library、MSW 等主流前端栈，并把分支状态、文档依赖、API 客户端、加载与错误态、构建验证等关键检查项嵌入工作流，让 AI 代理在生成代码时自动遵循项目既定规范。

核心能力

分支与文档检查：在动手前自动核对分支状态、Issue 编号、依赖的项目文档（API spec / 设计稿 / 验收标准），避免凭空生成代码。 组件分层规划：按 Presentational（视图）、Container（数据装配）、View（页面）三层拆分 Next.js App Router 文件结构。 API 客户端封装：把生成的 TypeScript API 客户端包进自定义 Hook，统一暴露 loading、error、data 三态。 表单工作流：使用 React Hook Form + Zod 校验 + shadcn/ui 组件实现受控表单，支持错误提示与无障碍语义。 测试体系搭建：定义 Vitest + Testing Library + MSW 的 UI 与 API 测试覆盖策略，覆盖加载态、错误态、空态。 发布前验证清单：内置 lint / test / build / 本地服务器 / 响应式截图五项验证，全部通过才声明完成。

安装配置

环境前置：本地安装 Node.js 20+ 与项目所用的 pnpm / npm / yarn 任意一种包管理器。 一键安装：在终端执行 npx skillstore add crearize/develop-frontend，自动写入项目 Skills 目录。 依赖注入：在 package.json 中确认 next、react、react-hook-form、zod、@shadcn/ui、vitest、@testing-library/react、msw 均为最新稳定版。 API 客户端生成：执行项目自带的 openapi-typescript / orval / openapi-generator 命令，生成 src/api/ 下的类型与客户端。 环境变量配置：在 .env.local 中配置 NEXT_PUBLIC_API_BASE_URL 等运行时所需的公开变量。

使用步骤

规划前端功能：用 Prompt"Use the develop-frontend skill to plan the UI for [feature]"让 AI 列出要创建的文件、可复用的 shadcn/ui 组件、依赖的项目文档。 实现 API 视图：调用"Build an API view"指令生成 page.tsx、container、presentational 组件、API Hook，统一处理 loading / error 状态。 添加校验与表单：使用 React Hook Form + Zod 模板补齐表单字段、错误提示、提交逻辑，并接入 shadcn/ui 的 Form / Input 组件。 补充测试与 Mock：调用"Add tests and mocks"指令生成 Vitest 用例、Testing Library 行为测试、MSW API Mock，覆盖加载与错误态。 完成交付验证：执行 pnpm lint / pnpm test / pnpm build / pnpm dev 四步验证，浏览器手工跑一遍主流程与响应式断点，再撰写完成报告。

适用场景

新页面开发：为已有 Next.js 项目添加一个带数据请求、表单、错误处理、测试覆盖的完整功能页面。 前端交付标准化：在团队内推行统一的组件分层、API Hook 封装、测试与验证流程。 API 驱动界面落地：把 OpenAPI spec 生成的客户端接入 React Hook Form + Zod 表单，覆盖完整业务流。 跨团队协作：让 AI 代理在多个前端工程师协作时遵循同一套规范，降低 PR Review 成本。 前端培训演练：作为新人学习 Next.js App Router、shadcn/ui、Vitest 工程化实践的标准化教学样本。

适用人群

Next.js / React 前端工程师：在 App Router 项目中负责页面、组件、表单、测试交付的全栈前端。 前端架构师：需要在团队中推行组件分层、API 客户端封装、测试覆盖规范的 Tech Lead。 全栈开发者：同时承担前后端开发的独立开发者或初创团队工程师。 产品工程师（Product Engineer）：在产品迭代中负责把 PRD 拆解为可交付前端功能的工程师。 前端教学讲师：日常教学现代 React 工程化实践的讲师与课程作者。

工作原理

技能以 Next.js App Router 工作流与提示词库为底座，不依赖特定云服务。它把前端功能交付的标准流程拆解为"分支与文档检查 → 组件分层 → API Hook 封装 → 表单与校验 → 测试覆盖 → 交付验证"六个环节，每个环节都用对应的 Markdown 模板与 Prompt 引导 AI 代理按既定规范执行。所有生成的代码默认遵循"presentational 与 container 分离、shadcn/ui 组件不直接修改、loading/error/empty 三态必有覆盖、测试覆盖关键用户路径"四项原则。整体设计强调"规范统一 + 测试就绪 + 可维护性 + 验证闭环"四大目标。

官方链接

Skillstore 详情页：https://skillstore.io/skills/crearize-develop-frontend GitHub 仓库：https://github.com/Crearize/ProjectTemplate/tree/main/.claude/skills/develop-frontend 一键安装：npx skillstore add crearize/develop-frontend Manifest：https://skillstore.io/api/skills/crearize-develop-frontend/manifest