react_always

Enforce React authoring rules for `.tsx` files and component modifications.

Updated Jan 1, 2026

Search Tags:#typescript #frontend #react #coding standards #jsx

Ready to run

npx skills add https://github.com/ViewableGravy/better-ecs --skill react-always

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react_always
Source: https://github.com/ViewableGravy/better-ecs/tree/main/.github/skills/react_always
Command: npx skills add https://github.com/ViewableGravy/better-ecs --skill react-always

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill enforces consistent and best-practice coding standards for all React files within the repository, ensuring maintainability and code quality.

Core Features & Use Cases

Conditional Rendering: Enforces the use of && syntax for cleaner conditional JSX.
Prop Management: Encourages explicit, minimal props and leveraging React context.
JSX Simplicity: Promotes avoiding duplicate JSX branches for more readable code.
Use Case: When modifying any component that displays data conditionally, this skill ensures the code adheres to the specified && syntax for rendering.

Quick Start

Apply the react_always skill to ensure all React code follows the defined standards.

Frequently Asked Questions about react_always

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

FAQPage Schema

How do I enforce consistent React coding standards in .tsx files?▼

To enforce React coding standards in .tsx files, apply rules that mandate conditional rendering with `&&` syntax, explicit minimal props, and simple JSX branches for maintainability. This ensures all component modifications adhere to consistent best practices.

What is the best way to handle conditional rendering in React JSX?▼

The best way to handle conditional rendering in React JSX is using the `&&` syntax. This approach ensures cleaner conditional JSX structures and enforces consistent code quality across all component modifications.

How do I manage React props to keep components maintainable?▼

To manage React props effectively, use explicit and minimal props while leveraging React context. This approach reduces prop drilling and ensures your React components remain maintainable and straightforward.

How do I simplify duplicate JSX branches in React components?▼

To simplify duplicate JSX branches in React components, refactor them into simple, non-duplicate structures. This promotes readable code and ensures your JSX remains straightforward and maintainable.

Do I need TypeScript to use mandatory React authoring rules?▼

TypeScript is supported but not strictly required, as the rules enforce standards specifically for `.tsx` files and React component modifications. The focus is on JSX simplicity, conditional rendering, and explicit props.

Why does my React code fail conditional rendering checks?▼

React code often fails conditional rendering checks because it does not use the mandatory `&&` syntax for conditional JSX. Enforcing this specific syntax ensures cleaner rendering and consistent code quality across the repository.