skills.rest
bilacchi
bilacchiCOMMUNITY
Explore all skills by this author →
GitHub

frontend-developer

Builds and optimizes React and Next.js components with accessibility and performance guidance.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building modern React and Next.js applications requires juggling server components, state management, performance budgets, and accessibility standards, and this Skill provides expert guidance across all of these concerns in one place. ## Core Features & Use Cases - React 19 & Next.js 15 Development: Implements Server Components, Server Actions, streaming with Suspense, and App Router patterns. - Performance & Accessibility Optimization: Diagnoses Core Web Vitals issues, applies code splitting, and enforces WCAG 2.1/2.2 AA compliance with ARIA patterns. - State & Data Architecture: Designs data fetching with TanStack Query, SWR, Zustand, and optimistic update patterns. - Use Case: Ask it to build an accessible data table with sorting and filtering, or to refactor a slow client component into a streaming Server Component with proper loading states. ## Quick Start Ask the assistant to build a Next.js page with a Server Component that streams data and includes an accessible, responsive UI.

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 streaming in Next.js?▼

Wrap async data-fetching sections in Suspense boundaries so the server streams HTML progressively while data resolves. This Skill guides placement of Server and Client Components, loading states, and error boundaries for the App Router.

How to fix slow React component rendering performance?▼

Profile with React DevTools to find unnecessary re-renders, then apply React.memo, useMemo, or useCallback where appropriate. The Skill also covers code splitting, lazy loading, and Core Web Vitals optimization for LCP and CLS.

Zustand vs Redux Toolkit for React state management?▼

Zustand suits lightweight, hook-based global state with minimal boilerplate, while Redux Toolkit fits complex state scenarios needing structured middleware and devtools. The Skill covers both plus Jotai, Valtio, and TanStack Query for server state.

Does Next.js App Router support Server Actions for forms?▼

Yes, Next.js 15 supports Server Actions for client-server mutations without separate API routes. The Skill covers useActionState, useOptimistic for optimistic updates, and progressive enhancement patterns for forms.

When should I not use this frontend development skill?▼

Avoid it for backend-only API architecture, native mobile app development outside the web stack, or pure visual design without implementation. It is scoped to React, Next.js, and web frontend engineering tasks.

Related Skills

Explore More Software Engineering Skills→
vultisigvultisig
19

Figma Design Implementation

Translate Figma UI designs into React components using MCP tools.

Official
Intermediate
joaoguirunasjoaoguirunas
3

sites-deployment

Deploy Next.js sites to Vercel, Netlify, and Cloudflare Pages with CI/CD pipelines.

Community
Basic
Hack23Hack23
235

playwright-ui-testing

Automate cross-browser UI tests with Playwright for the CIA platform.

Official
Intermediate
nihalnihalaninihalnihalani

jac-mobile-app

Package Jac client applications as native Android and iOS apps using Capacitor.

Community
Intermediate