frontend-developer

Design scalable React 19+ and Next.js 15 frontends with accessible components.

54|18|Updated Jan 21, 2026
One-click install
npx skills add https://github.com/hainamchung/agent-assistant --skill frontend-developer-hainamchung
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-developer
Source: https://github.com/hainamchung/agent-assistant/tree/main/skills/frontend-developer
Command: npx skills add https://github.com/hainamchung/agent-assistant --skill frontend-developer-hainamchung

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Modern React/Next.js frontend projects often suffer from inconsistent architecture, accessibility gaps, and performance issues. This Skill provides expert guidance to design scalable UI architectures, implement robust client/server data flows, and enforce best practices across the stack.

Core Features & Use Cases

  • Architectural guidance for React 19+ and Next.js 15 apps (Server Components, Server Actions, ISR, App Router).
  • Patterns for accessible, responsive UI, performance optimizations, and design-system integration.
  • Real-world use cases: building reusable components, page routing strategies, and performance profiling.

Quick Start

Design a scalable React/Next.js frontend blueprint with accessible components and performance-optimized patterns.

Frequently Asked Questions about frontend-developer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure React Server Components and Server Actions in Next.js 15?

Structure React Server Components and Server Actions in Next.js 15 by establishing robust client/server data flows using the App Router. This approach ensures scalable UI architecture and enforces production-ready performance optimizations across the stack.

What is the best way to build accessible and performant React frontend components?

The best way to build accessible React components is to implement responsive UI patterns and integrate a structured design system. This ensures your frontend meets accessibility requirements while maintaining high performance through optimized rendering strategies.

Does this approach support Incremental Static Regeneration (ISR) and App Router patterns?

Yes, this approach fully supports Incremental Static Regeneration (ISR) and App Router patterns. It provides architectural guidance specifically designed for React 19+ and Next.js 15 projects to handle routing and server/client data flows efficiently.

How do I optimize frontend performance and profile rendering bottlenecks in a Next.js app?

Optimize frontend performance in a Next.js app by applying performance profiling patterns and architectural best practices. This process identifies rendering bottlenecks and enforces scalable UI architectures to maintain fast, responsive user experiences.

When should I use Server Actions instead of traditional API routes for client/server data flows?

Use Server Actions instead of traditional API routes when you need streamlined client/server data flows within your React architecture. This method directly handles mutations and data fetching within Server Components to reduce client-side JavaScript overhead.

How do I integrate a design system into a scalable React 19+ frontend architecture?

Integrate a design system into a scalable React 19+ frontend by applying architectural patterns for reusable components. This ensures consistent, accessible UI implementation while maintaining performance optimizations across your Next.js 15 application.