--- name: react-development description: React and Vite development patterns. Use when building components, hooks, pages, or configuring the frontend build. allowed-tools: Read, Write, Edit, Bash, Grep, Glob --- # React Development Skill ## Project Setup ### Initialize Vite + React + TypeScript ```bash npm create vite@latest frontend -- --template react-ts cd frontend # Install dependencies npm install axios react-router-dom @tanstack\/react-query tailwindcss postcss autoprefixer # Initialize Tailwind npx tailwindcss init -p ``` ### Project Structure ``` frontend\/ ├── src\/ │ ├── components\/ │ │ ├── ui\/ # Base UI components │ │ │ ├── Button.tsx │ │ │ ├── Card.tsx │ │ │ └── Input.tsx │ │ ├── layout\/ # Layout components │ │ │ ├── Header.tsx │ │ │ ├── Sidebar.tsx │ │ │ └── Layout.tsx │ │ └── features\/ # Feature components │ │ ├── MemberCard.tsx │ │ ├── BillList.tsx │ │ └── VotingChart.tsx │ ├── pages\/ │ │ ├── Home.tsx │ │ ├── Members.tsx │ │ ├── MemberDetail.tsx │ │ ├── Bills.tsx │ │ └── Agent.tsx │ ├── hooks\/ │ │ ├── useMembers.ts │ │ ├── useBills.ts │ │ └── useAgent.ts │ ├── services\/ │ │ ├── api.ts │ │ ├── memberService.ts │ │ └── agentService.ts │ ├── types\/ │ │ └── index.ts │ ├── App.tsx │ └── main.tsx ├── tailwind.config.js └── vite.config.ts ``` ## Configuration Files ### tailwind.config.js ```javascript \/** @type {import('tailwindcss').Config} *\/ export default { content: [ ".\/index.html", ".\/src\/**\/*.{js,ts,jsx,tsx}", ], theme: { extend: { colors: { primary: { 50: '#eff6ff', 500: '#3b82f6', 600: '#2563eb', 700: '#1d4ed8', }, }, }, }, plugins: [], } ``` ### vite.config.ts ```typescript import { defineConfig } from 'vite' import react from '@vitejs\/plugin-react' export default defineConfig({ plugins: [react()], server: { port: 5173, proxy: { '\/api': { target: 'http:\/\/localhost:8000', changeOrigin: true, }, }, }, }) ``` ## Type Definitions ### src\/types\/index.ts ```typescript export interface Member { bioguide_id: string; name: string; first_name: string; last_name: string; party: 'D' | 'R' | 'I'; state: string; district?: number; chamber: 'house' | 'senate'; image_url?: string; } export interface Bill { bill_id: string; title: string; short_title?: string; sponsor_id: string; status: string; introduced_date: string; } export interface Vote { vote_id: string; question: string; result: string; date: string; yea: number; nay: number; } export interface AgentMessage { role: 'user' | 'assistant'; content: string; timestamp: Date; } ``` ## Component Patterns ### UI Component: Button ```typescript \/\/ src\/components\/ui\/Button.tsx interface ButtonProps extends React.ButtonHTMLAttributes { variant?: 'primary' | 'secondary' | 'ghost'; size?: 'sm' | 'md' | 'lg'; isLoading?: boolean; } export const Button = ({ variant = 'primary', size = 'md', isLoading, children, className, ...props }: ButtonProps) => { const baseStyles = 'rounded-lg font-medium transition-colors'; const variants = { primary: 'bg-primary-600 text-white hover:bg-primary-700', secondary: 'bg-gray-200 text-gray-800 hover:bg-gray-300', ghost: 'text-gray-600 hover:bg-gray-100', }; const sizes = { sm: 'px-3 py-1.5 text-sm', md: 'px-4 py-2', lg: 'px-6 py-3 text-lg', }; return (