claude-config/skills/react-frontend.md

React & Frontend Development Skill

Installed

• Node.js 20.x
• npm 10.x

Quick Start

# Create React app
npx create-react-app myapp
cd myapp && npm start

# With Vite (faster)
npm create vite@latest myapp -- --template react
cd myapp && npm install && npm run dev

Common Commands

npm run dev          # Development server
npm run build        # Production build
npm run preview      # Preview production build
npm install package  # Install dependency

Key Libraries

# UI
npm install @mui/material @emotion/react @emotion/styled   # Material UI
npm install tailwindcss postcss autoprefixer               # Tailwind CSS
npm install shadcn-ui                                       # shadcn/ui

# State
npm install zustand        # State management
npm install @reduxjs/toolkit react-redux  # Redux

# Routing
npm install react-router-dom

# HTTP
npm install axios

# Forms
npm install react-hook-form

Docker for React

FROM node:20-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
EXPOSE 3000
CMD ["npm", "start"]