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

Design Tools

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

About

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.

Key Features

Strict file length enforcement (<100 lines) to ensure modularity
Mandatory JSDoc documentation for all exported components and functions
Decoupled interface management via dedicated directory structures
0 GitHub stars
Feature-based modular architecture with separated core and feature modules
Research-first workflow to ensure React 19 and package compatibility

Use Cases

Architecting scalable feature modules in large-scale TypeScript applications
Refactoring monolithic React components into small, testable, single-responsibility units
Standardizing codebase documentation and naming conventions across a team

About

Key Features

Strict file length enforcement (<100 lines) to ensure modularity
Mandatory JSDoc documentation for all exported components and functions
Decoupled interface management via dedicated directory structures
0 GitHub stars
Feature-based modular architecture with separated core and feature modules
Research-first workflow to ensure React 19 and package compatibility

Use Cases

Architecting scalable feature modules in large-scale TypeScript applications
Refactoring monolithic React components into small, testable, single-responsibility units
Standardizing codebase documentation and naming conventions across a team