react-web

# React Web Skill --- ## Test-First Development (MANDATORY) **CRITICAL: Tests MUST be written BEFORE implementation code. This is non-negotiable for frontend components.** ### The TFD Workflow ``` 1. Write test file first → Defines expected behavior 2. Run test (it fails) → Confirms test is valid 3. Write minimal code → Just enough to pass 4. Run test (it passes) → Validates implementation 5. Refactor if needed → Tests catch regressions ``` ### Component Development Order ```bash # CORRECT ORDER - Test first 1. Create Button.test.tsx # Write tests for expected behavior 2. Run tests (they fail) # npm test -- Button 3. Create Button.tsx # Implement to pass tests 4. Run tests (they pass) # Verify implementation 5. Create Button.module.css # Style after logic works # WRONG ORDER - Never do this 1. Create Button.tsx # ❌ No tests exist yet 2. Create Button.module.css # ❌ Still no tests 3. "I'll add tests later" # ❌ Tests never get written ``` ### Test File Structure (Create First) ```typescript // Button.test.tsx - CREATE THIS FIRST import { render, screen, fireEvent } from '@testing-library/react'; import { Button } from './Button'; describe('Button', () => { // Define ALL expected behaviors upfront describe('rendering', () => { it('renders with label', () => { render(<Button label="Click me" onClick={() => {}} />); expect(screen.getByRole('button', { name: 'Click me' })).toBeInTheDocument(); }); it('applies ...