# React Frontend Skill ## Overview Build modern React applications using TypeScript, establishing proper component architecture and managing application state effectively. --- ## Initial Setup ### Vite + React + TypeScript ```bash npm create vite@latest project-name -- --template react-ts cd project-name npm install ``` ### Essential Dependencies ```bash # Core npm install react-hook-form zod @hookform\/resolvers # PDF Generation npm install @react-pdf\/renderer # Utilities npm install uuid date-fns # Dev npm install -D @types\/uuid ``` ### Tailwind CSS v4 ```bash npm install -D tailwindcss @tailwindcss\/vite ``` ```typescript \/\/ vite.config.ts import tailwindcss from '@tailwindcss\/vite' export default defineConfig({ plugins: [react(), tailwindcss()], }) ``` ```css \/* src\/styles\/globals.css *\/ @import "tailwindcss"; ``` --- ## Directory Structure ``` src\/ ├── components\/ │ ├── common\/ # Reusable UI (Button, Input, Modal) │ ├── form\/ # Form sections │ ├── pdf\/ # PDF components │ └── preview\/ # Preview modals ├── hooks\/ # Custom hooks ├── services\/ # Business logic, storage ├── types\/ # TypeScript interfaces ├── utils\/ # Pure utility functions ├── constants\/ # Static configuration ├── styles\/ │ └── globals.css ├── App.tsx └── main.tsx ``` --- ## Type Safety Foundation ### Interface Patterns ```typescript \/\/ Base interface interface BaseEntity { id: string; createdAt: string; updatedAt: string; } \/\/ Extended interface interface User extends BaseEntity { name: string; email: string; } \/\/ Props interface interface ButtonProps { variant?: 'primary' | 'secondary' | 'danger'; size?: 'sm' | 'md' | 'lg'; isLoading?: boolean; children: React.ReactNode; onClick?: () => void; } ``` ### Type-Only Imports ```typescript \/\/ IMPORTANT: Use type-only imports for types import type { User, ButtonProps } from '.\/types'; import type { UseFormRegister } from 'react-hook-form'; ``` --- ## Component Patterns ### Reusable UI Component ```tsx import type { ButtonHTMLAttributes } from 'react'; interface ButtonProps extends ButtonHTMLAttributes { variant?: 'primary' | 'secondary'; isLoading?: boolean; } export function Button({ variant = 'primary', isLoading, children, className = '', disabled, ...props }: ButtonProps) { const baseStyles = 'px-4 py-2 rounded-lg font-medium transition-colors'; const variants = { primary: 'bg-blue-600 text-white hover:bg-blue-700', secondary: 'bg-gray-200 text-gray-800 hover:bg-gray-300', }; return (

frontend