Initial commit

2025-11-30 08:47:23 +08:00
commit eb42d25f7b
51 changed files with 9966 additions and 0 deletions
--- a/skills/nextjs-reviewer/SKILL.md
+++ b/skills/nextjs-reviewer/SKILL.md
@@ -0,0 +1,158 @@
+---
+name: nextjs-reviewer
+description: |
+  WHEN: Next.js project review, App Router patterns, Server/Client Component separation, data fetching
+  WHAT: Router pattern analysis + SC/CC separation + next/image·font optimization + Server Actions review
+  WHEN NOT: General code quality → code-reviewer, Bundle performance → perf-analyzer
+---
+
+# Next.js Reviewer Skill
+
+## Purpose
+Reviews Next.js specific patterns: App Router, Server Components, data fetching, and optimizations.
+
+## When to Use
+- Next.js project code review
+- App Router, Server Component mentions
+- Next.js optimization requests
+- Projects with `next.config.js` or `next.config.mjs`
+
+## Project Detection
+- `next.config.js` or `next.config.mjs`
+- `next` dependency in `package.json`
+- `app/` directory (App Router)
+- `pages/` directory (Pages Router)
+
+## Workflow
+
+### Step 1: Analyze Configuration
+```
+**Next.js**: 14.x
+**Router**: App Router
+**TypeScript**: Enabled
+```
+
+### Step 2: Select Review Areas
+**AskUserQuestion:**
+```
+"Which areas to review?"
+Options:
+- Full Next.js pattern check (recommended)
+- Server/Client Component separation
+- Data fetching patterns
+- Image/Font optimization
+- Routing and layouts
+multiSelect: true
+```
+
+## Detection Rules
+
+### Server vs Client Components
+| Check | Recommendation | Severity |
+|-------|----------------|----------|
+| Unnecessary 'use client' | Remove if SC possible | MEDIUM |
+| async in Client Component | Move to SC | HIGH |
+| useState/useEffect | Check 'use client' need | INFO |
+
+```typescript
+// BAD: Unnecessary 'use client'
+'use client'
+export default function StaticPage() {
+  return <div>Static content</div>
+}
+
+// GOOD: Keep as Server Component
+export default function StaticPage() {
+  return <div>Static content</div>
+}
+```
+
+### App Router Files
+| File | Purpose | Check |
+|------|---------|-------|
+| `page.tsx` | Route page | Default export |
+| `layout.tsx` | Layout | children prop |
+| `loading.tsx` | Loading UI | Suspense alternative |
+| `error.tsx` | Error handling | 'use client' required |
+
+### Data Fetching
+| Pattern | Recommendation |
+|---------|----------------|
+| SC fetch | Recommended (auto caching) |
+| Route Handler | API endpoints |
+| Client SWR/React Query | Real-time data |
+
+```typescript
+// GOOD: Direct fetch in Server Component
+async function ProductPage({ params }) {
+  const product = await fetch(`/api/products/${params.id}`)
+  return <Product data={product} />
+}
+
+// WARNING: useEffect fetch in Client
+'use client'
+function ProductPage({ params }) {
+  useEffect(() => { fetch(...) }, [])
+  // Recommend: Move to Server Component
+}
+```
+
+### Image Optimization
+| Check | Issue | Severity |
+|-------|-------|----------|
+| `<img>` tag | Use `next/image` | HIGH |
+| Missing width/height | Layout shift | MEDIUM |
+| Missing priority | LCP image needs it | MEDIUM |
+
+### Server Actions
+| Check | Description | Severity |
+|-------|-------------|----------|
+| 'use server' location | Top of function/file | HIGH |
+| Input validation | Use zod | HIGH |
+| Error handling | try-catch | MEDIUM |
+
+## Response Template
+```
+## Next.js Review Results
+
+**Project**: [name]
+**Next.js**: 14.x (App Router)
+
+### Server/Client Components
+| Status | File | Issue |
+|--------|------|-------|
+| WARNING | app/products/page.tsx | Unnecessary 'use client' |
+
+### Data Fetching
+| Status | Location | Recommendation |
+|--------|----------|----------------|
+| WARNING | app/dashboard/page.tsx | Move useEffect fetch to SC |
+
+### Optimization
+| Area | Status | Details |
+|------|--------|---------|
+| Images | WARNING | 3 files using <img> |
+| Fonts | OK | Using next/font |
+
+### Actions
+1. [ ] Remove 'use client' from `app/products/page.tsx`
+2. [ ] Move fetch to Server Component
+3. [ ] Use next/image in `components/Banner.tsx`
+```
+
+## Best Practices
+1. **Server First**: Keep SC when possible
+2. **Colocation**: Fetch data where needed
+3. **Streaming**: Use loading.tsx and Suspense
+4. **Caching**: Explicit fetch caching strategy
+5. **Metadata**: Use generateMetadata
+
+## Integration
+- `code-reviewer` skill
+- `perf-analyzer` skill
+- `security-scanner` skill
+
+## Notes
+- Based on Next.js 13+ App Router
+- Pages Router has different rules
+- Review next.config.js settings too