Can I use this skill for data fetching logic?

The skill discourages using useEffect for data fetching. It promotes using modern patterns such as TanStack Query or TanStack Router loaders, handled within dedicated service and hook layers.

Does this skill work with the latest React 19 features?

Yes, it is specifically designed for React 19. It includes a mandatory workflow step to research official documentation and package versions before writing code to ensure compatibility.

How does the skill handle interfaces and types?

Interfaces are strictly prohibited from being defined inside component files. They must be placed in a dedicated src/interfaces/ directory within their respective modules to ensure clean separation of concerns.

What are the specific file size limits enforced by this skill?

The skill enforces a maximum of 100 lines per file. Specifically, components are limited to 50 lines, hooks to 30 lines, and services to 40 lines to ensure strict adherence to the Single Responsibility Principle.

SOLID React Architect

Name: SOLID React Architect
Author: fusengine

byfusengine

0•

设计工具

Enforces strict SOLID principles and modular architecture patterns for high-quality React 19 development.

The SOLID React skill transforms Claude into a senior-level frontend architect focused on maintainability and code quality. It mandates a modular directory structure, strictly limits file lengths to under 100 lines to prevent monolithic components, and enforces the separation of hooks, interfaces, and services. By requiring proactive documentation research and mandatory JSDoc, this skill ensures that every line of code is intentional, well-documented, and aligned with the latest React 19 ecosystem standards including TanStack Router and modern data-fetching patterns.

主要功能

01Strict file length enforcement (<100 lines) to ensure modularity

02Mandatory JSDoc documentation for all exported components and functions

03Decoupled interface management via dedicated directory structures

040 GitHub stars

05Feature-based modular architecture with separated core and feature modules

06Research-first workflow to ensure React 19 and package compatibility

使用场景

01Architecting scalable feature modules in large-scale TypeScript applications

02Refactoring monolithic React components into small, testable, single-responsibility units

03Standardizing codebase documentation and naming conventions across a team

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add fusengine/agents solid-react

For use in Claude.ai and ChatGPT

Download Skill