React (Next.js UI Development)
基于Next.js框架，专注于高效构建现代Web UI的AI助手技能。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：React (Next.js UI Development)。 它的用途是：基于Next.js框架，专注于高效构建现代Web UI的AI助手技能。 详细介绍见：https://321skill.com/skills/react-next-js-ui-development/ 请根据该页面的说明完成安装。
使用示例
“我需要一个用户个人资料卡片组件，使用Next.js 14的App Router，服务端获取数据，样式用Tailwind，包含头像、姓名和编辑按钮。”，它会生成一个包含异步数据获取函数、服务端组件定义、Tailwind样式类和基本交互逻辑的完整组件文件代码。
介绍
该技能旨在解决开发者在构建现代Web应用用户界面时遇到的效率瓶颈和复杂性挑战。它通过提供针对Next.js框架的智能代码生成、组件结构优化和最佳实践建议，将重复性、样板化的UI开发工作自动化。
使用时，开发者只需向AI描述所需UI的功能、样式或交互逻辑，该技能便能生成相应的React组件代码、配置路由、处理状态管理，甚至提供性能优化方案。它深度集成了Next.js的App Router、Server Components等核心特性。
它非常适合前端开发、全栈开发和UI设计师，特别是那些正在或计划使用Next.js进行项目开发，希望提升UI构建速度、保证代码质量并紧跟最新框架特性的技术人员。
建议在项目初期搭建基础架构、开发可复用组件库或快速原型验证时重点使用。注意，它主要聚焦于UI层和Next.js框架集成，对于复杂的后端业务逻辑或特定的数据源处理，可能需要结合其他技能或手动开发。
核心特点
与通用React代码生成技能相比，它深度绑定Next.js生态，能生成符合Next.js最新规范（如App Router、Server Components）的代码结构；与普通代码补全工具相比，它能理解完整的UI需求上下文，生成功能完整、可直接集成的组件模块。
注意事项
不适合用于生成与Next.js框架无关的纯逻辑代码，或处理特定、非标准的第三方UI库深度定制。
常见问题
它能帮我搭建一个完整的Next.js项目吗？
可以，它能生成项目脚手架、基础页面和组件结构，但完整的项目配置（如数据库连接、复杂API路由）可能需要额外步骤。
支持哪些UI库或样式方案？
支持主流的如Tailwind CSS、Material-UI、Chakra UI等，生成代码时会根据你的描述适配相应的样式写法。