Is it compatible with React 19?

Yes, it fully supports React 19 features including the React Compiler, passing refs as props without forwardRef, and using the use() hook for resource handling.

How does it handle data fetching?

It follows a pattern of using TanStack Query as the single source of truth for runtime data fetching, utilizing query-options and custom hooks for better reusability.

What is the recommended testing strategy?

The skill follows a test pyramid approach: Vitest for logic units, React Testing Library for component integration, and Playwright for critical E2E user flows.

Does this skill support Next.js?

No, this skill is specifically optimized for React Router 7 Framework Mode (ssr:false). For Next.js projects, it is recommended to use the nextjs-ui-dev skill instead.

What styling engine is used?

It utilizes Tailwind CSS v4 along with class-variance-authority (cva) and tailwind-merge (cn) for managing component variants and utility class priority.

React Router 7 UI Developer

Name: React Router 7 UI Developer
Author: sellernote

bysellernote

•

デザインツール

Develops production-ready React SPAs using React Router 7, Tailwind CSS v4, and modern React 19 patterns following strict architectural conventions.

This skill streamlines the development of high-quality React user interfaces within the React Router 7 Framework Mode ecosystem. It enforces a feature-based co-location architecture and a strict component classification system (UI, Feature, Layout, Page) to ensure maintainability and scalability. By integrating Tailwind CSS v4, TanStack Query for data fetching, and React Hook Form for state management, it provides a comprehensive guide for building responsive, performant, and type-safe frontend applications while adhering to the latest React 19 standards and SSR-safety rules.

主な機能

011 GitHub stars

02Manages complex forms using React Hook Form and Zod validation.

03Provides standardized testing setups using Vitest, React Testing Library, and Playwright.

04Implements styling using Tailwind CSS v4 with cva() and cn() utilities.

05Optimizes data fetching with TanStack Query and custom endpoint hooks.

06Enforces feature-based co-location architecture for scalable React projects.

ユースケース

01Building a new feature module with domain-specific components and API hooks.

02Creating reusable UI components with complex styling variants using CVA.

03Implementing multi-step forms with client-side Zod validation and server-side error mapping.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

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

For use in Claude.ai and ChatGPT

主な機能

011 GitHub stars

02Manages complex forms using React Hook Form and Zod validation.

03Provides standardized testing setups using Vitest, React Testing Library, and Playwright.

04Implements styling using Tailwind CSS v4 with cva() and cn() utilities.

05Optimizes data fetching with TanStack Query and custom endpoint hooks.

06Enforces feature-based co-location architecture for scalable React projects.

ユースケース

01Building a new feature module with domain-specific components and API hooks.

02Creating reusable UI components with complex styling variants using CVA.

03Implementing multi-step forms with client-side Zod validation and server-side error mapping.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

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

For use in Claude.ai and ChatGPT