React Nextjs Development

{
  "schema_version": "2.0",
  "meta": {
    "generated_at": "2026-02-24T23:16:23.311Z",
    "slug": "sickn33-react-nextjs-development",
    "source_url": "https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/react-nextjs-development",
    "source_ref": "main",
    "model": "claude",
    "analysis_version": "3.0.0",
    "source_type": "community",
    "content_hash": "78d70e7f722438911b86aabb49b194c40fc7497a6e34f981b14822ae26638704",
    "tree_hash": "02129849446b1ca24a6656c9c81397cb37c2fd13c364d9b35b28c8006d48ce7b"
  },
  "skill": {
    "name": "react-nextjs-development",
    "description": "React and Next.js 14+ application development with App Router, Server Components, TypeScript, Tailwind CSS, and modern frontend patterns.",
    "summary": "Build modern React applications with Next.js 14+ App Router, Server Components, TypeScript, and Tailwind CSS using structured development workflows.",
    "icon": "📦",
    "version": "1.0.0",
    "author": "sickn33",
    "license": "MIT",
    "category": "coding",
    "tags": [
      "React",
      "Next.js",
      "TypeScript",
      "Tailwind CSS",
      "Server Components"
    ],
    "supported_tools": [
      "claude",
      "codex",
      "claude-code"
    ],
    "risk_factors": []
  },
  "security_audit": {
    "risk_level": "safe",
    "is_blocked": false,
    "safe_to_publish": true,
    "summary": "This skill is a documentation and workflow bundle containing only markdown content with usage prompts. Static analysis flagged 55 external_commands patterns and 11 cryptographic patterns, but all are FALSE POSITIVES - the backticks are markdown code formatting, not shell execution, and no cryptographic code exists. No security risks identified. Safe for publication.",
    "risk_factor_evidence": [],
    "critical_findings": [],
    "high_findings": [],
    "medium_findings": [],
    "low_findings": [],
    "dangerous_patterns": [],
    "files_scanned": 1,
    "total_lines": 230,
    "audit_model": "claude",
    "audited_at": "2026-02-24T23:16:23.311Z"
  },
  "content": {
    "user_title": "Build React and Next.js Applications",
    "value_statement": "This skill provides structured workflows for developing modern React and Next.js applications with App Router, Server Components, and TypeScript. It guides you through project setup, component architecture, styling, data fetching, routing, forms, testing, and deployment.",
    "seo_keywords": [
      "React development",
      "Next.js 14",
      "App Router",
      "Server Components",
      "TypeScript React",
      "Tailwind CSS",
      "Claude Code skills",
      "Codex workflow",
      "Claude AI development",
      "frontend development"
    ],
    "actual_capabilities": [
      "Scaffold Next.js 14+ projects with App Router and TypeScript configuration",
      "Implement Server Components and Client Components with proper patterns",
      "Create reusable React components with TypeScript and Tailwind CSS",
      "Set up state management using Zustand and React Query",
      "Implement forms with React Hook Form and Zod validation",
      "Configure testing with Vitest and Playwright for E2E coverage"
    ],
    "limitations": [
      "Requires existing knowledge of JavaScript and React fundamentals",
      "Focused on Next.js 14+ and may not support older Next.js versions",
      "Does not include backend database setup or API server implementation",
      "Deployment workflows are Vercel-specific and may need adaptation for other platforms"
    ],
    "use_cases": [
      {
        "title": "Frontend Developer Building a Dashboard",
        "description": "Create a modern admin dashboard with Next.js App Router, Server Components for data fetching, and Tailwind CSS for responsive design with proper component architecture.",
        "target_user": "Frontend developers"
      },
      {
        "title": "Full-Stack Developer Starting a SaaS Project",
        "description": "Rapidly scaffold a new SaaS application with TypeScript, implement authentication flows, set up form validation with Zod, and deploy to Vercel with preview environments.",
        "target_user": "Full-stack developers"
      },
      {
        "title": "Team Lead Establishing Development Standards",
        "description": "Define consistent React patterns, component architecture guidelines, testing strategies, and code quality gates for a development team adopting Next.js 14+.",
        "target_user": "Engineering managers"
      }
    ],
    "prompt_templates": [
      {
        "title": "Beginner: Create a New Next.js Project",
        "prompt": "Help me scaffold a new Next.js 14 project with App Router, TypeScript, and Tailwind CSS. Set up the basic folder structure with proper conventions for components, lib, and app directories.",
        "scenario": "Starting a new project from scratch"
      },
      {
        "title": "Intermediate: Build a Data-Fetching Component",
        "prompt": "Create a Server Component that fetches data from an API endpoint and displays it in a list. Include proper error handling, loading states, and TypeScript types for the data structure.",
        "scenario": "Implementing data-driven UI components"
      },
      {
        "title": "Advanced: Set Up Form with Validation",
        "prompt": "Build a multi-step form using React Hook Form with Zod schema validation. Include field-level error messages, form state persistence, and proper TypeScript integration for type-safe form data.",
        "scenario": "Creating complex validated forms"
      },
      {
        "title": "Expert: Implement Parallel Routes and Intercepting Routes",
        "prompt": "Set up Next.js App Router parallel routes for a dashboard layout with intercepting routes for modal dialogs. Include proper slot configurations and conditional rendering based on navigation context.",
        "scenario": "Advanced routing patterns for complex UIs"
      }
    ],
    "output_examples": [
      {
        "input": "Create a Next.js 14 project with App Router and TypeScript",
        "output": [
          "Project structure created with app/ directory for App Router",
          "TypeScript configured with strict mode and proper tsconfig paths",
          "Tailwind CSS v4 installed with base configuration",
          "ESLint and Prettier set up with React-specific rules",
          "Basic layout and page templates generated"
        ]
      },
      {
        "input": "Build a user profile component with edit functionality",
        "output": [
          "Server Component for fetching user data from API",
          "Client Component for form interaction and state management",
          "Zod schema for profile validation with custom error messages",
          "React Hook Form integration with proper type inference",
          "Tailwind-styled responsive profile card with edit modal"
        ]
      }
    ],
    "best_practices": [
      "Use Server Components by default and only switch to Client Components when interactivity is required",
      "Implement proper TypeScript types for all components, props, and API responses to catch errors at compile time",
      "Follow the colocation principle by keeping components, styles, and tests together in feature-based directories"
    ],
    "anti_patterns": [
      "Avoid using useEffect for data fetching when Server Components can handle it more efficiently",
      "Do not pass large JSON objects as client component props - fetch data directly in the component",
      "Never skip error boundaries - always implement proper error handling for async operations"
    ],
    "faq": [
      {
        "question": "What is the difference between App Router and Pages Router in Next.js?",
        "answer": "App Router (introduced in Next.js 13) uses the app/ directory with Server Components by default, supports nested layouts, and provides better performance. Pages Router uses the pages/ directory and is the older routing system. This skill focuses on App Router for modern Next.js development."
      },
      {
        "question": "When should I use Server Components vs Client Components?",
        "answer": "Use Server Components by default for static content, data fetching, and keeping bundle size small. Use Client Components only when you need interactivity like onClick handlers, useState, useEffect, or browser APIs. Mark Client Components with the 'use client' directive."
      },
      {
        "question": "Is Tailwind CSS v4 compatible with Next.js App Router?",
        "answer": "Yes, Tailwind CSS v4 is fully compatible with Next.js App Router. The v4 version offers improved performance with a new engine and simplified configuration. This skill includes setup instructions for Tailwind v4 with App Router projects."
      },
      {
        "question": "How do I handle authentication with Server Components?",
        "answer": "Authentication works seamlessly with Server Components. You can read session cookies on the server, protect routes with middleware, and pass user data to components. For client-side auth checks, use Client Components with hooks from your auth provider."
      },
      {
        "question": "Can I use this skill with an existing Next.js 13 project?",
        "answer": "Yes, but some patterns may differ. Next.js 13.4+ supports App Router, so most concepts apply. If you are on an older version with only Pages Router, consider migrating to App Router to fully benefit from this skill's workflows."
      },
      {
        "question": "What testing frameworks does this skill recommend?",
        "answer": "This skill recommends Vitest for unit and component testing due to its speed and compatibility with Vite. For end-to-end testing, Playwright is recommended for its reliability and cross-browser support. Both integrate well with Next.js projects."
      }
    ]
  },
  "file_structure": [
    {
      "name": "SKILL.md",
      "type": "file",
      "path": "SKILL.md",
      "lines": 230
    }
  ]
}