react

Build React SPAs with React Router v7, Jotai, Vite, and Bun.

53|1|Updated Dec 18, 2025

Search Tags:#typescript #react #router #bun #vite #spa #jotai

Ready to run

npx skills add https://github.com/cosmix/claude-code-setup --skill react-cosmix

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react
Source: https://github.com/cosmix/claude-code-setup/tree/main/skills/react
Command: npx skills add https://github.com/cosmix/claude-code-setup --skill react-cosmix

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill guides building modern React Single Page Applications (SPAs) with client-side routing, global state management, and rapid iteration using Vite, Bun, React Router v7, and Jotai.

Core Features & Use Cases

Router patterns: Client-side routing with React Router v7 and nested routes.
State management: Global state with Jotai atoms and selectors.
Tooling: Vite, Bun, and TypeScript for fast development and clean builds.
Use Case: Create a SPA with a home page, a user list, and a dynamic user detail page using route-based data loading.

Quick Start

Scaffold a new app with Bun + Vite template, install React Router and Jotai, then run the dev server.

Frequently Asked Questions about react

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

FAQPage Schema

How do I build a React SPA with client-side routing and state management?▼

Build a React SPA by scaffolding with Bun and Vite, installing React Router v7 for client-side routing and nested routes, adding Jotai for atomic state management, and configuring TypeScript with ES2022 targeting. This setup enables fast development iteration and clean production builds with route-based data loading.

What's the best way to set up routing in a React application?▼

React Router v7 provides client-side routing with nested routes and route-based data loading via loaders. Combined with Vite for fast builds and Bun for package management, it enables seamless navigation in SPAs without page refreshes while supporting dynamic user detail pages and complex route hierarchies.

Can I use Jotai for global state management in React?▼

Yes, Jotai provides atomic state management for React applications, enabling you to manage global state with selectors and minimal boilerplate. It integrates directly with React Router v7 SPAs built with Vite and Bun, supporting async data loading and form handling.

Does Vite work well for building React applications with TypeScript?▼

Vite delivers fast development and production builds for React with built-in TypeScript support, ES2022 target compilation, module aliasing, and code splitting. Paired with Bun, it accelerates development iteration and enables strict TypeScript typing for modern React SPAs.

How do I handle async data loading in a React Router application?▼

React Router v7 loaders enable route-based async data loading, fetching data before rendering components. Combined with Jotai for state management and Vite's fast bundling, this pattern supports complex user list and detail page flows with clean separation of data fetching logic.

What are the prerequisites for building a modern React SPA?▼

You need Node.js or Bun runtime, TypeScript knowledge, and familiarity with React component patterns. This Skill handles scaffolding with Bun and Vite templates, then integrates React Router v7 and Jotai, so no additional dependencies or prior configuration is required.