Does it support the React 19 Compiler?

Yes, it specifically includes rules to keep components 'compiler-friendly' and provides guidance on handling compiler flags.

How does it handle API synchronization?

The skill utilizes Apidog MCP to fetch the latest API specifications and automatically regenerates types to ensure the frontend always matches the backend contract.

What makes this different from a standard boilerplate?

Unlike a static boilerplate, this is a living set of instructions that guides Claude's behavior during the coding process, ensuring every new feature follows specific architectural rules.

Can I use this for Next.js projects?

This skill is specifically optimized for Single Page Applications (SPAs) using Vite and TanStack Router rather than the Next.js App Router.

Does it enforce a specific linting standard?

Yes, it integrates Biome for unified formatting and linting to maintain high code quality across the project.

React 19 Frontend Core Principles

Name: React 19 Frontend Core Principles
Author: tianzecn

bytianzecn

•

Design Tools

Establishes production-ready architectural patterns and best practices for modern React 19 SPA development.

This skill provides a comprehensive framework for building high-performance Single Page Applications using the React 19 ecosystem. It standardizes architectural decisions by enforcing a specific project structure, integrating the TanStack suite for routing and state management, and leveraging the React Compiler for automatic optimization. It is an essential guide for Claude when planning new projects, onboarding team members, or performing code reviews to ensure consistency and adherence to modern frontend standards.

Key Features

01Optimizes for the React Compiler with pure component patterns

02Standardizes testing workflows using Vitest and React Testing Library

03Enforces a standardized React 19 SPA project structure

041 GitHub stars

05Integrates TanStack Query and Router for robust state and navigation

06Automates API type generation via Apidog MCP integration

Use Cases

01Refactoring existing React code to modern React 19 and TanStack standards

02Onboarding developers to a standardized architectural framework

03Scaffolding a new production-ready React 19 application with Vite

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add tianzecn/myclaudecode core-principles

For use in Claude.ai and ChatGPT

Download Skill