React Development Skill

Comprehensive skill for modern React development, focusing on Next.js, TypeScript, Tailwind CSS, and the wider React ecosystem.

Technology Stack

Core Framework: React + Next.js

React Fundamentals

• Component-Based: Declarative UI building blocks

• Hooks: Functional state and side-effect management (useState , useEffect , useContext )

• Virtual DOM: Efficient reconciliation and rendering

• React Server Components (RSC): Server-side rendering with zero client-side bundle size for static content

Next.js Features (App Router)

• App Router: File-system based routing in app/ directory

• Server Actions: Direct server-side mutations from client components

• Streaming SSR: Progressive rendering with Suspense

• Metadata API: SEO and social share optimization

• Route Handlers: API endpoints (GET, POST, etc.) in route.ts files

• Middleware: Request interception and processing

UI Framework: Tailwind CSS + shadcn/ui

Tailwind CSS

• Utility-first CSS framework

• Responsive design with prefixes (md: , lg: )

• Custom configuration via tailwind.config.ts

• Dark mode support

shadcn/ui

• Reusable components built with Radix UI and Tailwind CSS

• Accessible and customizable

• "Own your code" philosophy (components copied to your project)

• Key Components: Button, Dialog, Form, Dropdown, Card, Sheet

State Management

• Local State: useState , useReducer

• Global State: React Context, Zustand (for lightweight global state)

• Server State: TanStack Query (React Query) for async data fetching and caching

Project Architecture

Recommended Directory Structure (Next.js App Router)

src/ ├── app/ │ ├── layout.tsx # Root layout │ ├── page.tsx # Home page │ ├── globals.css # Global styles │ ├── (auth)/ # Route group (doesn't affect URL path) │ │ ├── login/ │ │ │ └── page.tsx │ │ └── register/ │ │ └── page.tsx │ └── api/ # API routes ├── components/ │ ├── ui/ # shadcn/ui components │ │ ├── button.tsx │ │ └── ... │ ├── Navbar.tsx │ └── Footer.tsx ├── lib/ │ ├── utils.ts # Utility functions (cn, etc.) │ └── db.ts # Database connection └── hooks/ # Custom React hooks └── use-toast.ts

Best Practices

Component Design

• Server by Default: Use Server Components for everything that doesn't need interactivity.

• Client Boundary: Add 'use client' directive only when using hooks or event listeners.

• Composition: Use children prop to avoid prop drilling.

• Micro-Components: Break down complex UIs into smaller, single-responsibility components.

Performance

• Image Optimization: Use next/image for automatic optimization.

• Font Optimization: Use next/font to prevent layout shift.

• Lazy Loading: Use next/dynamic or React.lazy for heavy components.

• Code Splitting: Automatic in Next.js, but be mindful of large dependencies.

Accessibility (a11y)

• Use semantic HTML tags (<main> , <article> , <nav> ).

• Ensure all interactive elements have keyboard support.

• Use valid ARIA attributes when semantic HTML isn't enough.

• Radix UI primitives (used in shadcn/ui) handle many a11y concerns automatically.

Common Code Patterns

Next.js Page (Server Component)

import { db } from "@/lib/db"

export default async function DashboardPage() { const data = await db.user.findMany()

return ( <main className="p-6"> <h1 className="text-2xl font-bold">Dashboard</h1> <ul> {data.map(user => ( <li key={user.id}>{user.name}</li> ))} </ul> </main> ) }

Client Component with State

"use client"

import { useState } from "react" import { Button } from "@/components/ui/button"

export function Counter() { const [count, setCount] = useState(0)

return ( <div className="flex gap-4 items-center"> <span>Count: {count}</span> <Button onClick={() => setCount(c => c + 1)}>Increment</Button> </div> ) }