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

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

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

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 — Complete official docs covering App Router, Server Components, data fetching, and routing
• React 19 Documentation — Official React reference covering hooks, components, and concurrent features
• TypeScript Handbook — Official TypeScript documentation for type-safe React and Next.js development
• Vercel Deployment Guide — Official deployment guide for Next.js applications on Vercel
• React Server Components Architecture — React team's documentation on RSC design and implementation