AgentSkillsCN

build-react-components

以类型化的props、清晰的组件构成，以及明确的交互/加载/空值/错误处理方式，构建或重构React组件。主要目标：确保组件契约与行为的正确性；在视觉决策方面，可与样式设计或设计方向技能相辅相成。

SKILL.md
--- frontmatter
name: build-react-components
description: Build or refactor React components with typed props, clear composition, and explicit interaction/loading/empty/error behavior. Primary intent: component contract and behavior correctness; pairs with styling or design-direction skills for visual decisions.

Build React Components

Purpose

Provide patterns for building reusable, testable React components with clear responsibilities and predictable behavior.

When to use

Use this skill when you are:

  • •Creating new components (pages, feature components, shared UI)
  • •Refactoring large components into smaller units
  • •Implementing modals/dialogs and forms
  • •Building lists with filtering, pagination, and empty states

Inputs

  • •Component responsibilities and expected interactions
  • •Data dependencies (what inputs come via props vs fetched)
  • •Styling approach (UI kit, CSS modules, styled components, etc.)

Outputs

  • •Typed component props and public API
  • •Component structure (container vs presentational as needed)
  • •Explicit handling for loading/empty/error states
  • •Example usage and acceptance criteria

Rules

  • •Components MUST have typed props (no implicit any).
  • •Components SHOULD be small and composable.
  • •Components MUST render explicit loading/empty/error states when dependent on async data.
  • •Components SHOULD avoid hidden side effects; prefer hooks.

Steps

  1. •Define the component contract (props, callbacks, UI states).
  2. •Decide whether it is:
    • •presentational (props in, UI out)
    • •container (fetching/orchestration + composition)
  3. •Implement rendering logic:
    • •default state
    • •loading/empty/error
  4. •Implement interactions:
    • •event handlers
    • •accessibility considerations
  5. •Add a minimal verification:
    • •renders
    • •primary interaction works
    • •error state renders

Verification

  • • Component renders with valid props
  • • Component handles loading state (when applicable)
  • • Component handles empty state (when applicable)
  • • Component handles error state (when applicable)
  • • Primary interaction triggers expected callback
  • • Component is accessible (keyboard navigation, focus visible)

Boundaries

  • •MUST NOT use implicit any for props
  • •MUST NOT hide side effects in render (use hooks)
  • •MUST NOT skip loading/empty/error states for async-dependent components
  • •SHOULD NOT create large components (decompose into smaller units)
  • •SHOULD NOT mix container and presentational concerns without clear boundaries
  • •SHOULD NOT ignore accessibility (aria labels, focus management)

Included assets

  • •Templates: ./templates/ includes component scaffolds (presentational, container, list, modal).
  • •Examples: ./examples/ includes a complete "profile-style" component example.