skills.rest
Eng-suso
Eng-susoCOMMUNITY
Explore all skills by this author →
GitHub

frontend-developer

Builds React and Next.js components with accessibility, performance, and state management guidance.

Updated Aug 10, 2026
Search Tags:#typescript#performance#accessibility#frontend#react#components#next.js
One-click install
npx skills add https://github.com/Eng-suso/BK-GPT --skill frontend-developer-eng-suso
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-developer
Source: https://github.com/Eng-suso/BK-GPT/tree/main/.claude/skills/frontend-developer
Command: npx skills add https://github.com/Eng-suso/BK-GPT --skill frontend-developer-eng-suso

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? It provides expert guidance for building modern web user interfaces, helping you implement React 19 and Next.js 15 features correctly while avoiding common performance, accessibility, and state management pitfalls. ## Core Features & Use Cases - Component Development: Build React components using Server Components, Server Actions, Suspense, and modern hooks like useOptimistic and useTransition. - Performance & Accessibility: Optimize Core Web Vitals, implement WCAG 2.1/2.2 AA compliance, and apply code splitting and lazy loading strategies. - State & Data Fetching: Design client-side state with Zustand, Redux Toolkit, or TanStack Query, including real-time updates via WebSockets. - Use Case: When you need to create an accessible data table with sorting and filtering, or set up a form with Server Actions and optimistic updates, this Skill provides production-ready TypeScript code with proper error boundaries and loading states. ## Quick Start Ask the assistant to build a React component or fix a frontend issue, for example: create an accessible form with Server Actions and optimistic updates in Next.js.

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 component with Server Actions in Next.js?▼

Define an async function marked with the 'use server' directive and call it from a form or client component. Combine it with useActionState and useOptimistic to handle pending states and optimistic updates without manual API routes.

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 refetching. Redux Toolkit suits complex scenarios with many interacting state slices.

Does Next.js 15 support React Server Components?▼

Yes, Next.js 15 App Router uses React Server Components by default, supporting streaming with Suspense boundaries and Server Actions for mutations. Client Components are opt-in via the 'use client' directive.

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

Use code splitting with dynamic imports, optimize images with next/image, prioritize critical resources, and profile with React DevTools. Measure LCP, FID, and CLS with Lighthouse to identify bottlenecks.

When should I not use this frontend skill?▼

Avoid it for backend API architecture, native mobile app development, or pure visual design work without implementation. It focuses specifically on web frontend implementation with React and Next.js.

Related Skills

Explore More Software Engineering Skills→
freitassphfreitassph

aiox-ux-design-expert

Translate user research into wireframes, tokens, and reusable UI components.

Community
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
partme-aipartme-ai
610

react-native

Provides comprehensive guidance for developing cross-platform mobile applications with React Native.

Official
Intermediate