react-rules

Enforce React component structure with one component per file and mirrored folders.

1|Updated Apr 29, 2026

Search Tags:#developer tools #best practices #React #TypeScript #component discipline

Ready to run

npx skills add https://github.com/g-bastianelli/nuthouse --skill react-rules

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-rules
Source: https://github.com/g-bastianelli/nuthouse/tree/main/subroutine/skills/react-rules
Command: npx skills add https://github.com/g-bastianelli/nuthouse --skill react-rules

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

Ensures React components and hooks are developed consistently, reducing code duplication and improving maintainability.

Core Features & Use Cases

One Component Per File: Encourages single responsibility by requiring one React component definition per file.
Folder Structure: Mirrors the JSX tree, aiding in organizing and navigating component hierarchies.
Props: Utilizes IDs-only props and primitives, fostering cleaner and more predictable component behavior.
Data Handling: Emphasizes local data fetching and caching, optimizing performance.
Styling and Layout: Establishes a clear hierarchy and separation of concerns for styling.
State Management: Outlines best practices for server state, URL state, and global session management.
Accessibility: Promotes accessibility standards through proper labeling and components usage.
Testing: Suggests an efficient approach to testing with consideration for the project's specific needs.

Quick Start

Use the 'react-rules' skill within a React component file to enforce discipline in your React component structure and coding style.

Frequently Asked Questions about react-rules

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

What are the best practices for structuring React components in a TypeScript application?▼

You should organize React folders by mirroring the JSX tree, keeping one component per file. This structural discipline improves navigation through component hierarchies and reduces code duplication in TypeScript applications.

How do I manage state and data fetching consistently across React components?▼

Manage state and data fetching consistently by emphasizing local data fetching and caching. Establish separate practices for server state, URL state, and global session management to optimize application performance.

Can I use these React development rules in non-TypeScript projects?▼

These React development rules are specifically applicable to TypeScript-based React applications. While the structural discipline concepts may translate, the rules are designed to enforce practices within a TypeScript environment.

What is the best way to pass props to React components for predictable behavior?▼

The best way to pass props for predictable behavior is by utilizing IDs-only props and primitives. This approach fosters cleaner components and reduces unpredictable side effects during React component development.

How should I approach testing and accessibility when applying React component discipline?▼

Approach testing by adopting an efficient strategy tailored to your project's specific needs. Handle accessibility by promoting standards through proper labeling and correct component usage within your React application.