词映 AI导航
工具库Skills 技能
我的收藏
词映 AI导航

Claude Code component-patterns for React component boundaries

Choose component folders, typed props, and colocated tests. Mark a client boundary when browser state or events require it.

中文

Install in Claude Code

Open a React project following the conventions in Claude Code. Server and Client distinctions require a project using that React architecture.

  1. Review `.claude/skills/component-patterns/SKILL.md` and its requirements at the pinned GitHub commit.
  2. Create `.claude/skills/component-patterns/` in your project and save the reviewed file as `.claude/skills/component-patterns/SKILL.md`.
  3. Start Claude Code from that project's root, then select `/component-patterns` in the slash menu.

Example task

The ui-29 fixture adds SaveFilter. Its button sets the current filter in the browser, with {label: 'Save filter', disabled: false}.

What to check

Use a default export in SaveFilter/index.tsx with explicit props. The event needs the client, so record {component: 'SaveFilter', client: true} and place the test beside the implementation.

Original SKILL.md on GitHub · Updated

Frequently asked question

Does every component need use client?

Keep the server default where supported. Mark a client boundary when the component uses local state, events, or browser-only APIs.