Why does this skill restrict the use of the useEffect hook?

To prevent common performance bottlenecks like cascading updates. It encourages better alternatives such as calculating derived values during render or handling logic within event handlers.

Does this skill support TypeScript for React components?

Yes, it strictly enforces the use of the FC (Function Component) type annotation and discourages standard function declarations to maintain consistency across TypeScript codebases.

Can I use this skill on an existing React project?

Absolutely. The skill includes a detection workflow that checks your package.json and existing codebase to follow your established patterns while suggesting modern improvements.

How does this skill handle data fetching in React?

The skill discourages raw fetch calls inside components. It detects your project's existing query client—such as TanStack Query, Apollo, or SWR—and enforces its usage for better caching and state management.

React Development & Best Practices

Name: React Development & Best Practices
Author: d-kimuson

byd-kimuson

0•

Design Tools

Enforces modern React patterns and performance optimizations while minimizing unnecessary Effects and redundant state.

This skill optimizes React development by enforcing strict adherence to modern best practices, specifically focusing on the elimination of redundant useEffect hooks in favor of derived state and event-driven logic. It streamlines component creation using standardized FC type annotations and ensures robust data fetching by automatically integrating with industry-standard query clients like TanStack Query, Apollo, and SWR, leading to cleaner, more maintainable, and higher-performance frontend codebases.

Key Features

010 GitHub stars

02Enforces standardized React.FC component definitions with TypeScript

03Integrates with Apollo, TanStack Query, and SWR for professional API handling

04Minimizes useEffect usage through derived state and event-handler patterns

05Prevents common anti-patterns like Effect-chaining and manual fetch calls

06Automates performance optimization using useMemo and key-based component resets

Use Cases

01Conducting automated code reviews to ensure compliance with modern React architectural standards

02Refactoring legacy React components to remove redundant Effects and improve performance

03Setting up new React projects with standardized, production-ready data-fetching patterns

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add d-kimuson/dotfiles react

For use in Claude.ai and ChatGPT

Download Skill