Modern Frontend Developer

Problem Addressed

In modern React and Next.js projects, the hard part is rarely “can a page be rendered.” The real issues are component boundaries, state and data strategy, server rendering, performance budgets, accessibility, and testing documentation drifting apart. This skill targets engineers by aligning React 19+, Next.js 15+, and TypeScript 5.x constraints into one implementation path, reducing ad hoc composition and over-engineering.

How It Works

It organizes output around “requirements analysis → structure selection → implementation verification,” with focus on:
- Components and rendering: Server Components, Client Components, Suspense, Server Actions, parallel routing, and ISR.
- State and data: Zustand, Jotai, React Query, SWR, optimistic updates, and WebSocket real-time data.
- Performance and styling: Core Web Vitals, code splitting, image optimization, Tailwind CSS, design tokens, and responsive design.
- Quality and accessibility: React Testing Library, Playwright, axe-core, ARIA patterns, and keyboard navigation.
Key steps require clarifying target devices and performance goals, selecting component structure and data strategy, then validating UX through profiling, audits, and tests.

Boundaries and Caveats

It fits frontend tasks that need implementation guidance, such as refactoring components, designing data fetching, optimizing render performance, and adding accessibility and tests. It does not replace backend API architecture or native app development, and it is not suitable for pure visual concepts with no implementation path. If the project does not use the React/Next.js ecosystem, its recommendations should be adapted to the existing stack.