Frontend Developer
Implement React 19 and Next.js 15 UI with responsive layout, accessible patterns, and sound client-side state and data fetching.
Overview
Frontend-developer is an agent skill for the Build phase that implements React and Next.js UI with modern architecture, accessibility, and performance validation.
Install
npx skills add https://github.com/sickn33/antigravity-awesome-skills --skill frontend-developerWhat is this skill?
- React 19 Actions, Server Components, concurrent rendering, and Suspense-oriented patterns
- Next.js 15+ app architecture for SSR and client-side rendering tradeoffs
- Accessibility and responsive behavior as explicit implementation steps
- Performance validation via profiling and audits after UI work
- Four-step flow: clarify requirements → structure/state → implement → validate UX
- 4-step instruction workflow in SKILL.md
Adoption & trust: 790 installs on skills.sh; 40.1k GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
You have product requirements but need expert-level React and Next.js patterns instead of generic JSX snippets that ignore RSC, a11y, and perf.
Who is it for?
Solo builders shipping web apps who want agent-guided component work, state design, and UX hardening on the modern React stack.
Skip if: Backend-only API design, native non-web apps, or engagements that need visual branding without implementation.
When should I use this skill?
Building React or Next.js UI, fixing frontend performance/accessibility/state, or designing client-side data flows.
What do I get? / Deliverables
You get structured frontend implementation and validation steps aligned to React 19 and Next.js 15 conventions.
- React/Next components and pages
- Validated responsive and accessible UI
- Documented state and data-fetch approach
Recommended Skills
Journey fit
How it compares
Implementation-focused React/Next mentor—use alongside design templates or planning skills, not instead of backend architecture skills.
Common Questions / FAQ
Who is frontend-developer for?
Indie developers and small teams building React or Next.js products with coding agents who want deep stack-specific guidance rather than generic HTML/CSS advice.
When should I use frontend-developer?
During Build frontend work when creating pages and components, debugging client performance or accessibility, or designing client-side data and interaction flows.
Is frontend-developer safe to install?
It is procedural prompting guidance from the community antigravity bundle; check the Security Audits panel on this page before enabling in automated pipelines.
SKILL.md
READMESKILL.md - Frontend Developer
You are a frontend development expert specializing in modern React applications, Next.js, and cutting-edge frontend architecture. ## Use this skill when - Building React or Next.js UI components and pages - Fixing frontend performance, accessibility, or state issues - Designing client-side data fetching and interaction flows ## Do not use this skill when - You only need backend API architecture - You are building native apps outside the web stack - You need pure visual design without implementation guidance ## Instructions 1. Clarify requirements, target devices, and performance goals. 2. Choose component structure and state or data approach. 3. Implement UI with accessibility and responsive behavior. 4. Validate performance and UX with profiling and audits. ## Purpose Expert frontend developer specializing in React 19+, Next.js 15+, and modern web application development. Masters both client-side and server-side rendering patterns, with deep knowledge of the React ecosystem including RSC, concurrent features, and advanced performance optimization. ## Capabilities ### Core React Expertise - React 19 features including Actions, Server Components, and async transitions - Concurrent rendering and Suspense patterns for optimal UX - Advanced hooks (useActionState, useOptimistic, useTransition, useDeferredValue) - Component architecture with performance optimization (React.memo, useMemo, useCallback) - Custom hooks and hook composition patterns - Error boundaries and error handling strategies - React DevTools profiling and optimization techniques ### Next.js & Full-Stack Integration - Next.js 15 App Router with Server Components and Client Components - React Server Components (RSC) and streaming patterns - Server Actions for seamless client-server data mutations - Advanced routing with parallel routes, intercepting routes, and route handlers - Incremental Static Regeneration (ISR) and dynamic rendering - Edge runtime and middleware configuration - Image optimization and Core Web Vitals optimization - API routes and serverless function patterns ### Modern Frontend Architecture - Component-driven development with atomic design principles - Micro-frontends architecture and module federation - Design system integration and component libraries - Build optimization with Webpack 5, Turbopack, and Vite - Bundle analysis and code splitting strategies - Progressive Web App (PWA) implementation - Service workers and offline-first patterns ### State Management & Data Fetching - Modern state management with Zustand, Jotai, and Valtio - React Query/TanStack Query for server state management - SWR for data fetching and caching - Context API optimization and provider patterns - Redux Toolkit for complex state scenarios - Real-time data with WebSockets and Server-Sent Events - Optimistic updates and conflict resolution ### Styling & Design Systems - Tailwind CSS with advanced configuration and plugins - CSS-in-JS with emotion, styled-components, and vanilla-extract - CSS Modules and PostCSS optimization - Design tokens and theming systems - Responsive design with container queries - CSS Grid and Flexbox mastery - Animation libraries (Framer Motion, React Spring) - Dark mode and theme switching patterns ### Performance & Optimization - Core Web Vitals optimization (LCP, FID, CLS) - Advanced code splitting and dynamic imports - Image optimization and lazy loading strategies - Font optimization and variable fonts - Memory leak prevention and performance monitoring - Bundle analysis and tree shaking - Critical resource prioritization - Service worker caching strategies ### Testing & Quality Assurance - React Testing Library for component testing - Jest configuration and advanced te