react-component-convention

Name: react-component-convention
Availability: InStock
Author: ncaq

Standardize React component file structure with fixed import, type, and export ordering.

3|1|Updated Mar 29, 2026

Search Tags:#typescript #frontend #react #component #conventions #code-structure

Ready to run

npx skills add https://github.com/ncaq/konoka --skill react-component-convention

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-component-convention
Source: https://github.com/ncaq/konoka/tree/main/plugins/web-tasuke/skills/react-component-convention
Command: npx skills add https://github.com/ncaq/konoka --skill react-component-convention

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill defines and enforces a standard for React component structure, ensuring consistency across a codebase by outlining the expected ordering, one-component-per-file rule, and guidelines for splitting large components.

Core Features & Use Cases

Enforces a predictable file layout: import grouping, props/types, and component definition to reduce cognitive load when reading files.
Promotes maintainability: prevents bloated components by advocating one-component-per-file and clean separation of concerns.
Use Case: When reviewing a new React component, apply these conventions to quickly assess structure and readability.

Quick Start

Follow the prescribed file order and ensure one component per file when creating or reviewing React components.

Frequently Asked Questions about react-component-convention

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

FAQPage Schema

How do I structure React components for better readability and maintainability?▼

Structure React components by enforcing a predictable file layout: group imports first, define props and types next, and export the functional component last. This fixed in-file ordering reduces cognitive load when reading component files.

What is the one-component-per-file rule in React projects?▼

The one-component-per-file rule mandates that each React file exports only a single functional component. This convention prevents bloated files, promotes clean separation of concerns, and makes component decomposition easier during code reviews.

How should I order imports, types, and component definitions in a React file?▼

Order React file contents by placing imports at the top, followed by props and type definitions, and concluding with the functional component export. Explicit documentation for render props and small inline components should follow this structure.

Can I use these React component conventions for TypeScript frontend projects?▼

Yes, these React component conventions are designed for TypeScript frontend projects. They standardize component structure by defining explicit props and type definitions before the functional component export to ensure consistency.

What is the best way to review React component structure during code reviews?▼

The best way to review React component structure is to check for the prescribed file order, verify one component per file, and assess whether large components are decomposed. Apply these conventions to quickly evaluate readability and maintainability.

When should I decompose large React components into smaller ones?▼

You should decompose large React components when a single file contains multiple components or becomes difficult to read. Following the one-component-per-file convention prevents bloated components and maintains clean separation of concerns.