skills.rest
marcusbey
marcusbeyCOMMUNITY
Explore all skills by this author →
Website𝕏@romainbeyGitHub

component-patterns

Standardizes React component creation workflows with naming conventions, layout, and server/client usage rules.

Updated Apr 24, 2026
Search Tags:#frontend#react#naming#ui-development#server-client#component-patterns
One-click install
npx skills add https://github.com/marcusbey/claude-context-manager --skill component-patterns-marcusbey
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component-patterns
Source: https://github.com/marcusbey/claude-context-manager/tree/main/.claude/skills/component-patterns
Command: npx skills add https://github.com/marcusbey/claude-context-manager --skill component-patterns-marcusbey

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Inconsistent React component conventions across projects cause boilerplate drift and maintenance overhead, leading to slower development and harder onboarding.

Core Features & Use Cases

  • Enforces a standard file layout for components (components/Folder with index.tsx, colocated tests, and optional stories)
  • Standardizes naming conventions (PascalCase for folders and default exports, with clear rules for named exports)
  • Guides Server Components by default and promotes placing "use client" only where state or browser APIs are needed
  • Encourages colocated tests and styles to improve maintainability and collaboration

Quick Start

Create a new UI component under components/ using a PascalCase folder name and colocate tests and styles.

Frequently Asked Questions about component-patterns

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

FAQPage Schema
How do I enforce consistent naming and file layout conventions for React components?▼

To enforce consistent React component conventions, standardize your creation workflow to use PascalCase folders with an index.tsx file, colocated tests, and default exports for the primary component. This prevents boilerplate drift and maintenance overhead across projects.

When should I add the 'use client' directive in a React server component architecture?▼

Add the 'use client' directive in React only when a component requires state or browser APIs. Default to server components to keep client-side JavaScript minimal and colocate the directive strictly where needed.

How do I structure colocated tests and styles within a React component folder?▼

Structure colocated tests and styles by placing them directly inside the component's PascalCase folder alongside index.tsx. This improves maintainability and collaboration by keeping related UI logic bundled together.

Does React component pattern standardization work for refactoring existing projects?▼

Yes, React component pattern standardization applies when refactoring existing projects to follow conventions. It enforces explicit props types and default exports to align older code with standard server-client usage.

What is the best way to define explicit props types for default exported React components?▼

Define explicit props types for default exported React components by declaring an interface within the component folder. This ensures type safety and clear API boundaries for UI development across projects.

Related Skills

Explore More Software Engineering Skills→
10knamesmore10knamesmore

frontend-react

Enforce React component patterns and styling conventions for Vite and TypeScript projects.

Community
Intermediate
oakossoakoss
1

storybook

Create Storybook stories and interaction tests for React components.

Official
Intermediate
benshapyrobenshapyro
9

code-formatter

Format TypeScript and Python code with Prettier, ESLint, Black, and isort.

Community
Intermediate
makerjackiemakerjackie
1

next-best-practices

Enforce Next.js App Router best practices for performance and reliability.

Community
Intermediate