React Component Convention (Grade A)Security-tested data-ai skill for Claude AI. Grade A. React component file conventions covering structure ordering, one-component-per-file, and splitting bloated components. Use when writing or review

— (0)

Reviewed by Daniel Nikulshyn·Updated July 2026

Overview

This skill provides React component file conventions covering structure ordering, one-component-per-file, and splitting bloated components. It is used when writing or reviewing React components. The conventions dictate that a React component file should have a specific structure order: design definitions, props definitions, functional component definitions, and imports. Each file should contain only one component, and small, reusable components should be placed in separate files. When a component becomes too large, it should be split by extracting logic into custom hooks, breaking down the UI into smaller components, or moving calculations to pure functions at the module scope.

Key features

Structure ordering for React component files
One-component-per-file convention
Guidelines for splitting bloated components

Pricing

Model: Free
Category: Skills
Rating: No reviews yet

Use cases

Writing a new React component

Use this skill to ensure the component file follows the recommended structure and conventions.

Reviewing an existing React component

Use this skill to verify that the component file adheres to the conventions and suggest improvements if necessary.

Pros & Cons

Pros

Enforces a consistent structure for React component files
Promotes separation of concerns and readability
Helps prevent overly complex components

Cons

May require additional overhead to create and manage multiple small component files
Can be restrictive for very simple components

Reviews

No reviews yet. Be the first!

Q&A

Are there any potential drawbacks to using this convention?

Yes, it may require additional overhead to create and manage multiple small component files, and can be restrictive for very simple components.

Asked by Victor Nguyen · Nov 19, 2025

What are the pros of using this convention?

The pros include enforcing a consistent structure for React component files, promoting separation of concerns and readability, and helping prevent overly complex components.

Asked by Björn Karlsson · Nov 5, 2025

What are the key features of this convention?

The key features include structure ordering for React component files, one-component-per-file convention, and guidelines for splitting bloated components.

Asked by Sanjay Gupta · Oct 9, 2025

What is the React Component Convention?

The React Component Convention is a security-tested data-ai skill that provides guidelines for React component file conventions, covering structure ordering, one-component-per-file, and splitting bloated components.

Asked by Eva Horáková · Oct 7, 2025

Ask a question

Skills alternatives

Manage Headers (Grade A)

Skills

Security-tested development skill for Claude AI. Grade A. Inspects and configures the security headers a Power Pages site sends to browsers — Content Security Policy, frame and clickjacking protection

— (0)

Free

Using Git Worktrees (Grade A)

Skills

Security-tested data-ai skill for Claude AI. Grade A. Use when starting feature work that needs isolation from current workspace or before executing implementation plans - creates isolated git worktre

— (0)

Free

Ga4 Bigquery Schema (Grade A)

Skills

Security-tested data-ai skill for Claude AI. Grade A. GA4 BigQuery Export Schema Reference — complete field reference, nested structures, query patterns, and performance tips

— (0)

Free

Meta Capi (Grade A)

Skills

Security-tested data-ai skill for Claude AI. Grade A. Meta Conversions API (CAPI) Setup Reference — architecture, event types, customer information hashing, deduplication, implementation examples, AEM

— (0)

Free

Callees (Grade A)

Skills

Security-tested development skill for Claude AI. Grade A. Lista o que uma funcao/metodo chama (call graph direto)

— (0)

Free

Test Module Name (Grade A)

Skills

Security-tested data-ai skill for Claude AI. Grade A. Name Haskell test modules after the module under test with a Spec suffix in the same namespace. Use when writing or reviewing Haskell test module

— (0)

Free

Board Of Directors (Grade A)

Skills

Security-tested data-ai skill for Claude AI. Grade A. Simulate a 5-member expert board deliberation for major decisions. Use when evaluating plans, architecture choices, feature designs, or any decisi

— (0)

Free

Advpl Mvc Avancado (Grade A)

Skills

Security-tested development skill for Claude AI. Grade A. MVC avançado via PE (Pontos de Entrada) — adicionar grids customizadas em telas MVC padrão (CNTA300/MATA070/MATA440/MATA460/FINA040 via *STRU)

— (0)

Free