# Building Components

> React component building and composition best practices. Use when creating, reviewing, or refactoring React components. Covers component structure, props patterns, composition techniques, and reusability guidelines.

- Skill: `dvcrn/building-components` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dvcrn/building-components`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dvcrn/building-components/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: dvcrn (https://skillmd.com/u/dvcrn)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/dvcrn/building-components

---


# Building React Components

Best practices for building reusable, maintainable React components.

## When to Apply

Reference these guidelines when:
- Creating new React components
- Reviewing component structure and API design
- Refactoring components for better reusability
- Implementing component composition patterns
- Designing props interfaces

## Core Principles

### 1. Single Responsibility
Each component should do one thing well. Split large components into smaller, focused pieces.

### 2. Composition Over Inheritance
Prefer composing components together rather than complex inheritance hierarchies.

```jsx
// ✅ Good: Composition
function Page() {
  return (
    <Layout>
      <Header />
      <Main>
        <Article />
      </Main>
      <Footer />
    </Layout>
  );
}

// ❌ Avoid: Deep nesting
function Page() {
  return <LayoutWithHeaderAndFooter><MainContent /></LayoutWithHeaderAndFooter>;
}
```

### 3. Props Design
- Use TypeScript for props typing
- Keep props interfaces simple and focused
- Prefer many small props over few large objects
- Use children prop for content composition

### 4. Component Structure
```tsx
// ✅ Recommended structure
import { FC } from 'react';

interface Props {
  title: string;
  children?: React.ReactNode;
}

export const Card: FC<Props> = ({ title, children }) => {
  return (
    <div className="card">
      <h2>{title}</h2>
      {children}
    </div>
  );
};
```

### 5. State Management
- Keep state as close to where it's used as possible
- Lift state up only when necessary
- Consider custom hooks for reusable state logic

## Common Patterns

### Compound Components
For flexible APIs like Select/Option, Tabs/TabList/Tab/TabPanel.

### Render Props
For sharing behavior while keeping rendering control.

### Hooks
For sharing stateful logic across components.

## Related Skills
- vercel-react-best-practices
- next-best-practices
- vercel-composition-patterns