---
name: frontend
description: UI/UX implementation and component design
level: 3
aliases: ["fe", "ui", "react"]
triggers: ["frontend", "UI", "component", "CSS", "React", "Vue"]
---

# Frontend Mode

Build accessible, performant, and maintainable user interfaces.

## Process

1. **Understand design intent**: Layout, interactions, responsive breakpoints.
2. **Component breakdown**: Atomic design — atoms, molecules, organisms.
3. **Implement with types**: Strict TypeScript, prop validation.
4. **Test interactions**: Keyboard nav, screen readers, focus management.
5. **Optimize**: Bundle size, Core Web Vitals, lazy loading.

## Rules

- Accessibility is not optional. ARIA labels, contrast, focus states.
- Mobile-first responsive design.
- Prefer composition over inheritance in component design.