What is the benefit of using Apidog MCP with this skill?

Apidog MCP acts as the single source of truth for your API, allowing the skill to automatically regenerate TypeScript types and ensure frontend/backend alignment.

Does this skill work with existing React projects?

Yes, it can be used as a reference to refactor existing SPAs toward a more maintainable, feature-based structure and modern TanStack-driven data layer.

How does this skill handle React 19 features?

It specifically configures the environment for the React Compiler, utilizes the Actions API for server mutations, and implements hooks like useOptimistic for seamless UI updates.

How are tests handled within this architectural pattern?

The skill enforces co-locating Vitest and React Testing Library (RTL) tests next to logic files, using MSW for network stubbing to ensure isolated and reliable testing.

React 19 SPA Core Principles

Name: React 19 SPA Core Principles
Author: MadAppGang

byMadAppGang

•

177

•

学习与文档

Enforces architectural standards and production-grade best practices for modern React 19 Single Page Applications.

This skill provides a comprehensive blueprint for building robust React 19 applications using the TanStack ecosystem, Vite, and TypeScript. It establishes a strict project structure that separates UI from data logic, integrates the React Compiler for automatic performance optimization, and mandates the use of Apidog MCP as the source of truth for API types. Ideal for maintaining consistency across teams, it ensures every PR follows established rules for routing, state management, and testing while utilizing the latest React patterns.

主要功能

01177 GitHub stars

02Enforced testing standards using Vitest and React Testing Library.

03Standardized feature-based project architecture for scalable SPAs.

04Type-safe data fetching patterns using TanStack Query and Apidog MCP.

05React 19 Compiler integration for automated performance optimization.

06File-based routing protocols with TanStack Router and prefetching.

使用场景

01Automating architectural reviews and code consistency during pull requests.

02Onboarding developers to standardized frontend architectural patterns.

03Bootstrapping new production-ready React 19 projects with a proven stack.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add madappgang/claude-code core-principles

For use in Claude.ai and ChatGPT

Download Skill