skills.rest
gonzoblasco
gonzoblascoCOMMUNITY
Explore all skills by this author →
𝕏@gonzoblascoGitHub

frontend-developer

Build React 19 and Next.js 15 components with responsive layouts and state management.

1|Updated Jul 20, 2026
Search Tags:#typescript#performance#accessibility#frontend#react#components#nextjs
One-click install
npx skills add https://github.com/gonzoblasco/ai-developer-stack --skill frontend-developer-gonzoblasco
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-developer
Source: https://github.com/gonzoblasco/ai-developer-stack/tree/main/frontend-ui/frontend-developer
Command: npx skills add https://github.com/gonzoblasco/ai-developer-stack --skill frontend-developer-gonzoblasco

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Modern frontend development requires juggling React Server Components, concurrent rendering, state management, accessibility, and Core Web Vitals optimization simultaneously. This Skill provides structured guidance for building production-grade React and Next.js interfaces without missing critical performance or accessibility requirements. ## Core Features & Use Cases - React 19 & Next.js 15 Implementation: Build components using Server Components, Server Actions, Suspense streaming, and hooks like useActionState and useOptimistic. - State & Data Management: Implement Zustand, TanStack Query, SWR, and optimistic update patterns for client-side data flows. - Performance & Accessibility: Optimize Core Web Vitals (LCP, FID, CLS) and implement WCAG 2.2 AA compliance with ARIA patterns and keyboard navigation. - Use Case: When asked to build a data table with sorting and filtering, the Skill produces a TypeScript-typed, accessible component with proper loading states, error boundaries, and responsive Tailwind styling. ## Quick Start Ask the assistant to build a React component or Next.js page, specifying your target devices, state management preference, and any accessibility requirements.

Frequently Asked Questions about frontend-developer

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

FAQPage Schema
How do I build a form with Server Actions in Next.js 15?▼

Define an async server function marked with 'use server' and pass it to the form's action attribute. Use useActionState for submission state and useOptimistic for instant UI feedback before the server responds.

What state management library should I use with React 19?▼

Zustand works well for lightweight client state, while TanStack Query handles server state with caching and refetching. Redux Toolkit suits complex state scenarios, and Jotai or Valtio offer atomic alternatives.

Does React 19 support Server Components with Next.js?▼

Yes, React 19 Server Components integrate with the Next.js 15 App Router, enabling streaming with Suspense and zero-bundle-size server rendering. Client Components are marked with the 'use client' directive for interactivity.

How do I optimize Core Web Vitals in a React app?▼

Reduce LCP with image optimization and critical resource preloading, minimize CLS by reserving layout space, and improve interactivity with code splitting and deferred rendering. Use React DevTools profiling to find rendering bottlenecks.

When should I not use this frontend development approach?▼

Avoid it for backend-only API architecture, native mobile apps outside the web stack, or pure visual design work without implementation. It targets React and Next.js web application development specifically.

Related Skills

Explore More Software Engineering Skills→
ivanyeorsivanyeors

product-design

Translate discovery insights into IA documents, user flows, wireframes, and prototype briefs.

Community
Advanced
drvossdrvoss
42

browser-devtools

Inspect DOM state, network traffic, and Core Web Vitals in Chrome DevTools.

Community
Intermediate
brianlovinbrianlovin
357

rams

Analyze UI components for WCAG violations and visual design inconsistencies.

Community
Advanced
sinhong2011sinhong2011
5

tauri

Develop cross-platform desktop and mobile applications with Tauri, Rust, and web UIs.

Community
Advanced