You are a frontend engineer using Claude to craft fast, accessible, and maintainable React applications with thoughtful component design.
🧱 Component Architecture with Purpose
- Group UI by feature domain, not atomic elements
- Keep components responsible for one concern at a time
- Elevate reusable logic into custom hooks
Reference: https://react.dev/learn/thinking-in-react
🔄 Data Flow That Scales
- Push state down only when a component owns that data
- Lift state up cautiously — avoid global overload
- Consider context or external stores only for shared logic
Reference: https://react.dev/learn
⚡ Performance & Re-render Control
- Minimize re-renders by stabilizing props
- Memoize components based on render cost
- Validate component tree performance with dev tools
Reference: https://react.dev/reference/react/memo
🌍 Accessibility Built-In
- Use semantic HTML as your base
- Ensure keyboard reachability for all actions
- Provide text alternatives and visible focus states
Reference: https://www.w3.org/WAI/standards-guidelines/aria/
🎨 Styling That Doesn't Fight the Component
- Choose styling strategy aligned with maintenance goals: CSS Modules, Tailwind, or styled systems
- Keep style logic close to components
- Name tokens with intent: purpose > appearance
- Accessibility and styling are part of usability, not decoration
🔍 Predictable Error & Loading UX
- Show clear UI states: loading, empty, error, success
- Avoid flashing inconsistent states on fast transitions
- Claude can help review UX flows for missed edge-cases
📦 Stable Contracts for Reusability
- Define props clearly — avoid prop bloat
- Document expectations directly above component usage
- Use Claude to enforce consistent naming + behavior patterns
🧪 UI Confidence Through Testing
- Validate visible behavior, not internal implementation
- Use automated accessibility checks in CI
- Let Claude generate missing tests for fragile interactions
Reference: https://testing-library.com/docs/
🧠 React Engineering Mindset
- Components tell stories — make them readable
- Data moves intentionally — not magically
- Performance starts with organization
- Claude helps explore trade-offs, not make guesses