skills.rest
MadAppGang
MadAppGangOFFICIAL
Explore all skills by this author →
WebsiteGitHub

core-principles

Define React 19 SPA architecture and project structure principles.

278|29|Updated Nov 4, 2025
Search Tags:#architecture#best practices#frontend#project structure#TypeScript#React 19#TanStack#Vite
One-click install
npx skills add https://github.com/MadAppGang/claude-code --skill core-principles
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: core-principles
Source: https://github.com/MadAppGang/claude-code/tree/main/plugins/frontend/skills/core-principles
Command: npx skills add https://github.com/MadAppGang/claude-code --skill core-principles

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Establishing a consistent, high-quality architectural foundation for React 19 SPAs can be challenging, especially with evolving best practices. This Skill defines the core principles and project structure for modern development.

Core Features & Use Cases

  • Stack Overview: Understand the recommended technology stack including React 19, TypeScript, Vite, Biome, and TanStack ecosystem.
  • Project Organization: Follow a clear project structure with dedicated directories for routes, components, features, and API code.
  • Agent Execution Rules: Adhere to a "done" checklist for every code modification, ensuring quality, performance, and type safety.
  • Authoritative Sources: Reference key documentation for each tool, ensuring alignment with official best practices.
  • Use Case: Onboard a new developer to the project by providing a comprehensive guide to the technology stack, project structure, and coding standards, ensuring immediate productivity and consistency.

Quick Start

Use the core-principles skill to understand the recommended project structure for a new React 19 SPA.

Frequently Asked Questions about core-principles

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

FAQPage Schema
How do I structure a React 19 SPA project for consistency across teams?▼

React 19 SPA project structure should organize routes, components, features, and API code in dedicated directories. This Skill defines a clear layout with TypeScript, Vite, and TanStack Router to ensure consistent architecture, enable agent execution rules, and maintain quality standards across your team.

What's the recommended tech stack for building React 19 applications?▼

The recommended stack includes React 19, TypeScript, Vite for bundling, Biome for linting, TanStack Router for file-based routing, and TanStack Query for server mutations. This combination provides type safety, compiler-friendly patterns, and optimistic UI capabilities aligned with modern best practices.

How do I set up API spec synchronization in a React 19 project?▼

Set up API spec synchronization using Apidog MCP to keep your API specifications aligned with your React 19 application. This ensures your feature hooks and React Actions stay synchronized with backend contracts, reducing integration friction and type errors.

Can I use file-based routing with React 19 instead of manual route configuration?▼

Yes, TanStack Router provides file-based routing for React 19 SPAs, eliminating manual route setup. Combined with a defined project structure, this approach simplifies onboarding, reduces configuration errors, and aligns with modern development workflows.

What quality checks should I follow for every code change in a React 19 project?▼

This Skill includes a "done" checklist for code modifications covering quality, performance, and type safety. The checklist ensures consistency with React 19 best practices, TanStack patterns, and compiler optimization, reducing bugs and maintaining architectural integrity across commits.

How do I implement optimistic UI updates in React 19 with server mutations?▼

Implement optimistic UI by combining React 19 Actions or TanStack Query with your mutation layer. This pattern updates the UI immediately while the server request completes, improving perceived performance and user experience in modern SPAs.

Related Skills

Explore More Software Engineering Skills→
MadAppGangMadAppGang
278

tooling-setup

Configure React 19 frontend tooling with Vite, TypeScript, Biome, and Vitest.

Official
Intermediate
Pravin-surawasePravin-surawase
5

react-validation

Run build, lint, type-check, and test checks on React frontend changes.

Community
Intermediate
maroffomaroffo
16

react-nextjs

Develop React 19 and Next.js 16 App Router applications with server and client components.

Community
Intermediate
HCMUTE-RTICHCMUTE-RTIC

frontend-developer

Develop and optimize React 19 and Next.js 15 frontend applications.

Official
Advanced