claudient 0.1.0

package/skills/backend/nodejs/nextjs.md

@@ -0,0 +1,220 @@
+# Next.js Skill
+
+## When to activate
+- Building a Next.js application using the App Router
+- Deciding between Server Components and Client Components
+- Writing Server Actions for form submissions and mutations
+- Setting up route handlers (API endpoints in App Router)
+- Implementing authentication with NextAuth or a JWT pattern
+- Configuring middleware for redirects and auth guards
+- Optimizing data fetching with React `cache()` and `unstable_cache`
+- Using parallel routes, intercepting routes, or route groups
+
+## When NOT to use
+- Pages Router projects — the patterns differ significantly
+- Pure SPAs with no server rendering (use Vite + React)
+- NestJS or Express backends — use NestJS skill
+- Static sites with no dynamic data (use Astro)
+
+## Instructions
+
+### App Router directory structure
+```
+app/
+├── (auth)/              # Route group — no URL segment
+│   ├── login/
+│   │   └── page.tsx
+│   └── layout.tsx       # Auth-specific layout
+├── (dashboard)/
+│   ├── dashboard/
+│   │   ├── page.tsx     # Server Component by default
+│   │   └── loading.tsx  # Suspense boundary UI
+│   └── layout.tsx
+├── api/
+│   └── webhooks/
+│       └── stripe/
+│           └── route.ts # Route Handler
+├── layout.tsx           # Root layout (required)
+└── page.tsx             # Home page
+components/
+├── ui/                  # Presentational (can be server or client)
+└── forms/               # Always client components (useState/events)
+lib/
+├── auth.ts
+├── db.ts
+└── actions/             # Server Actions
+    └── user.ts
+```
+
+### Server vs. Client Components
+```tsx
+// Server Component (default) — runs on server, never sent to client
+// Can: await fetch, read DB, access env vars
+// Cannot: useState, useEffect, browser APIs, event handlers
+export default async function UserProfile({ id }: { id: string }) {
+  const user = await db.user.findUnique({ where: { id } })
+  return <div>{user.name}</div>
+}
+
+// Client Component — add 'use client' directive
+'use client'
+import { useState } from 'react'
+
+export function LikeButton({ initialCount }: { initialCount: number }) {
+  const [count, setCount] = useState(initialCount)
+  return <button onClick={() => setCount(c => c + 1)}>{count} likes</button>
+}
+```
+
+Rule: default to Server Components. Add `'use client'` only when you need interactivity, browser APIs, or React hooks.
+
+### Data fetching patterns
+```tsx
+// Server Component — direct async/await, no useEffect, no useState
+export default async function PostList() {
+  const posts = await db.post.findMany({ where: { published: true } })
+  return <ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul>
+}
+
+// Deduplication — React cache() wraps a function so multiple components
+// calling it in one render share one fetch
+import { cache } from 'react'
+export const getUser = cache(async (id: string) => {
+  return db.user.findUnique({ where: { id } })
+})
+
+// Static generation with revalidation
+async function getProducts() {
+  const res = await fetch('https://api.example.com/products', {
+    next: { revalidate: 3600 }, // ISR — revalidate every hour
+  })
+  return res.json()
+}
+```
+
+### Server Actions
+```tsx
+// lib/actions/user.ts
+'use server'
+import { revalidatePath } from 'next/cache'
+import { z } from 'zod'
+
+const UpdateSchema = z.object({
+  name: z.string().min(1),
+})
+
+export async function updateUser(formData: FormData) {
+  const parsed = UpdateSchema.safeParse({ name: formData.get('name') })
+  if (!parsed.success) return { error: parsed.error.flatten() }
+
+  await db.user.update({ where: { id: getCurrentUserId() }, data: parsed.data })
+  revalidatePath('/dashboard/profile')
+  return { success: true }
+}
+
+// In a Server Component:
+export default function ProfileForm({ user }: { user: User }) {
+  return (
+    <form action={updateUser}>
+      <input name="name" defaultValue={user.name} />
+      <button type="submit">Save</button>
+    </form>
+  )
+}
+```
+
+### Route Handlers
+```ts
+// app/api/webhooks/stripe/route.ts
+import { NextRequest, NextResponse } from 'next/server'
+import Stripe from 'stripe'
+
+export async function POST(req: NextRequest) {
+  const body = await req.text()
+  const sig = req.headers.get('stripe-signature')!
+
+  let event: Stripe.Event
+  try {
+    event = stripe.webhooks.constructEvent(body, sig, process.env.STRIPE_WEBHOOK_SECRET!)
+  } catch {
+    return NextResponse.json({ error: 'Invalid signature' }, { status: 400 })
+  }
+
+  if (event.type === 'checkout.session.completed') {
+    await handleCheckoutCompleted(event.data.object)
+  }
+
+  return NextResponse.json({ received: true })
+}
+```
+
+### Middleware
+```ts
+// middleware.ts (root level)
+import { NextResponse } from 'next/server'
+import type { NextRequest } from 'next/server'
+
+export function middleware(request: NextRequest) {
+  const token = request.cookies.get('auth-token')
+  if (!token && request.nextUrl.pathname.startsWith('/dashboard')) {
+    return NextResponse.redirect(new URL('/login', request.url))
+  }
+  return NextResponse.next()
+}
+
+export const config = {
+  matcher: ['/dashboard/:path*', '/api/protected/:path*'],
+}
+```
+
+### Parallel and intercepting routes
+```
+app/
+├── @modal/          # Parallel route — renders alongside main content
+│   └── (.)photo/    # Intercepting route — intercepts /photo/[id]
+│       └── [id]/
+│           └── page.tsx
+├── photo/
+│   └── [id]/
+│       └── page.tsx
+└── layout.tsx       # Accepts { children, modal } as props
+```
+
+### Error and loading boundaries
+```tsx
+// app/dashboard/loading.tsx — shown during Suspense
+export default function Loading() {
+  return <DashboardSkeleton />
+}
+
+// app/dashboard/error.tsx — error boundary for this segment
+'use client'
+export default function Error({ error, reset }: { error: Error; reset: () => void }) {
+  return (
+    <div>
+      <p>{error.message}</p>
+      <button onClick={reset}>Retry</button>
+    </div>
+  )
+}
+```
+
+### Environment variables
+- `NEXT_PUBLIC_*` — exposed to the browser
+- All others — server-only (never accessible in Client Components)
+- Never import a server-only env var inside a Client Component — it returns `undefined` silently
+
+## Example
+
+**User:** Add a paginated blog posts page at `/blog` that fetches from PostgreSQL, with a "New Post" modal that opens at `/blog/new` but doesn't navigate away from the posts list.
+
+**Expected output:**
+- `app/blog/page.tsx` — Server Component, fetches posts with `db.post.findMany`, renders `<PostList>` + `<Link href="/blog/new">`
+- `app/@modal/(.)blog/new/page.tsx` — Intercepting route showing a `<NewPostModal>` Client Component
+- `app/blog/new/page.tsx` — Full-page fallback for direct navigation
+- `app/layout.tsx` — Updated to accept `modal` parallel route slot and render it alongside `children`
+- `lib/actions/post.ts` — `createPost` Server Action with Zod validation + `revalidatePath('/blog')`
+
+---
+
+> **Work with us:** Claudient is backed by [Uitbreiden](https://uitbreiden.com/) — we build AI products and B2B solutions with developer communities. [uitbreiden.com](https://uitbreiden.com/)

package/skills/backend/nodejs/nl/nestjs.md

@@ -0,0 +1,274 @@
+> 🇳🇱 Dit is de Nederlandse vertaling. [Engelse versie](../nestjs.md).
+
+# NestJS Skill
+
+## Wanneer te activeren
+- Een NestJS-applicatie bouwen (modules, controllers, services)
+- Guards, interceptors, pipes en exception filters instellen
+- TypeORM of Prisma integreren met NestJS
+- CQRS implementeren met commando's, queries en events
+- Microservices instellen (TCP, Redis, RabbitMQ transport)
+- Unit- en e2e-tests schrijven met Jest en Supertest
+- OpenAPI-documentatie genereren met `@nestjs/swagger`
+
+## Wanneer NIET te gebruiken
+- Next.js API-routes of standalone Fastify — ander framework
+- Eenvoudige Express-scripts — NestJS-overhead is niet gerechtvaardigd
+- Lambda-functies waarbij cold start-tijd kritiek is
+
+## Instructies
+
+### Module-structuur
+```
+src/
+├── app.module.ts           # Root module
+├── main.ts                 # Bootstrap
+├── common/
+│   ├── decorators/
+│   ├── filters/
+│   ├── guards/
+│   ├── interceptors/
+│   └── pipes/
+├── config/
+│   └── configuration.ts   # ConfigService-instelling
+└── modules/
+    └── users/
+        ├── users.module.ts
+        ├── users.controller.ts
+        ├── users.service.ts
+        ├── dto/
+        │   ├── create-user.dto.ts
+        │   └── update-user.dto.ts
+        ├── entities/
+        │   └── user.entity.ts
+        └── users.service.spec.ts
+```
+
+### Bootstrap
+```ts
+// main.ts
+import { NestFactory } from '@nestjs/core'
+import { AppModule } from './app.module'
+import { ValidationPipe } from '@nestjs/common'
+import { DocumentBuilder, SwaggerModule } from '@nestjs/swagger'
+
+async function bootstrap() {
+  const app = await NestFactory.create(AppModule)
+
+  app.useGlobalPipes(new ValidationPipe({
+    whitelist: true,       // verwijder onbekende velden
+    forbidNonWhitelisted: true,
+    transform: true,       // transformeer payloads automatisch naar DTO-klassen
+  }))
+
+  const config = new DocumentBuilder()
+    .setTitle('API')
+    .setVersion('1.0')
+    .addBearerAuth()
+    .build()
+  SwaggerModule.setup('docs', app, SwaggerModule.createDocument(app, config))
+
+  await app.listen(3000)
+}
+bootstrap()
+```
+
+### Module, Controller, Service
+```ts
+// users.module.ts
+@Module({
+  imports: [TypeOrmModule.forFeature([User]), JwtModule.register({})],
+  controllers: [UsersController],
+  providers: [UsersService],
+  exports: [UsersService],
+})
+export class UsersModule {}
+
+// users.controller.ts
+@ApiTags('users')
+@ApiBearerAuth()
+@UseGuards(JwtAuthGuard)
+@Controller('users')
+export class UsersController {
+  constructor(private readonly usersService: UsersService) {}
+
+  @Post()
+  @HttpCode(HttpStatus.CREATED)
+  create(@Body() dto: CreateUserDto): Promise<UserResponseDto> {
+    return this.usersService.create(dto)
+  }
+
+  @Get(':id')
+  findOne(@Param('id', ParseUUIDPipe) id: string): Promise<UserResponseDto> {
+    return this.usersService.findOneOrFail(id)
+  }
+}
+
+// users.service.ts
+@Injectable()
+export class UsersService {
+  constructor(
+    @InjectRepository(User)
+    private readonly userRepo: Repository<User>,
+  ) {}
+
+  async create(dto: CreateUserDto): Promise<User> {
+    const exists = await this.userRepo.findOneBy({ email: dto.email })
+    if (exists) throw new ConflictException('Email already in use')
+    const user = this.userRepo.create({
+      ...dto,
+      password: await bcrypt.hash(dto.password, 10),
+    })
+    return this.userRepo.save(user)
+  }
+
+  async findOneOrFail(id: string): Promise<User> {
+    const user = await this.userRepo.findOneBy({ id })
+    if (!user) throw new NotFoundException(`User ${id} not found`)
+    return user
+  }
+}
+```
+
+### DTO's met class-validator
+```ts
+// dto/create-user.dto.ts
+import { IsEmail, IsString, MinLength, IsOptional } from 'class-validator'
+import { ApiProperty, ApiPropertyOptional } from '@nestjs/swagger'
+
+export class CreateUserDto {
+  @ApiProperty({ example: 'user@example.com' })
+  @IsEmail()
+  email: string
+
+  @ApiProperty({ minLength: 8 })
+  @IsString()
+  @MinLength(8)
+  password: string
+
+  @ApiPropertyOptional()
+  @IsOptional()
+  @IsString()
+  name?: string
+}
+```
+
+### Guards
+```ts
+// common/guards/jwt-auth.guard.ts
+@Injectable()
+export class JwtAuthGuard extends AuthGuard('jwt') {
+  handleRequest<T>(err: Error, user: T, info: Error): T {
+    if (err || !user) {
+      throw err || new UnauthorizedException(info?.message)
+    }
+    return user
+  }
+}
+
+// common/guards/roles.guard.ts
+@Injectable()
+export class RolesGuard implements CanActivate {
+  constructor(private reflector: Reflector) {}
+
+  canActivate(context: ExecutionContext): boolean {
+    const roles = this.reflector.getAllAndOverride<Role[]>('roles', [
+      context.getHandler(),
+      context.getClass(),
+    ])
+    if (!roles) return true
+    const { user } = context.switchToHttp().getRequest()
+    return roles.some(role => user.roles?.includes(role))
+  }
+}
+```
+
+### Interceptors
+```ts
+// common/interceptors/transform.interceptor.ts
+@Injectable()
+export class TransformInterceptor<T>
+  implements NestInterceptor<T, { data: T; timestamp: string }>
+{
+  intercept(context: ExecutionContext, next: CallHandler): Observable<any> {
+    return next.handle().pipe(
+      map(data => ({ data, timestamp: new Date().toISOString() }))
+    )
+  }
+}
+```
+
+### CQRS
+```ts
+// Installeer: @nestjs/cqrs
+
+// commands/create-user.command.ts
+export class CreateUserCommand {
+  constructor(public readonly dto: CreateUserDto) {}
+}
+
+// commands/create-user.handler.ts
+@CommandHandler(CreateUserCommand)
+export class CreateUserHandler implements ICommandHandler<CreateUserCommand> {
+  constructor(private readonly userRepo: UserRepository) {}
+
+  async execute(command: CreateUserCommand): Promise<User> {
+    const user = User.create(command.dto)
+    await this.userRepo.save(user)
+    return user
+  }
+}
+
+// In service/controller:
+const user = await this.commandBus.execute(new CreateUserCommand(dto))
+```
+
+### Testen
+```ts
+// Unit test
+describe('UsersService', () => {
+  let service: UsersService
+  let repo: jest.Mocked<Repository<User>>
+
+  beforeEach(async () => {
+    const module = await Test.createTestingModule({
+      providers: [
+        UsersService,
+        { provide: getRepositoryToken(User), useValue: createMockRepository() },
+      ],
+    }).compile()
+    service = module.get(UsersService)
+    repo = module.get(getRepositoryToken(User))
+  })
+
+  it('throws ConflictException for duplicate email', async () => {
+    repo.findOneBy.mockResolvedValue(existingUser)
+    await expect(service.create(dto)).rejects.toThrow(ConflictException)
+  })
+})
+
+// E2E-test
+describe('POST /users', () => {
+  it('creates a user', () => {
+    return request(app.getHttpServer())
+      .post('/users')
+      .send({ email: 'a@b.com', password: 'password123' })
+      .expect(201)
+  })
+})
+```
+
+## Voorbeeld
+
+**Gebruiker:** Voeg een `Products`-module toe aan een NestJS-app met TypeORM, inclusief CRUD-endpoints, admin-only delete beveiligd door een `RolesGuard`, en OpenAPI-documentatie.
+
+**Verwachte output:**
+- `products.entity.ts` — TypeORM-entiteit met `id` (UUID), `name`, `price` (decimal), `stock`, `createdAt`
+- `dto/create-product.dto.ts` — class-validator DTO met `@ApiProperty`-decorators
+- `products.service.ts` — CRUD-methoden met `Repository<Product>`, die `NotFoundException` gooit bij ontbrekende items
+- `products.controller.ts` — alle CRUD-endpoints, `@UseGuards(JwtAuthGuard, RolesGuard)` + `@Roles(Role.Admin)` op `DELETE`
+- `products.module.ts` — importeert `TypeOrmModule.forFeature([Product])`
+
+---
+
+> **Werk met ons:** Claudient wordt ondersteund door [Uitbreiden](https://uitbreiden.com/) — we bouwen AI-producten en B2B-oplossingen met ontwikkelaarsgemeenschappen. [uitbreiden.com](https://uitbreiden.com/)