Add comprehensive skills and documentation for various technologies

.claude/skills/frameworks/nextjs/SKILL.md

@@ -0,0 +1,112 @@
+# Next.js
+
+## Description
+
+Next.js framework with App Router, Server Components, and full-stack development patterns.
+
+## When to Use
+
+- React applications with SSR/SSG
+- Full-stack applications
+- App Router patterns
+
+---
+
+## Core Patterns
+
+### App Router Structure
+
+```
+app/
+├── layout.tsx          # Root layout
+├── page.tsx            # Home page
+├── loading.tsx         # Loading UI
+├── error.tsx           # Error UI
+├── api/
+│   └── users/
+│       └── route.ts    # API route
+└── users/
+    ├── page.tsx        # Users page
+    └── [id]/
+        └── page.tsx    # User detail
+```
+
+### Server Components
+
+```tsx
+// app/users/page.tsx - Server Component (default)
+async function UsersPage() {
+  const users = await db.users.findMany();
+
+  return (
+    <ul>
+      {users.map(user => (
+        <li key={user.id}>{user.name}</li>
+      ))}
+    </ul>
+  );
+}
+```
+
+### Client Components
+
+```tsx
+'use client';
+
+import { useState } from 'react';
+
+export function Counter() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <button onClick={() => setCount(c => c + 1)}>
+      Count: {count}
+    </button>
+  );
+}
+```
+
+### API Routes
+
+```typescript
+// app/api/users/route.ts
+import { NextRequest, NextResponse } from 'next/server';
+
+export async function GET() {
+  const users = await db.users.findMany();
+  return NextResponse.json(users);
+}
+
+export async function POST(request: NextRequest) {
+  const data = await request.json();
+  const user = await db.users.create({ data });
+  return NextResponse.json(user, { status: 201 });
+}
+```
+
+### Server Actions
+
+```tsx
+// app/actions.ts
+'use server';
+
+export async function createUser(formData: FormData) {
+  const name = formData.get('name') as string;
+  await db.users.create({ data: { name } });
+  revalidatePath('/users');
+}
+```
+
+## Best Practices
+
+1. Use Server Components by default
+2. Add 'use client' only when needed
+3. Colocate data fetching with components
+4. Use loading.tsx for suspense boundaries
+5. Implement proper error boundaries
+
+## Common Pitfalls
+
+- **Using hooks in Server Components**: Mark as 'use client'
+- **Large client bundles**: Keep client components small
+- **Missing loading states**: Add loading.tsx files