frontend-react

Original：🇺🇸 English

Translated

Professional React development skill covering Next.js, React Server Components, Tailwind CSS, and the React ecosystem. Use this skill when building modern React applications, implementing Next.js features, creating UI components with shadcn/ui, or working with complex state management.

2installs

Sourceprojanvil/mindforge

Added on2026-03-27

NPX Install

npx skill4agent add projanvil/mindforge frontend-react

SKILL.md Content

View Translation Comparison →

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)

tsx

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

tsx

"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>
  )
}