>_SkillsHub▋

> react-component-patterns

Modern React component architecture and composition patterns. Use when designing reusable React components, applying composition patterns, or structuring component hierarchies. (triggers: **/*.jsx, **/*.tsx, component, props, children, composition, hoc, render-props)

fetch
$curl "https://skillshub.wtf/HoangNguyen0403/agent-skills-standard/react-component-patterns?format=md"
SKILL.md•react-component-patterns

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 for Composition, Compound Components, and Render Props examples.

Related Topics

hooks | state-management | performance

> related_skills --same-repo

> typescript-tooling

Development tools, linting, and build config for TypeScript. Use when configuring ESLint, Prettier, Jest, Vitest, tsconfig, or any TS build tooling. (triggers: tsconfig.json, .eslintrc.*, jest.config.*, package.json, eslint, prettier, jest, vitest, build, compile, lint)

> typescript-security

Secure coding practices for TypeScript. Use when validating input, handling auth tokens, sanitizing data, or managing secrets and sensitive configuration. (triggers: **/*.ts, **/*.tsx, validate, sanitize, xss, injection, auth, password, secret, token)

> typescript-language

Modern TypeScript standards for type safety and maintainability. Use when working with types, interfaces, generics, enums, unions, or tsconfig settings. (triggers: **/*.ts, **/*.tsx, tsconfig.json, type, interface, generic, enum, union, intersection, readonly, const, namespace)

> typescript-best-practices

Idiomatic TypeScript patterns for clean, maintainable code. Use when writing or refactoring TypeScript classes, functions, modules, or async logic. (triggers: **/*.ts, **/*.tsx, class, function, module, import, export, async, promise)

┌ stats

installs/wk0
░░░░░░░░░░
github stars341
██████████
first seenMar 17, 2026
└────────────

┌ repo

HoangNguyen0403/agent-skills-standard
by HoangNguyen0403
└────────────

┌ tags

#crypto#design#react
└────────────