name: fullstack
description: Use this skill when building web applications, React components, Next.js apps, APIs, databases, or doing rapid prototyping. Activates on mentions of React, Next.js, TypeScript, Node.js, Express, Fastify, PostgreSQL, MongoDB, Prisma, Drizzle, tRPC, REST API, GraphQL, authentication, server components, client components, SSR, SSG, ISR, or general web development.

Fullstack Development

Build modern web applications with React 19, Next.js 15+, and server-first architecture.

Quick Reference

React 19 + Next.js 15 Patterns

Server Components (Default)

// app/page.tsx - Server Component by default
export default async function Page() {
  const data = await db.query("SELECT * FROM posts"); // Direct DB access
  return <PostList posts={data} />;
}

Client Components (Opt-in)

"use client";
// Only for interactivity: useState, useEffect, event handlers
export function LikeButton({ postId }) {
  const [liked, setLiked] = useState(false);
  return <button onClick={() => setLiked(!liked)}>Like</button>;
}

Server Actions

"use server";
export async function createPost(formData: FormData) {
  const title = formData.get("title");
  await db.insert(posts).values({ title });
  revalidatePath("/posts");
}

React Compiler (Auto-Memoization)

Enable in next.config.js:

module.exports = {
  experimental: {
    reactCompiler: true,
  },
};

No more manual memoization - the compiler handles useMemo, useCallback, React.memo automatically.

State Management Stack

TanStack Query for Server State

const { data, isLoading } = useQuery({
  queryKey: ["posts"],
  queryFn: () => fetch("/api/posts").then((r) => r.json()),
});

Zustand for Client State

const useStore = create((set) => ({
  theme: "dark",
  setTheme: (theme) => set({ theme }),
}));

Component Libraries (2026)

Recommended Stack:

• shadcn/ui - Copy-paste components, full control
• Base UI - Unstyled primitives (replacing Radix)
• Tailwind CSS v4 - Utility-first styling

Database Patterns

Drizzle ORM (Type-safe, lightweight)

const posts = await db.select().from(postsTable).where(eq(postsTable.authorId, userId));

Prisma (DX-focused, migrations)

const posts = await prisma.post.findMany({ where: { authorId: userId } });

Performance Imperatives

1. Eliminate waterfalls - Use Promise.all() for parallel fetches
2. Stream with Suspense - Progressive rendering
3. Minimize 'use client' - Every directive increases bundle
4. Use Route Segment Config - dynamic, revalidate options

Core Web Vitals Targets

• LCP < 2.5s (Largest Contentful Paint)
• INP < 200ms (Interaction to Next Paint)
• CLS < 0.1 (Cumulative Layout Shift)

Agents

• frontend-developer - React, styling, components, performance
• backend-architect - APIs, auth, system design
• rapid-prototyper - MVPs in days, not weeks
• database-specialist - Schema, queries, migrations, optimization

Deep Dives

• references/react-19-patterns.md
• references/nextjs-app-router.md
• references/state-management.md
• references/database-patterns.md

Examples

• examples/nextjs-app-starter/
• examples/trpc-stack/
• examples/auth-patterns/