react-web

Scaffold TypeScript React SPAs with Vite, React Router, and Apollo Client.

Updated Mar 18, 2026

Search Tags:#typescript #react #graphql #vite #spa #apollo-client #frontend-architecture

Ready to run

npx skills add https://github.com/bpteam/coder --skill react-web-bpteam

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-web
Source: https://github.com/bpteam/coder/tree/main/.opencode/skills/react-web
Command: npx skills add https://github.com/bpteam/coder --skill react-web-bpteam

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This frontend blueprint provides an opinionated, maintainable structure for building GraphQL-driven React SPAs, reducing architectural drift and onboarding time.

Core Features & Use Cases

Opinionated architecture enforces a strict directory layout, TS-first typing, and separation of concerns between UI, data fetching, and routing.
GraphQL-centric data layer uses Apollo Client with a clear pattern for server-state management in a scalable SPA.
Guided project scaffolding supports teams starting new React apps with Vite, React Router, and type-safe forms.

Quick Start

Set up a new React SPA project following the strict structure and wire up Apollo Client with GraphQL.

Frequently Asked Questions about react-web

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

FAQPage Schema

How do I structure a React SPA with GraphQL and TypeScript to prevent architectural drift?▼

Structure a React SPA by enforcing a fixed directory layout that separates UI, data fetching, and routing concerns. This opinionated scaffold uses TypeScript with no any types and Apollo Client to enforce a maintainable architecture.

What is the best way to scaffold a Vite and React Router project with Apollo Client?▼

The best way to scaffold a Vite and React Router project is using an opinionated blueprint that enforces strict TypeScript and separation of concerns. It provides guided scaffolding to wire up Apollo Client for GraphQL server-state management.

Can I use this React SPA scaffold for existing frontend projects, or is it only for new apps?▼

This React SPA scaffold applies primarily to teams starting new React apps with Vite, React Router, and type-safe forms. It enforces a strict architecture to reduce architectural drift and onboarding time across projects.

Why should I enforce strict TypeScript usage in a GraphQL-driven React SPA?▼

Enforce strict TypeScript usage with no any types in a GraphQL-driven React SPA to guarantee type-safe data fetching and form handling. This strict typing enforces a maintainable frontend architecture and prevents runtime errors.

Does this React SPA architecture blueprint support other data fetching libraries besides Apollo Client?▼

This React SPA architecture blueprint is GraphQL-centric and specifically uses Apollo Client for server-state management. It enforces a clear data fetching pattern that relies on Apollo Client within its fixed directory layout.