react-spa

Create React Single Page Applications with Vite or Create React App.

13|4|Updated Feb 15, 2026

Search Tags:#project setup #Vite #React Router #CRA #React SPA

Ready to run

npx skills add https://github.com/ggombee/code-forge --skill react-spa-ggombee

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-spa
Source: https://github.com/ggombee/code-forge/tree/main/modules/frameworks/react-spa
Command: npx skills add https://github.com/ggombee/code-forge --skill react-spa-ggombee

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires vite, create-react-app, react-router-dom, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill simplifies the setup of React Single Page Applications (SPA) using Vite or Create React App (CRA), reducing the complexity of configuring routes, state management, and environment variables.

Core Features & Use Cases

Project Structure: Provides a predefined project structure with directories for src, components, pages, services, etc.
Vite Configuration: Offers a template for Vite configuration, including aliases, server settings, and proxy.
React Router v6: Utilizes React Router v6 for clean routing with nested routes and protected routes.
Quick Start: Automates the creation of essential files like CLAUDE.md and AGENTS.md to streamline the project setup.

Quick Start

Run the 'react-spa' skill to automatically generate a new React SPA project with Vite.

Frequently Asked Questions about react-spa

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I set up a React SPA with Vite and React Router?▼

Setting up a React SPA with Vite involves generating a predefined directory structure, configuring Vite settings with aliases and proxies, and implementing React Router v6 for modern routing conventions automatically.

Can I use Create React App instead of Vite for my React SPA project?▼

Yes, Create React App is fully supported. This Skill streamlines React SPA creation using either Vite or Create React App conventions, allowing you to choose your preferred build tool for project execution.

What is the best way to structure a React SPA with nested and protected routes?▼

Using React Router v6 within a predefined directory structure is the best way to organize a React SPA. This approach cleanly separates pages and components while supporting nested and protected routing conventions.

Does this React SPA setup include Vite configuration for aliases and proxies?▼

Yes, the setup provides a Vite configuration template that includes predefined settings for path aliases, development server options, and network proxies to simplify your React SPA development environment.

Do I need to manually configure environment variables and state management for my Vite React app?▼

No, manual configuration from scratch is not required. This Skill reduces the complexity of configuring environment variables, state management, and routing by providing predefined templates for your Vite or CRA project.