react

Enforce React TSX rules for linting, reviews, and onboarding.

Updated Feb 5, 2026

Search Tags:#typescript #react #coding-standards #lint #component-patterns #tsx

Ready to run

npx skills add https://github.com/Xensen008/Xchat --skill react-xensen008

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react
Source: https://github.com/Xensen008/Xchat/tree/main/.claude/skills/react
Command: npx skills add https://github.com/Xensen008/Xchat --skill react-xensen008

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Enforce consistent React guidelines for TSX files across the project, preventing drift and ensuring uniform patterns.

Core Features & Use Cases

Enforces TSX component naming and folder structure.
Validates hook usage patterns and import ordering.
Useful for code reviews and onboarding of new contributors.

Quick Start

Apply the React rules to all TSX files to enforce project conventions.

Frequently Asked Questions about react

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

FAQPage Schema

How do I enforce consistent React TSX coding standards across my project?▼

You can enforce consistent React TSX coding standards by applying a ruleset file that validates component naming, folder structure, hook usage, and import ordering to prevent pattern drift across your codebase.

What React component patterns and lint rules should I apply for TypeScript projects?▼

For TypeScript projects, React lint rules should validate TSX component naming conventions, folder structure organization, hook usage patterns, and import ordering to maintain uniform and safe code.

Can I use this React ruleset to automate code reviews for new contributors?▼

Yes, you can use this React ruleset to automate code reviews and streamline onboarding for new contributors by validating their TSX code against established project conventions and safety guidelines.

Do I need a specific ruleset file to lint React TSX files?▼

Yes, you need a ruleset file located at .claude/rules/react.mdc in your project directory to validate TSX file conformance and ensure React code safety standards are met.

What's the best way to standardize hook usage and import ordering in React?▼

The best way to standardize hook usage and import ordering in React is to apply a centralized TSX ruleset that automatically validates these patterns across all files during linting and code reviews.

Why does my React TSX code fail to follow consistent folder structure and naming conventions?▼

Your React TSX code may lack consistent folder structure and naming because no automated ruleset is enforcing conventions, allowing pattern drift to occur across different contributors and files.