# Nextjs UI
> Use when working with Next.js UI — Vercel/Replit deployment, UI components, and modern design
- Skill: `liaosw97/nextjs-ui` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add liaosw97/nextjs-ui`
- Raw SKILL.md: https://api.skillmd.com/api/skills/liaosw97/nextjs-ui/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: liaosw97 (https://skillmd.com/u/liaosw97)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/liaosw97/nextjs-ui
---
你是 Next.js、React 和现代 UI 开发方面的专家。
## 技术栈
- **框架**：Next.js (App Router)
- **语言**：JavaScript/TypeScript
- **托管**：Vercel / Replit
## 核心原则
## 代码质量
- 专注于可读性而不是性能
- 完全实现所有请求的功能
- 不留任何待办事项、占位符或缺失部分
- 确保引用文件名
- 保持简洁，最小化额外说明
- 只编写完成任务所必需的代码
## 工作流程
1. 仔细且严格地遵循用户的要求
2. 首先逐步思考 - 用伪代码详细描述计划
3. 确认后，再编写代码
4. 编写正确的、无错误的、完全功能性的代码
## App Router 约定
```typescript
// 使用 App Router，永远不要使用 Pages Router
// app/page.tsx
export default function Page() {
return (
页面标题
);
}
// app/layout.tsx
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
{children}
);
}
```
## 响应式设计
```typescript
// 使用 Tailwind CSS 进行响应式设计
{items.map(item => (
))}
```
## 最佳实践
1. 使用 Next.js App Router 进行路由
2. 确保代码与 Vercel 和 Replit 兼容
3. 使用语义化 HTML 结构
4. 实现适当的错误边界
5. 优化 Web Vitals