What is this skill about?

React and Next.js patterns for building modern web apps with TypeScript, App Router, Server Components, data fetching, forms, and client-side authentication.

Which router should I pick, App Router or Pages Router?

App Router is preferred for SEO-focused pages and server components; Pages Router suits legacy projects with a simpler mental model.

What tooling and practices are recommended?

Follow the TypeScript rules (explicit props, avoid any, strict mode) and Code Quality Rules (small files, functional components, custom hooks, loading/error handling), plus the essential packages listed.

react-patterns

npx machina-cli add skill shahtuyakov/claude-setup/react-patterns --openclaw

Files (1)

SKILL.md

3.3 KB

React Patterns

Modern React and Next.js patterns with TypeScript.

Framework Selection

Setup	Best For	Use When
Next.js App Router	Full-stack, SSR/SSG	SEO matters, need server components
Next.js Pages Router	Simpler SSR	Legacy project, simpler mental model
Vite + React	SPA, client-only	No SSR needed, fastest dev experience
Create React App	Legacy	Avoid for new projects

Reference Files

Topic	Load	Use When
Project structure	`references/project-structure.md`	Setting up or organizing code
Components	`references/components.md`	Building UI components
State management	`references/state-management.md`	Managing app/component state
Data fetching	`references/data-fetching.md`	API calls, server data
Forms	`references/forms.md`	Form handling and validation
Auth (client)	`references/auth-client.md`	Client-side authentication

Quick Start Patterns

Next.js App Router Page

// app/users/page.tsx
import { getUsers } from '@/lib/api';
import { UserList } from '@/components/users/UserList';

export default async function UsersPage() {
  const users = await getUsers();

  return (
    <main className="container mx-auto py-8">
      <h1 className="text-2xl font-bold mb-6">Users</h1>
      <UserList users={users} />
    </main>
  );
}

Client Component

'use client';

import { useState } from 'react';

interface CounterProps {
  initialCount?: number;
}

export function Counter({ initialCount = 0 }: CounterProps) {
  const [count, setCount] = useState(initialCount);

  return (
    <button onClick={() => setCount(c => c + 1)}>
      Count: {count}
    </button>
  );
}

API Route (App Router)

// app/api/users/route.ts
import { NextResponse } from 'next/server';

export async function GET() {
  const users = await db.user.findMany();
  return NextResponse.json(users);
}

export async function POST(request: Request) {
  const body = await request.json();
  const user = await db.user.create({ data: body });
  return NextResponse.json(user, { status: 201 });
}

Essential Packages

Package	Purpose
`typescript`	Type safety
`tailwindcss`	Styling
`@tanstack/react-query`	Server state
`zustand`	Client state
`react-hook-form`	Forms
`zod`	Validation
`framer-motion`	Animations
`lucide-react`	Icons

TypeScript Rules

Explicit prop types - Interface for every component
No any - Use unknown if needed
Strict mode - Enable in tsconfig
Type imports - Use import type when possible

Code Quality Rules

Functional components - No class components
Named exports - Except page defaults
Small files - One component per file
Custom hooks - Extract reusable logic
Error boundaries - Wrap key sections
Loading states - Always handle loading/error

Source

git clone https://github.com/shahtuyakov/claude-setup/blob/main/skills/react-patterns/SKILL.mdView on GitHub

Overview

This skill covers patterns for building modern web apps with React and Next.js using TypeScript, App Router, and Server Components. It guides component design, data fetching, forms, state management, and client-side authentication, backed by best-practice rules and essential packages.

How This Skill Works

Patterns are organized around framework choice, reference files, and quick-start examples. It emphasizes TypeScript rules, code quality, and practical usage of packages such as @tanstack/react-query, zustand, react-hook-form, and zod to implement robust UI, data flow, and forms across server and client boundaries.

When to Use It

Build a Next.js App Router project with SEO emphasis and server components for pages.
Migrate a legacy project to Next.js Pages Router for a simpler mental model.
Create a client-only SPA (e.g., Vite + React) when SSR isn't required.
Implement forms with validation and client-side authentication using a pattern-driven approach.
Manage server data fetching and client state with libraries like react-query and zustand.

Quick Start

Step 1: Initialize a Next.js + TypeScript project with App Router and install core packages (typescript, tailwindcss, @tanstack/react-query, zustand, react-hook-form, zod, framer-motion, lucide-react).
Step 2: Create a server component page (app/users/page.tsx) that fetches data and composes a Client Component (UserList) for rendering.
Step 3: Add an API route (app/api/users/route.ts) with GET/POST and implement a client-side form using react-hook-form and zod for validation.

Best Practices

Explicit prop types for every component using interfaces.
No any; use unknown when needed and prefer import type for type-only imports.
Enable strict mode in tsconfig to ensure type safety.
Small files with one component per file and named exports.
Error boundaries and loading states everywhere; extract reusable logic into custom hooks.

Example Use Cases

Next.js App Router page fetching users with getUsers and rendering a UserList.
A client component using useState (Counter) for interactive UI.
An App Router API route with GET and POST using NextResponse.
A server component pattern that composes data fetching with UI components.
A form built with react-hook-form and zod validation for robust input handling.

Frequently Asked Questions

Add this skill to your agents