Agent Skills › Amery2010/open-builder › react-patterns

react-patterns

GitHub

提供 React 19 现代组件开发规范，涵盖结构、状态管理、副作用处理、性能优化及表单设计等最佳实践，指导编写可维护的前端代码。

public/skills/react-patterns/SKILL.md Amery2010/open-builder

Trigger Scenarios

编写或重构 React 组件选择 Hooks 使用策略设计组件 API 配置状态管理

Install

npx skills add Amery2010/open-builder --skill react-patterns -g -y

More Options

Non-standard path

npx skills add https://github.com/Amery2010/open-builder/tree/main/public/skills/react-patterns -g -y

Use without installing

npx skills use Amery2010/open-builder@react-patterns

指定 Agent (Claude Code)

npx skills add Amery2010/open-builder --skill react-patterns -a claude-code -g -y

安装 repo 全部 skill

npx skills add Amery2010/open-builder --all -g -y

预览 repo 内 skill

npx skills add Amery2010/open-builder --list

SKILL.md

Frontmatter

{
    "name": "react-patterns",
    "tags": [
        "react",
        "frontend",
        "best-practices"
    ],
    "author": "open-builder",
    "version": "1.0.1",
    "description": "Modern React 19 patterns for building maintainable components. Use when writing or refactoring React code (JSX\/TSX), choosing between hooks, designing component APIs, or wiring state management."
}

React patterns

Apply these patterns when writing React 19 components inside the generated project.

Component structure

Default to function components. Class components are not needed.
Co-locate component, types, and styles in one file unless the file exceeds ~200 lines.
Export the main component as a named export, not a default export. This keeps the import name consistent across the codebase.
Keep components single-purpose. If a component handles more than one concern, split it.

State

Reach for useState first. Only introduce a reducer when state transitions are non-trivial or involve more than three fields.
Lift state up only when more than one sibling reads it. Otherwise keep it local.
For state that needs to persist across reloads, write to localStorage in a useEffect, not during render.

Effects

Treat useEffect as a synchronization primitive between React state and an external system, not a way to "run code after render".
Every effect must have a complete dependency array. Do not suppress lint errors by passing [] for an effect that reads props or state.
Cleanup is mandatory for subscriptions, timers, and event listeners — return a cleanup function.

Performance

Do not preemptively wrap components in memo. Measure first.
Use useMemo only for expensive computations or for stable reference identity passed to memoized children. Do not use it for primitives.
Use useCallback only when the callback is a dependency of another hook or passed to a memoized child.

Props and types

Define a Props interface for every component with more than one prop. Inline {a, b}: {a: string; b: number} is fine for one or two simple props.
Prefer required props with sensible defaults inside the component over optional props with ?? everywhere downstream.
Avoid boolean prop explosion. If a component has more than three boolean props, refactor to a discriminated union or composition.

Composition over configuration

Children, slots, and render props beat boolean flags. A <Card><Card.Header /></Card> API ages better than <Card showHeader headerTitle="...">.
Compound components: expose subcomponents as static properties (Card.Header = ...) when they only make sense inside the parent.

Forms

Controlled inputs are the default. Use useState per field for simple forms; use one state object only when fields are tightly coupled.
Validate on blur for non-critical fields, on submit for the final check. Avoid validating on every keystroke.

When to ask

If the user request is ambiguous about which of these patterns to apply, prefer the simplest one that satisfies the spec and surface the trade-off in your reply.