frontend

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.