What problem does it solve?
Senior frontend teams often struggle with cohesive architecture decisions across React/TypeScript/Next.js, leading to fragmented component APIs, inconsistent design systems, and suboptimal performance. This skill guides engineers to design scalable UI architectures, implement accessible interactions, and align server/client rendering strategies with design tokens and testing practices.
Core Features & Use Cases
- Component API design for reusable UI primitives and design-system integration.
- Performance optimization guidance covering LCP, INP, CLS, and web vitals.
- Accessibility hardening and WCAG-aligned interactions across complex UIs.
- Design-token integration and consistent styling across large apps.
- PR review and architecture decision support for senior front-end work.
Use Case: When refactoring a large dashboard or building a design-system-backed UI, apply this skill to establish robust component boundaries, choose between server and client rendering, and ensure accessibility and performance requirements are met.
Quick Start
Identify a complex UI module in your app and apply the recommended architecture and accessibility guidelines to implement a scalable frontend solution.