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.