skills.rest
monang404
monang404COMMUNITY
Explore all skills by this author →
GitHub

frontend-developer

Builds React and Next.js components with responsive layouts and accessibility support.

2|Updated Jun 16, 2026
Search Tags:#typescript#performance#accessibility#frontend#react#next.js#tailwind
One-click install
npx skills add https://github.com/monang404/lunawave --skill frontend-developer-monang404
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-developer
Source: https://github.com/monang404/lunawave/tree/main/.agent/skills/frontend-developer
Command: npx skills add https://github.com/monang404/lunawave --skill frontend-developer-monang404

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building modern web interfaces requires juggling React 19 features, Next.js 15 App Router patterns, state management, performance optimization, and accessibility compliance all at once. This Skill provides expert guidance for implementing production-quality frontend code without missing critical details like Core Web Vitals, ARIA patterns, or proper error boundaries. ## Core Features & Use Cases - React 19 & Next.js 15 Implementation: Build Server Components, Server Actions, streaming with Suspense, and advanced hooks like useOptimistic and useActionState. - State & Data Management: Implement Zustand, TanStack Query, SWR, and real-time updates via WebSockets or Server-Sent Events. - Performance & Accessibility: Optimize Core Web Vitals, bundle splitting, and ensure WCAG 2.1/2.2 AA compliance with proper ARIA patterns. - Use Case: You need a data table with sorting, filtering, and optimistic updates. Ask the Skill to build it with TypeScript, Tailwind, and React Query, and receive accessible, tested component code. ## Quick Start Ask the assistant to build an accessible React component with Next.js App Router, TypeScript, and Tailwind CSS for your specific UI requirement.

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 React Server Component with Next.js App Router?▼

React Server Components render on the server by default in the Next.js App Router and can fetch data directly without client-side JavaScript. Use async components, stream with Suspense boundaries, and add the 'use client' directive only for interactive parts.

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

Zustand or Jotai work well for lightweight client state, while TanStack Query handles server state with caching and optimistic updates. Redux Toolkit suits complex scenarios, and React 19 hooks like useOptimistic cover transient UI states.

Does Next.js 15 support Server Actions for form mutations?▼

Yes, Next.js 15 supports Server Actions for client-server data mutations without separate API routes. Combine them with useActionState and useOptimistic in React 19 for progressive enhancement and optimistic UI updates.

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

Optimize LCP with image optimization and critical resource prioritization, reduce CLS with reserved layout space, and improve interactivity via code splitting and dynamic imports. Use React DevTools profiling and Lighthouse audits to verify improvements.

When should I not use React Server Components?▼

Avoid Server Components when you need browser-only APIs, event handlers, or React hooks like useState and useEffect. Those parts must be Client Components marked with 'use client', keeping the server/client boundary explicit.

Related Skills

Explore More Software Engineering Skills→
SynkraAISynkraAI
3.1k

aiox-ux-design-expert

Conduct user research, wireframing, and design system architecture for digital products.

Official
Advanced
enviodevenviodev
546

envio-cloud-cli

Manages hosted indexer deployments, logs, and metrics on Envio cloud via CLI.

Official
Basic
stars-endstars-end

Backend Engineer

Develop backend APIs, data models, and server-side services across frameworks.

Official
Advanced
hasnahasna

codegen

Generate framework-specific code from json-render UI specification trees.

Official
Intermediate