What architectural pattern does this skill follow?

It enforces a strict 'Page -> Feature -> UI' dependency flow. Route modules only compose feature components, while all business logic is encapsulated within feature-specific directories.

How does the skill handle data fetching?

The skill utilizes TanStack Query for server state management, creating specialized hooks and query options for API interactions and cache management.

Does this skill support Next.js projects?

No, this skill is specifically designed for React Router 7 Framework Mode in SPA mode (ssr:false). For Next.js projects, you should use the nextjs-dev-orchestration skill.

How does it handle routing configuration?

It automatically configures routes in app/routes.ts using React Router 7 conventions, including layout nesting for authentication guards and error boundaries.

Can it manage URL-based states like filters?

Yes, the skill integrates with the nuqs library to manage URL parameters for states such as filters, sorting, and pagination, ensuring the UI stays in sync with the URL.

React Dev Orchestration

Name: React Dev Orchestration
Author: sellernote

bysellernote

•

デザインツール

Orchestrates end-to-end feature development for React Router 7 SPA projects by coordinating data layers and UI components.

This skill streamlines the creation of new features in React Router 7 Framework Mode (SPA) applications by automating the orchestration of both the data layer and UI layer. It follows a strict 'Page -> Feature -> UI' dependency architecture, ensuring clean code separation and scalability. It handles everything from requirements analysis and API integration with TanStack Query to building complex UI components and configuring routes in app/routes.ts, providing a standardized workflow for rapid frontend development.

主な機能

01Automated routing configuration within app/routes.ts

02Integrated URL state management using nuqs

031 GitHub stars

04Strict architectural enforcement of Page-Feature-UI dependency patterns

05End-to-end feature orchestration for React Router 7 SPA projects

06Data layer management using TanStack Query and Zustand stores

ユースケース

01Building a new CRUD dashboard page with complex filtering and pagination

02Implementing a multi-step form with specialized business logic and API mutations

03Developing a new domain feature that requires coordinated data fetching and UI components

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add sellernote/sellernote-vibecode-plugin react-dev-orchestration

For use in Claude.ai and ChatGPT

主な機能

01Automated routing configuration within app/routes.ts

02Integrated URL state management using nuqs

031 GitHub stars

04Strict architectural enforcement of Page-Feature-UI dependency patterns

05End-to-end feature orchestration for React Router 7 SPA projects

06Data layer management using TanStack Query and Zustand stores

ユースケース

01Building a new CRUD dashboard page with complex filtering and pagination

02Implementing a multi-step form with specialized business logic and API mutations

03Developing a new domain feature that requires coordinated data fetching and UI components

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add sellernote/sellernote-vibecode-plugin react-dev-orchestration

For use in Claude.ai and ChatGPT