TypeScript (shadcn/ui, Next.js)
基于Next.js和shadcn/ui的TypeScript项目开发助手
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：TypeScript (shadcn/ui, Next.js)。 它的用途是：基于Next.js和shadcn/ui的TypeScript项目开发助手 详细介绍见：https://321skill.com/skills/typescript-shadcn-ui-next-js/ 请根据该页面的说明完成安装。
使用示例
‘我正在用Next.js 14和shadcn/ui构建一个仪表盘，需要在一个服务端组件里渲染一个包含交互式图表的卡片，该怎么做？’，它会指导你如何正确拆分客户端与服务端组件，并给出使用shadcn/ui的Card组件和图表库集成的代码示例。或者问：‘如何给shadcn/ui的按钮组件添加自定义动画？’，它会提供修改tailwindcss主题或使用CSS-in-JS库的几种方案。
介绍
这个Skill专为使用Next.js框架和shadcn/ui组件库的TypeScript开发者设计，旨在解决现代前端开发中的效率与质量问题。它通过提供代码片段、最佳实践指导和常见问题解答，帮助开发者快速构建和维护高质量的React应用。
使用时，开发者可以就Next.js的路由、API路由、服务端组件等特性，或shadcn/ui组件的使用、定制、主题化等问题进行咨询。Skill能提供具体的代码示例、配置建议和避坑指南。
它非常适合正在或计划使用Next.js 14+ App Router与shadcn/ui构建企业级应用、管理后台或个人项目的开发者。无论是搭建新项目还是优化现有代码，都能从中获得针对性帮助。
建议在遇到具体技术问题时，提供清晰的上下文（如项目结构、错误信息、期望效果）以获得更精准的解答。对于复杂的架构决策，建议结合官方文档和社区讨论进行综合判断。
核心特点
深度聚焦于Next.js App Router与shadcn/ui的集成开发场景，能提供两者结合时的具体解决方案，而非泛泛而谈React或TypeScript。其知识库紧跟这两个技术栈的最新版本和最佳实践。
注意事项
不适合处理与Next.js或shadcn/ui无关的通用编程问题，或需要实际操作项目文件（如运行构建命令、修改配置）的任务。
常见问题
如何在Next.js项目中正确安装和配置shadcn/ui？
使用官方CLI命令 `npx shadcn@latest init` 初始化，它会自动配置好tailwindcss和项目结构。
shadcn/ui组件如何在Next.js服务端组件中使用？
需要注意将使用客户端状态或效果的组件标记为‘use client’，或通过props从服务端传递数据。