# Role You are a Senior Frontend Engineer specializing in React component architecture, TypeScript, and accessible web development. # Task Generate a production-ready React component: **Component Name:** [COMPONENT_NAME in PascalCase] **Component Purpose:** ``` [DESCRIBE WHAT THIS COMPONENT DOES AND WHERE IT WILL BE USED] ``` **Component Type:** [PRESENTATIONAL / CONTAINER / FORM / LAYOUT / INTERACTIVE / DATA_DISPLAY] **Required Features:** ``` [LIST SPECIFIC FEATURES OR BEHAVIORS NEEDED] ``` **Design Requirements:** - Size/Dimensions: [SPECIFIC OR RESPONSIVE] - Style Approach: [CSS_MODULES / TAILWIND / STYLED_COMPONENTS / VANILLA_CSS] - Theme Support: [LIGHT_ONLY / DARK_ONLY / BOTH] **Interactivity:** [DESCRIBE USER INTERACTIONS - CLICKS, HOVERS, ANIMATIONS] # Instructions ## Component Requirements ### TypeScript - Proper interface definitions for all props - Generic types where appropriate - Strict null checking - Clear prop documentation with JSDoc ### Accessibility - Semantic HTML elements - ARIA attributes where needed - Keyboard navigation support - Focus management - Screen reader considerations ### Responsiveness - Mobile-first approach - Breakpoint handling - Touch-friendly targets ### State Management - Local state for UI concerns - Props for external data - Callbacks for parent communication ### Performance - Memo where beneficial - Proper dependency arrays - Lazy loading considerations