skills.rest
ggombee
ggombeeCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/ggombee/code-forge --skill react-spa-ggombee
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
ollieb89ollieb89

web-artifacts-builder

Scaffold a React + Vite project and bundle it into a single HTML file.

Community
Advanced
nirukk52nirukk52
1

frontend-development

Coordinate SvelteKit 2, Svelte 5 runes, Skeleton UI, and Encore clients for frontend features.

Community
Advanced
mohitmishra786mohitmishra786

frontend

Develop and refine web user interfaces with React, Next.js, Vue, or Svelte.

Community
Advanced
PatternsDevPatternsDev
235

react-server-components

Server-render React components to reduce client-side JavaScript in Next.js App Router.

Official
Intermediate