菜单
Creates pages, layouts, and server/client components in Next.js 16 App Router. Use for: new routes, RSC/RCC decisions, Server Actions, loading/error states. DO NOT use for: Convex mutations (use managing-convex), styling (use styling-ui).
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | developing-nextjs |
| description | Creates pages, layouts, and server/client components in Next.js 16 App Router. Use for: new routes, RSC/RCC decisions, Server Actions, loading/error states. DO NOT use for: Convex mutations (use managing-convex), styling (use styling-ui). |
Next.js 16 App Router overview. Use the specific skills below for actual tasks.
| Task | Use Skill |
|---|---|
| Create a new page/route | adding-route |
| Build interactive component | creating-client-component |
| Server-side form mutation | writing-server-actions |
| SSR with Convex reactivity | preloading-convex-data |
| Styling components | styling-ui |
'use client''use client' only for interactive leaves (hooks, events)any. Explicitly type props.Need data from Convex?
├─ Server Component → preloadQuery() → see `preloading-convex-data`
├─ Client-only reactive → useQuery() directly
└─ Non-reactive SSR → fetchQuery()
Need interactivity?
├─ Yes → see `creating-client-component`
└─ No → Server Component (default)
Need form mutation?
├─ Yes → see `writing-server-actions`
└─ No → Use what's appropriate
| Concern | Location |
|---|---|
| Routes | app/ |
| Shared Components | components/ |
| UI Primitives | components/ui/ |
| Providers | components/providers/ |
| Layouts | components/layout/ |
fetch() directly — use Convex or Server ActionsuseState'use client' unless hooks/events are neededAdds a new table to Convex schema with indexes. Input: Table name, fields, and query patterns. Output: Updated schema.ts with new table definition.
Creates a new page/route in Next.js App Router with all boilerplate. Input: Route path (e.g., "/dashboard") and page purpose. Output: page.tsx, layout.tsx (if needed), loading.tsx, error.tsx.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
Creates interactive React Client Components with hooks and event handlers. Input: Component name, purpose, required interactivity. Output: Client component file with proper structure and tests.
Generates images using Pollinations API. Validates model constraints and dimensions. Use for: image generation logic, model selection, constraint validation. DO NOT use for: video generation (use generating-videos), UI styling (use styling-ui).
Generates videos using Pollinations API. Validates duration, audio, and interpolation capabilities. Use for: video generation logic, model selection, duration constraints. DO NOT use for: image generation (use generating-images), thumbnailing (handled automatically).