react-nextjs-development · 现代 React 与 Next.js 应用阶段化开发技能

技能简介

react-nextjs-development 是 Skillstore 作者 sickn33 发布的 SKILL.md 格式技能，面向 React SPA 与 Next.js 14 App Router 项目提供一套"分阶段推进 + 每阶段聚焦提示词"的工作流。技能把现代前端工程涉及的组件架构、状态管理、样式、数据获取、路由、表单、测试、部署 8 大模块拆解为顺序阶段，每个阶段都给出对应的聚焦提示词与可选的"专家技能"调用建议，让 Claude、Codex、Claude Code 在编码时按统一的工程基线推进。版本 v1.0.0（2026-07-07），质量评分 80（Silver 级别），主仓库位于 sickn33/antigravity-awesome-skills，安全审计结果为 Safe——全部静态扫描发现均为 Markdown 反引号与代码围栏导致的误报，未发现可执行脚本、Shell 命令、网络访问或提示注入。

核心能力

• 项目初始化阶段：覆盖 React SPA、Next.js 14 App Router 项目的 TypeScript 初始化、目录结构、配置文件与基础依赖清单。
• 组件架构与状态管理：拆解 layout 组件、可复用 UI 组件、状态边界（Zustand / React Query）、自定义 hooks，给出可直接消费的提示模板。
• 样式系统集成：Tailwind CSS、Server Components 下的样式边界、CSS-in-JS 与 utility class 的取舍方案。
• 数据获取与表单：API 集成、React Query 数据流、React Hook Form 表单与无障碍校验的搭配模式。
• 路由与部署：Next.js App Router 路由组织、Vercel 部署、环境变量与生产构建产物的发布流程。
• 质量门禁：TypeScript 类型检查、单元测试、端到端测试、Lint、性能、无障碍、响应式设计七大维度齐备的发布前质量门。

安装配置

• 支持 Agent：Claude、Codex、Claude Code（CC），三套工作流共用同一份 SKILL.md。
• 技术栈默认组合：TypeScript + Tailwind CSS + Zustand + React Query + React Hook Form + Vitest + Playwright + Vercel，技能为每个工具给出角色定位与配合建议。
• 可选配套技能：技能清单中给出多个可调用的细分技能（Tailwind、Server Components、表单、测试、部署），按项目阶段引入相应专家技能可获得更聚焦的输出。
• 外部命令依赖：SKILL.md 内的命令示例均为文档示例，审计确认无 shell 注入风险；实际触发命令由用户审查后手动执行。
• 安装方式：通过 npx skillstore add sickn33/react-nextjs-development 安装，或直接下载 SKILL.md 放入 Claude / Codex / Claude Code 的 skills 目录。

使用步骤

1. 在 Claude / Codex / Claude Code 中加载技能 react-nextjs-development，让 Agent 读取 SKILL.md 的阶段化工作流。
2. 描述项目类型（React SPA 还是 Next.js 14 App Router），让 Agent 输出第一阶段——技术栈选型、目录结构、TypeScript 与 Tailwind 配置。
3. 让 Agent 按阶段推进组件架构：layout 组件、可复用 UI 组件、状态边界、自定义 hooks 划分，每段生成完毕再开启下一段。
4. 推进数据层：API 集成、React Query 数据流、React Hook Form 表单与无障碍校验的搭配。
5. 完成路由与部署阶段：Next.js App Router 路由组织、Vercel 部署配置、环境变量清单、生产构建产物发布。
6. 走质量门：TypeScript 类型、Vitest 单元测试、Playwright 端到端测试、Lint、Lighthouse 性能、axe 无障碍、响应式设计七大项逐项过审。

适用场景

• 新前端项目冷启动：从零搭建 React SPA 或 Next.js 14 App Router 应用，需要明确的阶段划分与技术栈选型。
• Next.js 全栈交付：服务端组件 + API 集成 + 表单 + 测试 + Vercel 部署的完整交付链路协同。
• 团队实现步骤标准化：多人协作时按统一阶段清单与质量门，避免风格漂移、跳步、漏测。
• AI 辅助前端开发：使用 Claude / Codex / Claude Code 时，让 Agent 按统一工作流产出符合团队规范的代码。
• 前端项目上线前 review：走技能给出的质量门清单补齐类型、测试、Lint、性能、无障碍、响应式等环节。

适用人群

• 使用 React 与 Next.js 14 构建现代前端应用的工程师
• 采用 Claude / Codex / Claude Code 进行前端 AI 辅助开发的工程师
• 需要为团队建立前端工程规范的技术负责人
• 准备 Vercel 部署、需要进行端到端测试与性能审计的前端工程师
• 从 React 18 SPA 升级到 Next.js 14 App Router 的迁移工程师

工作原理

技能是一份面向 Agent 的结构化提示工程文件，由作者 sickn33 从多年 React 与 Next.js 项目交付经验中沉淀。它把现代前端工程的 8 大模块（架构、状态、样式、数据、路由、表单、测试、部署）拆解为顺序阶段清单，并为每个阶段提供聚焦提示词模板与可选的"专家技能"调用建议。Agent 加载 SKILL.md 后，按阶段顺序消费提示词，先打地基（项目骨架 + 类型 + 样式）再逐层垒高（组件 + 数据 + 路由 + 表单），最后走质量门完成交付。这种方式把"一次性生成完整应用"拆成可验证的小步骤，既降低了 AI 一次性输出大段代码的错误率，也让团队能随时在任意阶段介入调整。

官方链接

• 技能主页：https://skillstore.io/skills/sickn33-react-nextjs-development
• 安全审计报告（v4）：https://skillstore.io/skills/sickn33-react-nextjs-development/audits/4
• SKILL.md Markdown：https://skillstore.io/skills/sickn33-react-nextjs-development.md
• 作者仓库：https://github.com/sickn33/antigravity-awesome-skills
• React 官方文档：https://react.dev/
• Next.js 14 官方文档：https://nextjs.org/docs
• Skillstore 平台：https://skillstore.io/

出品方与版本

• 作者：sickn33
• 版本：v1.0.0（内容修订 r1）
• 首发日期：2026-07-07
• 审计版本：Audit v4（Safe）
• 许可协议：MIT License