skills.rest
ratnesh-maurya
ratnesh-mauryaCOMMUNITY
Explore all skills by this author →
Website𝕏@_ratneshmauryaGitHub

frontend-developer

Builds React and Next.js components with responsive layouts and client-side state management.

1|Updated Dec 29, 2025
Search Tags:#typescript#React#frontend#components#Next.js#tailwind css#web performance
One-click install
npx skills add https://github.com/ratnesh-maurya/tracker.ratnesh-maurya.com --skill frontend-developer-ratnesh-maurya
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-developer
Source: https://github.com/ratnesh-maurya/tracker.ratnesh-maurya.com/tree/main/.claude/skills/frontend-developer
Command: npx skills add https://github.com/ratnesh-maurya/tracker.ratnesh-maurya.com --skill frontend-developer-ratnesh-maurya

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building modern web interfaces requires juggling React 19 features, Next.js 15 App Router patterns, performance budgets, and accessibility standards, which is difficult to get right without deep framework expertise. ## Core Features & Use Cases - Component Development: Build React 19 and Next.js 15 components using Server Components, Server Actions, Suspense, and concurrent rendering patterns. - Performance & Accessibility: Optimize Core Web Vitals, implement WCAG 2.1/2.2 AA compliance, and configure testing with React Testing Library, Playwright, and Storybook. - Use Case: Ask it to create an accessible data table with sorting and filtering, or to optimize a slow React component using memoization and code splitting, and receive production-ready TypeScript code. ## Quick Start Ask the assistant to build a Next.js server component that streams data with Suspense boundaries and includes proper TypeScript types.

Frequently Asked Questions about frontend-developer

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

FAQPage Schema
How do I build React Server Components in Next.js 15?▼

React Server Components in Next.js 15 render on the server by default in the App Router, streaming UI with Suspense boundaries. Use Client Components only where interactivity is needed, and Server Actions for data mutations.

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

Zustand, Jotai, and Valtio work well for client state, while React Query or SWR handle server state with caching and optimistic updates. Redux Toolkit suits complex state scenarios, and React 19 hooks like useOptimistic cover transitions.

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

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

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

Optimize LCP, FID, and CLS through code splitting, dynamic imports, image and font optimization, and lazy loading. Use React DevTools profiling, bundle analysis, and Lighthouse CI to measure and prevent regressions.

When should I not use this frontend development approach?▼

Avoid it when you only need backend API architecture, are building native mobile apps outside the web stack, or need pure visual design without implementation. It targets React and Next.js web application development specifically.

Related Skills

Explore More Software Engineering Skills→
deangilmoreremixdeangilmoreremix

figma-implement-design

Translate Figma nodes into React components using design system tokens.

Community
Advanced
aroidoaroido

Web Vitals Monitoring Skill

Measure Core Web Vitals and enforce performance budgets in CI/CD pipelines.

Official
Advanced
RepairYourTechRepairYourTech
6

authjs

Implement authentication and authorization flows with Auth.js for web applications.

Community
Advanced
bugrabilgebugrabilge
10

app-builder

Scaffold full-stack applications, monorepos, and CI/CD pipelines.

Community
Advanced