playbooks

home / skills / hoangnguyen0403 / agent-skills-standard / component-patterns

component-patterns skill

/skills/react/component-patterns

This skill enforces modern React component patterns, guiding hook usage, composition, typing, and exports to build scalable, maintainable UI.

npx playbooks add skill hoangnguyen0403/agent-skills-standard --skill component-patterns

Review the files below or copy the command above to add this skill to your agents.

Files (3)
SKILL.md
1.6 KB
---
name: React Component Patterns
description: Modern React component architecture and composition patterns.
metadata:
  labels: [react, components, composition, patterns]
  triggers:
    files: ['**/*.jsx', '**/*.tsx']
    keywords: [component, props, children, composition, hoc, render-props]
---

# React Component Patterns

## **Priority: P0 (CRITICAL)**

Standards for building scalable, maintainable React components.

## Implementation Guidelines

- **Function Components**: Only hooks. No classes.
- **Composition**: Use `children` prop. Avoid inheritance.
- **Props**: Explicit TS interfaces. Destructure in params.
- **Boolean Props**: Shorthand `<Cmp isVisible />` vs `isVisible={true}`.
- **Imports**: Group: `Built-in` -> `External` -> `Internal` -> `Styles`.
- **Error Boundaries**: Wrap app/features with `react-error-boundary`.
- **Size**: Small (< 250 lines). One component per file.
- **Naming**: `PascalCase` components. `use*` hooks.
- **Exports**: Named exports only.
- **Conditionals**: Ternary (`Cond ? <A/> : <B/>`) over `&&` for rendering consistency.
- **Hoisting**: Extract static JSX/Objects outside component to prevent recreation.

## Anti-Patterns

- **No Classes**: Use hooks.
- **No Prop Drilling**: Use Context/Zustand.
- **No Nested Definitions**: Define components at top level.
- **No Index Keys**: Use stable IDs.
- **No Inline Handlers**: Define before return.

## Reference & Examples

See [references/patterns.md](references/patterns.md) for Composition, Compound Components, and Render Props examples.

## Related Topics

hooks | state-management | performance

Overview

This skill codifies modern React component architecture and composition patterns to build scalable, maintainable TypeScript React apps. It captures conventions for components, hooks, imports, error handling, and common anti-patterns. Use it to standardize component shape, improve performance, and reduce bugs across a codebase.

How this skill works

The skill inspects component structure and recommends or enforces patterns such as functional components with hooks, explicit TypeScript prop interfaces, and single-component-per-file sizing. It highlights composition approaches (children, compound components, render props), import ordering, error boundary placement, and anti-patterns like prop drilling or inline handlers. It also suggests hoisting static values and preferring named exports and PascalCase naming.

When to use it

  • When establishing or auditing React + TypeScript codebase standards for a team.
  • When converting class components to modern functional hooks-based components.
  • When reviewing pull requests for component size, naming, and export consistency.
  • When optimizing render performance and avoiding unnecessary re-creations.
  • When introducing state management to avoid prop drilling (Context or Zustand).

Best practices

  • Prefer function components with hooks; avoid class components entirely.
  • Declare explicit TypeScript interfaces for props and destructure in parameters.
  • Keep components small (<250 lines) and export them as named exports only.
  • Use composition via children, compound components, or render props instead of inheritance.
  • Group imports: built-in, external, internal, then styles; hoist static JSX/objects outside the component.
  • Wrap feature boundaries with an error boundary and avoid inline handlers or nested component definitions.

Example use cases

  • Defining a reusable form input as a small named component with a typed props interface.
  • Refactoring a large class-based widget into several composed functional components using hooks.
  • Creating a compound Tabs component using children and render props for flexible composition.
  • Replacing deep prop drilling with Context or a lightweight state store like Zustand.
  • Auditing a repo to enforce import ordering, boolean prop shorthand, and stable list keys.

FAQ

Should I ever use class components?

No—favor functional components with hooks for consistency, testability, and future maintenance.

How do I avoid prop drilling in complex trees?

Introduce Context or a state library (Zustand) and lift only necessary state, or use composition to surface handlers where needed.