skills.rest
ViewableGravy
ViewableGravyCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

react_comment-structure

Enforce standardized comment section ordering in React components and hooks.

Updated Jan 1, 2026
Search Tags:#typescript#react#code style#hooks#comments#component structure
One-click install
npx skills add https://github.com/ViewableGravy/better-ecs --skill react-comment-structure
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react_comment-structure
Source: https://github.com/ViewableGravy/better-ecs/tree/main/.github/skills/react_comment-structure
Command: npx skills add https://github.com/ViewableGravy/better-ecs --skill react-comment-structure

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill enforces a consistent and predictable comment structure within React code, improving readability and maintainability for both top-level sections and in-component elements.

Core Features & Use Cases

  • Enforces Top-Level Sections: Ensures TYPE DEFINITIONS, CONSTS, and COMPONENT START (or HOOK START) are correctly ordered and present when applicable.
  • Standardizes Inline Sections: Mandates a specific order for inline comments within components: STATE, HOOKS, QUERIES, EFFECTS, FUNCTIONS, RENDER HELPERS, RENDER.
  • Use Case: When developing a new React component, this skill will automatically prompt you to add the necessary comment headers in the correct order, ensuring that your code is organized from the start.

Quick Start

Apply the react_comment-structure skill to your React component file.

Frequently Asked Questions about react_comment-structure

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

FAQPage Schema
How do I standardize React component comments for better code readability?▼

To standardize React component comments, enforce a structured ordering of top-level sections like TYPE DEFINITIONS, CONSTS, and COMPONENT START, alongside predefined inline sections to ensure consistent code readability and maintainability.

What is the correct order for inline comments in a React hook?▼

The correct order for inline comments in a React hook is STATE, HOOKS, QUERIES, EFFECTS, FUNCTIONS, RENDER HELPERS, and RENDER. This predefined sequence organizes component logic predictably.

How do I structure a new React component file with TypeScript?▼

Structure a new React component file by applying predefined comment formats that mandate top-level sections and inline category mappings, ensuring your TypeScript code is organized from the start.

Does this React comment structure apply to both components and custom hooks?▼

Yes, this React comment structure applies to both component and hook authoring within the repository. It uses HOOK START instead of COMPONENT START to accommodate custom React hooks.

What are the limitations of enforcing a strict comment structure in React code?▼

The limitation of enforcing a strict comment structure in React code is that all components and hooks must conform to the predefined section ordering, which may require adjusting existing codebases that use different organizational patterns.

Related Skills

Explore More Software Engineering Skills→
futureteafuturetea

ESLint Setup

Configure ESLint for JavaScript and TypeScript projects with flat or legacy configs.

Community
Intermediate
Ven0m0Ven0m0
6

ruff

Lint and format Python code with automated fixes using ruff.

Community
Intermediate
patricio0312revpatricio0312rev
5

eslint-prettier-config

Configure ESLint and Prettier for TypeScript and React projects.

Community
Advanced
DevanBDevanB

Global Coding Style

Enforce global coding style across PHP and TypeScript/JavaScript projects.

Community
Basic