Is this suitable for Cloudflare Workers?

Yes, it specifically includes patterns for Hono integration, allowing you to use Hono for API routes and React Router for UI handling within a Cloudflare environment.

How does this skill handle routing?

It implements a convention-over-configuration approach using react-router-auto-routes, which generates route definitions automatically based on your file structure.

What is the benefit of the '+' prefix convention?

The '+' prefix allows you to colocate helper files, components, and tests within route folders without them being treated as routes, keeping related code together.

Does it support type-safety in loaders and actions?

Absolutely. The skill promotes type-safe patterns, including the use of ts-pattern for exhaustive and type-safe conditional logic within your application flow.

React Router v7 Mastery

Name: React Router v7 Mastery
Author: kazuph

bykazuph

•

API 开发

Provides specialized guidance and best practices for building type-safe, high-performance web applications using React Router v7 and Hono.

This skill empowers Claude to act as an expert in React Router v7 architecture, focusing on modern patterns like functional cohesion and code collocation. It offers implementation strategies for file-based routing using react-router-auto-routes and deep integration with Hono for full-stack development on Cloudflare Workers. It is particularly useful for developers who need to organize complex applications with role-based route separation, type-safe pattern matching, and efficient directory structures that minimize configuration overhead.

主要功能

01Role-based route separation for complex multi-user platforms

0215 GitHub stars

03Collocation patterns for managing helpers and components alongside routes

04File-based routing configuration via react-router-auto-routes

05Type-safe implementation patterns using ts-pattern

06Seamless Hono integration for Cloudflare Workers environments

使用场景

01Transitioning from manual route definitions to a scalable, file-based routing convention.

02Optimizing project structure for better maintainability through functional cohesion and collocation.

03Architecting a full-stack React application on Cloudflare Workers using Hono and React Router v7.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add kazuph/dotfiles react-router-v7-mastery

For use in Claude.ai and ChatGPT

Download Skill