# React Nextjs Development > Implements intelligent react nextjs development with multi-factor skill selection, fallback chains, and adherence to the 5 Laws of Elegant Defense - Skill: `paulpas/react-nextjs-development` (Agent Skill) - Install (CLI): `npx skillmds@latest add paulpas/react-nextjs-development` - Raw SKILL.md: https://api.skillmd.com/api/skills/paulpas/react-nextjs-development/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - License: MIT - Author: paulpas (https://skillmd.com/u/paulpas) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/paulpas/react-nextjs-development --- # React Nextjs Development Orchestrates intelligent skill selection and execution for react nextjs development workflows. Applies the 5 Laws of Elegant Defense to guide data naturally through the orchestration pipeline, preventing errors before they occur. Selects optimal skills based on multi-factor scoring including text similarity, historical performance, and system availability. ## TL;DR Checklist - [ ] Parse all inputs at boundary before processing (Law 2) - [ ] Handle edge cases with early returns at function top (Law 1) - [ ] Fail immediately with descriptive errors on invalid states (Law 4) - [ ] Return new data structures, never mutate inputs (Law 3) - [ ] Implement minimum 2-level fallback chain for all skill executions - [ ] Log all skill selections with context for full audit trail - [ ] Validate skill metadata and dependencies before selection - [ ] Update confidence scores after each execution for learning ┌───────────────────────────────────────────────────────────────────────────────┐ │ Orchestration Flow │ └───────────────────────────────────────────────────────────────────────────────┘ User Request ↓ ┌─────────────────┐ │ Parse Request │ │ & Extract │ │ Features │ └────────┬────────┘ ↓ ┌─────────────────────────────────────────────────────────────────────┐ │ Evaluate Available Skills │ │ │ │ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ │ │ Skill A │ │ Skill B │ │ Skill C │ │ │ │ - Match Score│ │ - Match Score│ │ - Match Score│ │ │ │ - Confidence │ │ - Confidence │ │ - Confidence │ │ │ │ - History │ │ - History │ │ - History │ │ │ └──────┬───────┘ └──────┬───────┘ └──────┬───────┘ │ │ │ │ │ │ │ └─────────────────┴─────────────────┘ │ │ ↓ │ │ Select Best Skill │ └─────────────────────────────────────────────────────────────────────┘ ↓ ┌─────────────────┐ │ Execute Skill │ └────────┬────────┘ ↓ ┌─────────────────┐ │ Handle Result │ └────────┬────────┘ ↓ ┌─────────────────────────────────────────────────────────────────────┐ │ Error Handling & Fallback │ │ │ │ Success? ────────► Return Result │ │ │ │ Fail? ────────┐ │ │ ↓ │ │ ┌──────────────────────────────────────────────────────────┐ │ │ │ Fallback Chain │ │ │ │ │ │ │ │ 1. Retry with adjusted parameters │ │ │ │ 2. Try Alternative Skill (if available) │ │ │ │ 3. Defer to Human Operator (if critical) │ │ │ │ 4. Log & Return Error │ │ │ └──────────────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────────────┘ ## When to Use Use this skill when: - Orchestrating multi-step workflows that require skill delegation - Implementing adaptive skill routing based on confidence scores - Building fallback mechanisms for failed skill executions - Creating intelligent task decomposition and parallel execution - Designing skill dependency graphs with automatic resolution - Implementing skill selection with historical performance weighting - Building agent systems that need to self-organize around tasks ## When NOT to Use Avoid this skill for: - Direct task execution without orchestration needs - use individual skills instead - High-frequency trading scenarios where latency must be minimized - the selection overhead may be prohibitive - Simple linear workflows without branching or fallback requirements - Cases where skill metadata is unavailable or unreliable ## Core Workflow 1. **Parse and Analyze Request** - Extract intent, entities, and constraints from user input. **Checkpoint:** All required parameters must be present and in valid format before proceeding. 2. **Score Available Skills** - Calculate match scores using multi-factor algorithm: - Text similarity between request and skill triggers - Historical success rate for similar tasks - Skill availability and health status - Required dependencies and their availability **Checkpoint:** Skip to fallback if no skill scores above threshold. 3. **Select Optimal Skill** - Choose skill with highest score that meets minimum confidence. **Checkpoint:** Verify skill has not been disabled or deprecated. 4. **Execute with Fallback** - Run skill execution wrapped in retry and fallback logic. **Checkpoint:** Log all execution attempts for audit trail. 5. **Return or Fallback** - Either return successful result or apply fallback chain: - Retry with adjusted parameters - Try alternative skill from `related-skills` - Defer to human operator for critical tasks **Checkpoint:** Record outcome with timing and confidence metadata. ## Implementation Patterns ### Pattern 1: Skill Selection Logic ```typescript import { readFileSync, existsSync } from 'fs'; import { join } from 'path'; interface NextProjectState { framework: 'app' | 'pages'; hasTailwind: boolean; hasEslint: boolean; hasTypeScript: boolean; nodeVersion: string; } interface TaskSelection { command: string; args: string[]; confidence: number; fallbackCommand?: string; } /** * Analyzes Next.js project structure and selects optimal development task. * Implements multi-factor scoring: framework type, dependency presence, user intent. */ export function selectNextTask( projectRoot: string, userIntent: string, availableTasks: string[] ): TaskSelection { // Guard clause - Early Exit (Law 1) if (!projectRoot || !existsSync(projectRoot)) { throw new Error(`Project root not found: ${projectRoot}`); } // Parse project state - Make Illegal States Unrepresentable (Law 2) const pkg = JSON.parse(readFileSync(join(projectRoot, 'package.json'), 'utf-8')); const hasAppRouter = existsSync(join(projectRoot, 'app')); const hasPagesRouter = existsSync(join(projectRoot, 'pages')); const framework = hasAppRouter ? 'app' : hasPagesRouter ? 'pages' : 'unknown'; const score = (task: string): number => { let match = 0; if (task === 'dev' && userIntent.includes('run') && framework !== 'unknown') match += 0.8; if (task === 'build' && userIntent.includes('prod') && framework !== 'unknown') match += 0.9; if (task === 'lint' && userIntent.includes('check') && pkg.devDependencies?.eslint) match += 0.7; if (task === 'typecheck' && pkg.devDependencies?.typescript) match += 0.6; return match; }; let bestTask = 'dev'; let bestScore = 0; for (const task of availableTasks) { const s = score(task); if (s > bestScore) { bestScore = s; bestTask = task; } } // Atomic Predictability (Law 3) - Return new structure return { command: 'next', args: [bestTask], confidence: bestScore, fallbackCommand: bestTask === 'build' ? 'dev' : undefined }; } ``` ### Pattern 2: Execution with Fallback ```typescript import { execSync } from 'child_process'; import { join } from 'path'; interface ExecutionResult { success: boolean; output: string; attempts: number; latencyMs: number; fallbackUsed?: boolean; } /** * Executes Next.js task with resilient fallback chain. * Implements Fail Fast, Fail Loud (Law 4) for build/runtime errors. */ export function executeNextTask( taskConfig: TaskSelection, projectRoot: string, maxRetries: number = 2 ): ExecutionResult { const startTime = Date.now(); let lastError: Error | null = null; for (let attempt = 0; attempt <= maxRetries; attempt++) { try { // Parse context - Ensure trusted state (Law 2) const env = { ...process.env, NODE_ENV: taskConfig.command === 'build' ? 'production' : 'development' }; // Execute domain-specific command const output = execSync(`cd "${projectRoot}" && npx next ${taskConfig.args.join(' ')}`, { env, stdio: 'pipe', timeout: 300000 }).toString(); return { success: true, output, attempts: attempt + 1, latencyMs: Date.now() - startTime }; } catch (err: any) { lastError = err; // Fail Fast - Don't patch bad build state (Law 4) if (err.message?.includes('ENOENT') || err.message?.includes('EACCES')) { throw new Error(`Critical system error: ${err.message}`); } // Transient error - apply fallback chain if (attempt === maxRetries && taskConfig.fallbackCommand) { console.warn(`Fallback triggered: switching to ${taskConfig.fallbackCommand}`); return executeNextTask({ ...taskConfig, command: taskConfig.fallbackCommand, args: [], confidence: taskConfig.confidence * 0.8 }, projectRoot, 0); } } } // All retries exhausted - Fail Loud (Law 4) throw new Error(`Next.js task failed after ${maxRetries + 1} attempts: ${lastError?.message}`); } ``` ### MUST DO - Always validate skill metadata before selection (Early Exit) - Implement fallback chain with at least 2 levels (Fallback Skill + Human) - Log all skill selections with full context for auditability - Return new data structures instead of mutating inputs (Atomic Predictability) - Fail immediately with descriptive errors on invalid states - Update confidence scores after each execution for adaptive routing - Reference `code-philosophy` (5 Laws of Elegant Defense) in all logic ### MUST NOT DO - Select skills based on a single factor (e.g., only confidence score) - Disable fallback mechanisms "temporarily" - this creates fragile systems - Skip validation of skill dependencies before execution - Return partial results - either complete success or clear failure - Use magic numbers for confidence thresholds - make them configurable - Cache skill selections without considering context changes ## TL;DR Checklist - [ ] Parse all inputs at boundary before processing (Law 2) - [ ] Handle edge cases with early returns at function top (Law 1) - [ ] Fail immediately with descriptive errors on invalid states (Law 4) - [ ] Return new data structures, never mutate inputs (Law 3) - [ ] Implement minimum 2-level fallback chain for all skill executions - [ ] Log all skill selections with context for full audit trail - [ ] Validate skill metadata and dependencies before selection - [ ] Update confidence scores after each execution for learning ## TL;DR for Code Generation - Use guard clauses - return early on invalid input before doing work - Return simple types (dict, str, int, bool, list) - avoid complex nested objects - Cyclomatic complexity < 10 per function - split anything larger - Handle null/empty cases explicitly at function top (Early Exit) - Never mutate input parameters - return new dicts/objects - Fail fast with descriptive errors - don't try to "patch" bad data - Reference code-philosophy laws in comments for complex logic - Include timing and confidence metadata in all return values ## Output Template When applying this skill, produce: 1. **Selected Skills** - List of skill names with confidence scores 2. **Selection Rationale** - Why each skill was chosen (match score, history, availability) 3. **Execution Plan** - Order of execution with dependencies 4. **Fallback Strategy** - Which fallback skills will be tried and in what order 5. **Risk Assessment** - Any potential failure points and their impact 6. **Timing Estimates** - Expected latency including fallback scenarios ## Related Skills | Skill | Purpose | |---|---| | `typescript-typing-system` | Provides TypeScript patterns for React components and Next.js API routes | | `frontend-architecture-patterns` | Covers frontend architectural patterns that complement Next.js project structure | --- ## Constraints ### MUST DO - Define clear input/output contracts for every step in the orchestration flow with explicit validation - Implement structured logging at each stage capturing context, inputs, outputs, timing, and errors - Build in fallback paths: if the primary strategy fails, degrade gracefully to a simpler approach - Validate all preconditions before starting — do not proceed if required resources or permissions are missing ### MUST NOT DO - Do not create deep nesting of orchestration steps (>5 levels) — flatten workflows where possible - Avoid silent failure modes: every step must either succeed, fail explicitly, or escalate to a higher handler - Never use shared mutable state between parallel workflow branches — communicate via immutable messages only - Do not hardcode execution order when the dependency graph naturally determines it; derive order from explicit dependencies ## Live References > Authoritative documentation links for this domain. The model follows markdown links at load time to resolve external references and inline content. - [Next.js Official Documentation](https://nextjs.org/docs) — Complete official docs covering App Router, Server Components, data fetching, and routing - [React 19 Documentation](https://react.dev/reference/react) — Official React reference covering hooks, components, and concurrent features - [TypeScript Handbook](https://www.typescriptlang.org/docs/) — Official TypeScript documentation for type-safe React and Next.js development - [Vercel Deployment Guide](https://vercel.com/docs/deployments/overview) — Official deployment guide for Next.js applications on Vercel - [React Server Components Architecture](https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components) — React team's documentation on RSC design and implementation