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

react-nextjs-development

Guides React and Next.js 14+ application development through eight structured workflow phases.

1|Updated Aug 17, 2025
Search Tags:#typescript#react#next.js#tailwind css#server components#app router#frontend workflow
One-click install
npx skills add https://github.com/ratnesh-maurya/mdconverter --skill react-nextjs-development-ratnesh-maurya
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-nextjs-development
Source: https://github.com/ratnesh-maurya/mdconverter/tree/main/.claude/skills/react-nextjs-development
Command: npx skills add https://github.com/ratnesh-maurya/mdconverter --skill react-nextjs-development-ratnesh-maurya

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building a modern React or Next.js application involves many decisions—project scaffolding, component architecture, styling, data fetching, routing, forms, testing, and deployment. This Skill organizes that entire lifecycle into a phased workflow so nothing is missed and each step follows current Next.js 14+ App Router patterns. ## Core Features & Use Cases - Eight-Phase Workflow: Covers project setup, component architecture, styling, data fetching, routing, forms, testing, and deployment with concrete actions per phase. - Modern Stack Guidance: Recommends TypeScript 5+, Tailwind CSS v4, Zustand, React Query, React Hook Form with Zod, Vitest, and Playwright. - Quality Gates: Provides a checklist covering TypeScript compilation, tests, linting, Core Web Vitals, accessibility, and responsive design. - Use Case: When starting a new Next.js dashboard, follow the phases to scaffold the app, build Server Components, wire up React Query data fetching, add Zod-validated forms, and deploy to Vercel. ## Quick Start Ask the assistant to scaffold a new Next.js 14 project with App Router, TypeScript, and Tailwind CSS following this workflow.

Frequently Asked Questions about react-nextjs-development

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

FAQPage Schema
How do I set up a Next.js 14 project with App Router and TypeScript?▼

Scaffold the project with a tool like create-next-app, then configure TypeScript, ESLint, and Prettier. The workflow's Phase 1 covers project type selection, build tool choice, and initial configuration steps.

How to fetch data in Next.js Server Components?▼

Server Components fetch data directly on the server using async components, eliminating client-side waterfalls. For client-side needs, the workflow recommends React Query or SWR with proper loading states and error boundaries.

What state management library works with React and Next.js?▼

The workflow recommends Zustand for client state and React Query for server state. Zustand provides a lightweight store without boilerplate, while React Query handles caching, refetching, and synchronization with APIs.

Does Next.js App Router support form validation with Zod?▼

Yes, React Hook Form combined with Zod resolvers provides type-safe form validation in Next.js apps. The workflow's Phase 6 covers choosing a form library, setting up Zod schemas, and handling submissions and errors.

What testing tools should I use for a Next.js application?▼

Use Vitest for unit and component tests and Playwright for end-to-end testing of critical user flows. The workflow's Phase 7 covers framework setup, test writing, and CI integration.

Related Skills

Explore More Software Engineering Skills→
patricio0312revpatricio0312rev
5

system-design-generator

Generate system architecture plans with components, data flows, and API contracts.

Community
Advanced
amoai-techamoai-tech
1

mde-vercel

Orchestrates Vercel deployments and applies React/Next.js performance optimization rules.

Community
Advanced
darthlinuxerdarthlinuxer

webapp-testing

Automate web app route discovery and Playwright-based end-to-end testing.

Community
Intermediate
reclaimprotocolreclaimprotocol
1

Integrate Reclaim Protocol

Automates Reclaim Protocol integration into Node.js projects with stack detection and code generation.

Official
Intermediate