skills.rest
motormetrics
motormetricsOFFICIAL
Explore all skills by this author →
Website𝕏@motormetricsGitHub

component-naming

Enforce PascalCase and domain+role naming for React components.

21|2|Updated Nov 5, 2023
Search Tags:#frontend#react#conventions#code-quality#pascalcase#naming#domain-pattern
One-click install
npx skills add https://github.com/motormetrics/motormetrics --skill component-naming-motormetrics
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component-naming
Source: https://github.com/motormetrics/motormetrics/tree/main/.claude/skills/component-naming
Command: npx skills add https://github.com/motormetrics/motormetrics --skill component-naming-motormetrics

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Inconsistent component names make code hard to read, navigate, and refactor. This skill standardizes naming to improve maintainability and collaboration.

Core Features & Use Cases

  • PascalCase for all React components to ensure uniform appearance.
  • Domain + Role Pattern to clarify component purpose and context (e.g., TrendChart, HeroPost).
  • Compound Components for related subparts using dot notation (e.g., HeroPost.Image, HeroPost.Title).
  • Avoid Problematic Suffixes by steering away from -Container, -Wrapper, or -Component.
  • File Naming: align file names to component names in kebab-case (TrendChart -> trend-chart.tsx).
  • Validation: check that naming decisions align with the domain and role semantics.

Quick Start

Run the naming guide during component creation or review to enforce PascalCase, domain+role naming, and proper subcomponent patterns.

Frequently Asked Questions about component-naming

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

FAQPage Schema
How do I enforce consistent React component naming conventions across my codebase?▼

Enforce React component naming by applying PascalCase for all components, using a domain plus role naming pattern, and aligning file names in kebab-case during creation and code reviews.

What is the domain plus role naming pattern for React components?▼

The domain plus role naming pattern clarifies component purpose and context by combining a domain term with a functional role, such as TrendChart or HeroPost, to improve code readability and maintainability.

How do I name compound React subcomponents without problematic suffixes?▼

Name compound React subcomponents using dot notation like HeroPost.Image and HeroPost.Title, steering away from problematic suffixes such as Container, Wrapper, or Component for clearer component structure.

When do I need to use kebab-case file naming for React components?▼

Use kebab-case file naming for React components whenever you create or refactor a component, aligning the file name directly to the PascalCase component name, such as mapping TrendChart to trend-chart.tsx.

What's the best way to avoid generic names when creating React components?▼

Avoid generic names by applying a domain-driven naming approach that validates component names against domain and role semantics, ensuring each name clearly reflects its specific context and functional purpose.

Can I use these React naming rules during code reviews and refactoring?▼

Yes, you can apply these React naming rules during component creation, code reviews, and refactoring to validate that naming decisions align with domain semantics and maintain codebase consistency.

Related Skills

Explore More Software Engineering Skills→
ncaqncaq
3

file-naming

The final result is a function of the initial conditions and the decisions made along the way.

Community
Intermediate
amo-tech-aiamo-tech-ai

React Frontend Development

Develop React frontend components with TypeScript, Tailwind CSS, and shadcn/ui.

Community
Intermediate
sgcarstrendssgcarstrends
21

component-naming

Enforce PascalCase domain+role naming for React components.

Official
Basic
knckknckknckknck

go-style-guide

Standardize Go code quality and style across projects.

Community
Intermediate