Building Components

React component building and composition best practices. Use when creating, reviewing, or refactoring React components. Covers component structure, props pat...

Security Scan

This is an instruction-only React best-practices guide with no installs, no required credentials, and no commands — it appears to do what it says.

Purpose & Capability

The name/description (React component best practices) match the actual content: a prose guideline (SKILL.md) about component structure, props, composition, and state. Nothing requested or declared (no env vars, no binaries) is out of place.

Instruction Scope

The SKILL.md contains only guidance and example code snippets. It does not instruct the agent to run shell commands, access files, read environment variables, or transmit data to external endpoints.

Install Mechanism

There is no install spec and no code files. As an instruction-only skill, it writes nothing to disk and does not fetch external code.

Credentials

The skill declares no environment variables, credentials, or config paths — appropriate for a static best-practices guide.

Persistence & Privilege

always is false and the skill does not request persistent presence or modify agent/system settings. Default autonomous invocation is allowed but the skill's instructions do not perform privileged actions.

Assessment

This skill is an offline best-practices document and poses minimal technical risk: it won't install software or request credentials. The only non-technical concern is that the source is listed as "unknown" while the metadata author is 'vercel' — if provenance matters to you, verify the author or use an official Vercel/React style guide instead. Otherwise it's safe to use as a reference for component design and reviews.

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.

// ✅ 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

// ✅ 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