Agent skill

component-naming

Enforce consistent React component naming conventions using domain + role patterns. Use when creating, reviewing, or refactoring components.

View SKILL.md on GitHub Repository
Stars 20
Forks 1

Install this agent skill to your Project

npx add-skill https://github.com/sgcarstrends/sgcarstrends/tree/main/.claude/skills/component-naming

SKILL.md

Component Naming Conventions Skill

This skill helps you enforce consistent React component naming conventions across the codebase.

When to Use This Skill

  • Creating new React components
  • Reviewing component names in PRs
  • Refactoring existing components
  • Ensuring codebase consistency

Naming Rules

1. PascalCase

All React components use PascalCase:

typescript
// ✅ Good
export const TrendChart = () => {};
export const HeroPost = () => {};

// ❌ Bad
export const trendChart = () => {};
export const trend_chart = () => {};

2. Domain + Role Pattern

Combine domain context with component role for clarity:

typescript
// ✅ Good - Clear domain and role
export const TrendChart = () => {};       // Trend (domain) + Chart (role)
export const HeroPost = () => {};         // Hero (domain) + Post (role)
export const MetricCard = () => {};       // Metric (domain) + Card (role)
export const LatestCoePremium = () => {}; // LatestCoe (domain) + Premium (role)

// ❌ Bad - Too generic or unclear
export const Chart = () => {};            // No domain context
export const Data = () => {};             // Meaningless
export const Item = () => {};             // No specificity

3. Compound Components for Subparts

Use dot notation for related subcomponents:

typescript
// ✅ Good - Compound component pattern
export const HeroPost = () => {};
HeroPost.Image = () => {};
HeroPost.Title = () => {};
HeroPost.Meta = () => {};

// Usage
<HeroPost>
  <HeroPost.Image src={...} />
  <HeroPost.Title>...</HeroPost.Title>
  <HeroPost.Meta date={...} />
</HeroPost>

// ❌ Bad - Flat naming for related components
export const HeroPostImage = () => {};
export const HeroPostTitle = () => {};
export const HeroPostMeta = () => {};

4. Avoid Problematic Suffixes

Never use these suffixes:

typescript
// ❌ Avoid these suffixes
export const MetricCardContainer = () => {};  // -Container
export const ChartWrapper = () => {};         // -Wrapper
export const DataComponent = () => {};        // -Component
export const ListElement = () => {};          // -Element

// ✅ Use clear domain + role instead
export const MetricCard = () => {};
export const TrendChart = () => {};
export const RegistrationList = () => {};

5. Avoid Layout/Styling Descriptions

Names should describe purpose, not appearance:

typescript
// ❌ Bad - Describes layout/styling
export const LeftSidebar = () => {};
export const BigHeader = () => {};
export const RedButton = () => {};
export const TwoColumnLayout = () => {};

// ✅ Good - Describes purpose
export const NavigationSidebar = () => {};
export const PageHeader = () => {};
export const DangerButton = () => {};
export const ComparisonLayout = () => {};

File Naming Convention

Files use kebab-case matching the component name:

Component File Name
TrendChart trend-chart.tsx
HeroPost hero-post.tsx
MetricCard metric-card.tsx
LatestCoePremium latest-coe-premium.tsx

Validation Checklist

When reviewing component names:

  • Uses PascalCase
  • Has clear domain context (not just "Card", "List", "Item")
  • Has clear role (Chart, Card, List, Banner, etc.)
  • No -Container, -Wrapper, -Component suffixes
  • No layout/styling descriptions (Left, Big, Red, TwoColumn)
  • File name matches component in kebab-case
  • Related subcomponents use compound pattern

Examples from Codebase

Good patterns found:

  • TrendAreaChart - Trends domain + Area Chart role
  • MarketShareDonut - Market Share domain + Donut role
  • TopMakesChart - Top Makes domain + Chart role
  • PremiumBanner - Premium domain + Banner role
  • MetricCard - Metric domain + Card role
  • LatestCoePremium - Latest COE domain + Premium role

Anti-patterns to avoid:

  • Generic names: Chart, Card, List, Data
  • Layout names: LeftPanel, MainContent, TopSection
  • Suffix pollution: CardContainer, ListWrapper, ItemComponent

Related Files

  • apps/web/CLAUDE.md - Web app component conventions
  • apps/web/src/components/ - Web app components
  • apps/web/src/app/admin/components/ - Admin interface components

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

sgcarstrends/sgcarstrends

component-tester

Run Vitest tests for a specific component with coverage. Use when making changes to React components to ensure tests pass and coverage is maintained.

20 1
Explore
sgcarstrends/sgcarstrends

cache-components

Ensure 'use cache' is used strategically to minimize CPU usage and ISR writes. Use when creating/modifying queries to verify caching decisions align with data update patterns and cost optimization.

20 1
Explore
sgcarstrends/sgcarstrends

ui-design-system

Enforce modern dashboard UI patterns with pill-shaped design, professional colour scheme, and typography standards. Use when building or reviewing UI components for the web application.

20 1
Explore
sgcarstrends/sgcarstrends

typography-spacing-enforcer

Enforce Typography system and modern spacing conventions. Use when implementing new UI components to ensure design consistency with project standards.

20 1
Explore
sgcarstrends/sgcarstrends

conventional-commits

Format commit messages following project conventions with commitlint validation. Use when committing changes, writing PR descriptions, or preparing releases.

20 1
Explore
sgcarstrends/sgcarstrends

dependency-upgrade

Upgrade dependencies safely using pnpm catalog, checking for breaking changes, and testing upgrades. Use when updating packages, applying security patches, upgrading major versions, resolving dependency conflicts, or modernizing tech stack.

20 1
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results