How does this skill improve React performance?

It enforces the use of specific selectors and the useShallow hook in Zustand stores, preventing components from re-rendering unnecessarily when unrelated state changes occur.

How does it help with automated testing?

It enforces a mandatory naming convention for data-testid attributes on all interactive elements, ensuring the UI is consistently accessible for E2E testing tools.

Does it support the latest version of React?

Yes, the skill is specifically designed for React 19, TypeScript, and modern libraries like Tailwind v4 and TanStack Query v5.

Why use this instead of manual data fetching?

It replaces manual useEffect fetching with TanStack Query patterns, providing built-in caching, automatic revalidation, and standardized loading/error states.

Where should I store my application state using these patterns?

The skill provides a clear decision tree: server data goes to TanStack Query, global UI state to Zustand, navigation state to URL params, and local state to useState.

React Frontend Architecture Patterns

Name: React Frontend Architecture Patterns
Author: fiatkongen

byfiatkongen

0•

디자인 도구

Enforces production-grade architectural patterns for React applications using Zustand, TanStack Query, and TypeScript.

This skill provides Claude with comprehensive guidance for architecting and implementing modern React frontends, focusing on efficient state management and robust data fetching. It ensures strict adherence to Zustand selector patterns to prevent unnecessary re-renders, leverages TanStack Query for server-state synchronization, and defines clear component hierarchies. By implementing standardized error boundaries and loading strategies, it helps developers build scalable, performant, and maintainable user interfaces while maintaining a clean, testable codebase using React 19 and Tailwind v4.

주요 기능

01Automates E2E testing readiness through mandatory data-testid naming conventions

02Enforces standardized error boundary strategies and component-level loading states

03Standardizes TanStack Query patterns for API data fetching and mutation invalidation

040 GitHub stars

05Implements strict Zustand selector rules and useShallow for optimized state management

06Defines clear state colocation rules for local, global, server, and URL states

사용 사례

01Architecting a new React project with a robust folder structure and state management strategy

02Migrating manual useEffect data fetching to optimized TanStack Query custom hooks

03Refactoring existing components to resolve performance issues caused by improper store usage

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add fiatkongen/saurun-marketplace react-frontend-patterns

For use in Claude.ai and ChatGPT

Download Skill