React Single Page Application

What problem does it solve?

React SPA codebases often drift into “vibe-coded” structure where components mix UI, network calls, and business logic, making testing difficult and refactors risky.

Core Features & Use Cases

• Clear directory structure: Separate UI components, reusable hooks, and HTTP/network services to keep render logic clean and predictable.
• Enforced data flow: Route pages orchestrate via hooks, hooks manage state and side effects, and services own all API access.
• Safety rules and anti-pattern detection: Prevent critical issues like API calls during render, token storage in localStorage, and scattered unvalidated environment reads.
• Use Case: When inheriting a React SPA that has fetch calls inside components and inconsistent folder organization, apply this skill’s rules to reorganize code so network logic becomes testable services and stateful behavior becomes reusable hooks.

Quick Start

Use the React Single Page Application skill by asking your coding agent to reorganize an existing SPA to match the required directories and separation rules, then propose a phased refactor plan that removes API calls from render and moves network logic into services.