How does this skill help with useEffect hooks?

It audits your code to identify if an effect is unnecessary, suggesting better alternatives like derived state, event handlers, or route-level data fetching to reduce bugs.

Does it support data fetching libraries other than React Router?

While it prioritizes React Router 7 patterns, the skill is adaptable to TanStack Query, SWR, and other client-side caching libraries.

Is this skill suitable for TypeScript projects?

Absolutely. It enforces strict TypeScript patterns, ensuring props have explicit interfaces and preventing the use of 'any' types in your components.

Can this skill help solve React performance issues?

Yes, it identifies common bottlenecks such as unstable list keys, unnecessary re-renders, and provides guidance on when to use memoization versus virtualization.

React Best Practices & Architecture

Name: React Best Practices & Architecture
Author: yonderlab

byyonderlab

0•

Design Tools

Applies modern React design patterns and architectural best practices to improve code quality, performance, and maintainability.

This skill empowers Claude to act as a senior React architect, guiding developers through complex decisions involving state management, data fetching, and component design. It prioritizes modern patterns like React Router 7 loaders and actions over legacy useEffect fetching, enforces strict TypeScript patterns, and promotes composable component architectures. Whether you are refactoring a legacy component, debugging re-render loops, or migrating to framework-level data fetching, this skill ensures your codebase follows industry-standard performance and accessibility guidelines.

Key Features

01Automated useEffect auditing to convert side effects into derived state or event handlers

02Component composition reviews following shadcn/ui and headless UI design patterns

03Implementation of React Router 7 data loader and action patterns for robust data fetching

040 GitHub stars

05State placement optimization using a hierarchy of Local, URL, Lifted, and Context state

06Performance profiling for re-renders, stable list keys, and strategic memoization

Use Cases

01Designing highly reusable UI components using composition patterns instead of 'prop-drilling' configurations

02Refactoring complex components with excessive useEffect hooks into clean, declarative logic

03Migrating client-side fetch-on-mount patterns to React Router loaders or modern cache libraries

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add yonderlab/kota.agent.skills react-best-practices

For use in Claude.ai and ChatGPT

Download Skill