{
  "schema": "https://ai-atoms.com/schemas/skill-v1.json",
  "type": "skill",
  "id": "skill/react-nextjs-development",
  "version": "1.0.0",
  "name": "React Nextjs Development",
  "description": "React and Next.js 14+ application development with App Router, Server Components, TypeScript, Tailwind CSS, and modern frontend patterns.",
  "system_prompt_fragment": "# React/Next.js Development Workflow\n\n## Overview\n\nSpecialized workflow for building React and Next.js 14+ applications with modern patterns including App Router, Server Components, TypeScript, and Tailwind CSS.\n\n## When to Use This Workflow\n\nUse this workflow when:\n- Building new React applications\n- Creating Next.js 14+ projects with App Router\n- Implementing Server Components\n- Setting up TypeScript with React\n- Styling with Tailwind CSS\n- Building full-stack Next.js applications\n\n## Workflow Phases\n\n### Phase 1: Project Setup\n\n#### Skills to Invoke\n- `app-builder` - Application scaffolding\n- `senior-fullstack` - Full-stack guidance\n- `nextjs-app-router-patterns` - Next.js 14+ patterns\n- `typescript-pro` - TypeScript setup\n\n#### Actions\n1. Choose project type (React SPA, Next.js app)\n2. Select build tool (Vite, Next.js, Create React App)\n3. Scaffold project structure\n4. Configure TypeScript\n5. Set up ESLint and Prettier\n\n#### Copy-Paste Prompts\n```\nUse @app-builder to scaffold a new Next.js 14 project with App Router\n```\n\n```\nUse @nextjs-app-router-patterns to set up Server Components\n```\n\n### Phase 2: Component Architecture\n\n#### Skills to Invoke\n- `frontend-developer` - Component development\n- `react-patterns` - React patterns\n- `react-state-management` - State management\n- `react-ui-patterns` - UI patterns\n\n#### Actions\n1. Design component hierarchy\n2. Create base components\n3. Implement layout components\n4. Set up state management\n5. Create custom hooks\n\n#### Copy-Paste Prompts\n```\nUse @frontend-developer to create reusable React components\n```\n\n```\nUse @react-patterns to implement proper component composition\n```\n\n```\nUse @react-state-management to set up Zustand store\n```\n\n### Phase 3: Styling and Design\n\n#### Skills to Invoke\n- `frontend-design` - UI design\n- `tailwind-patterns` - Tailwind CSS\n- `tailwind-design-system` - Design system\n- `core-components` - Component library\n\n#### Actions\n1. Set up Tailwind CSS\n2. Configure design tokens\n3. Create utility classes\n4. Build component styles\n5. Implement responsive design\n\n#### Copy-Paste Prompts\n```\nUse @tailwind-patterns to style components with Tailwind CSS v4\n```\n\n```\nUse @frontend-design to create a modern dashboard UI\n```\n\n### Phase 4: Data Fetching\n\n#### Skills to Invoke\n- `nextjs-app-router-patterns` - Server Components\n- `react-state-management` - React Query\n- `api-patterns` - API integration\n\n#### Actions\n1. Implement Server Components\n2. Set up React Query/SWR\n3. Create API client\n4. Handle loading states\n5. Implement error boundaries\n\n#### Copy-Paste Prompts\n```\nUse @nextjs-app-router-patterns to implement Server Components data fetching\n```\n\n### Phase 5: Routing and Navigation\n\n#### Skills to Invoke\n- `nextjs-app-router-patterns` - App Router\n- `nextjs-best-practices` - Next.js patterns\n\n#### Actions\n1. Set up file-based routing\n2. Create dynamic routes\n3. Implement nested routes\n4. Add route guards\n5. Configure redirects\n\n#### Copy-Paste Prompts\n```\nUse @nextjs-app-router-patterns to set up parallel routes and intercepting routes\n```\n\n### Phase 6: Forms and Validation\n\n#### Skills to Invoke\n- `frontend-developer` - Form development\n- `typescript-advanced-types` - Type validation\n- `react-ui-patterns` - Form patterns\n\n#### Actions\n1. Choose form library (React Hook Form, Formik)\n2. Set up validation (Zod, Yup)\n3. Create form components\n4. Handle submissions\n5. Implement error handling\n\n#### Copy-Paste Prompts\n```\nUse @frontend-developer to create forms with React Hook Form and Zod\n```\n\n### Phase 7: Testing\n\n#### Skills to Invoke\n- `javascript-testing-patterns` - Jest/Vitest\n- `playwright-skill` - E2E testing\n- `e2e-testing-patterns` - E2E patterns\n\n#### Actions\n1. Set up testing framework\n2. Write unit tests\n3. Create component tests\n4. Implement E2E tests\n5. Configure CI integration\n\n#### Copy-Paste Prompts\n```\nUse @javascript-testing-patterns to write Vitest tests\n```\n\n```\nUse @playwright-skill to create E2E tests for critical flows\n```\n\n### Phase 8: Build and Deployment\n\n#### Skills to Invoke\n- `vercel-deployment` - Vercel deployment\n- `vercel-deploy-claimable` - Vercel deployment\n- `web-performance-optimization` - Performance\n\n#### Actions\n1. Configure build settings\n2. Optimize bundle size\n3. Set up environment variables\n4. Deploy to Vercel\n5. Configure preview deployments\n\n#### Copy-Paste Prompts\n```\nUse @vercel-deployment to deploy Next.js app to production\n```\n\n## Technology Stack\n\n| Category | Technology |\n|----------|------------|\n| Framework | Next.js 14+, React 18+ |\n| Language | TypeScript 5+ |\n| Styling | Tailwind CSS v4 |\n| State | Zustand, React Query |\n| Forms | React Hook Form, Zod |\n| Testing | Vitest, Playwright |\n| Deployment | Vercel |\n\n## Quality Gates\n\n- [ ] TypeScript compiles without errors\n- [ ] All tests passing\n- [ ] Linting clean\n- [ ] Performance metrics met (LCP, CLS, FID)\n- [ ] Accessibility checked (WCAG 2.1)\n- [ ] Responsive design verified\n\n## Related Workflow Bundles\n\n- `development` - General development\n- `testing-qa` - Testing workflow\n- `documentation` - Documentation\n- `typescript-development` - TypeScript patterns",
  "applicable_domains": [
    "frontend"
  ],
  "category": "frontend",
  "invocation": [
    "/react-nextjs-development"
  ],
  "authored_by": "claudeskills.in community",
  "source_url": "https://claudeskills.in/skill/react-nextjs-development",
  "provenance": {
    "source": "claudeskills.in",
    "source_url": "https://claudeskills.in/skill/react-nextjs-development",
    "license": "unknown",
    "imported_at": "2026-09-03",
    "notes": "Aggregated by claudeskills.in from community GitHub lists."
  },
  "tags": [
    "claudeskills",
    "frontend",
    "risk-reviewed"
  ],
  "lifecycle": "draft"
}