component-naming

name	component-naming
description	Enforces consistent React component naming conventions across the portfolio codebase. Use when creating, reviewing, or refactoring components.

Component Naming Conventions

Use this guide when creating or modifying React components to ensure consistent naming across the portfolio.

---

Naming Rules

1. PascalCase for Components

All React components use PascalCase:

// ✅ Good
export const FeaturedPost = () => {};
export const TagFilter = () => {};

// ❌ Bad
export const featuredPost = () => {};
export const featured_post = () => {};

2. Domain + Role Pattern

Combine domain context with component role for clarity:

// ✅ Good - Clear domain and role
export const FeaturedPost = () => {}; // Featured (domain) + Post (role)
export const TagFilter = () => {}; 
   = () => {}; 
   = () => {}; 
   = () => {}; 


   = () => {}; 
   = () => {}; 
   = () => {};