OpenClaw

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.

eaveluo0 来源安装数☆ 0 仓库 Stars

查看来源 ↗安装与使用 SKILL.md ↗

安装与使用

请根据来源仓库和你的 AI 工具说明安装此技能。先阅读技能文件和依赖要求，再添加到工作流。

SkillHub CLI

skillhub install eaveluo/building-components

打开来源仓库，查看说明和兼容环境后，按来源提供的命令或步骤安装。

将来源链接提供给你的 Agent，让它先读取说明、核对依赖，并向你说明将执行的安装步骤。

查看来源 ↗使用指南

技能说明

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

来源信息

Source: github
Repository: openclaw/skills
Path: skills/eaveluo/building-components
Version: —
Commit: 4c178a84384dcf45c622fc9f932bdb0102f4b46c
分类来源: rules
状态: active
可见性: public

这些信息来自收录时的来源分析，可能滞后；使用前请核对最新来源文件。

来源内容

SKILL.md

# 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

搜索