Vercel Composition Patterns for Claude Code: Simplify React Component APIs
This skill helps untangle components that accumulate behavior switches by making composition and shared state explicit. It includes version-sensitive React guidance.
中文Setup for Claude Code
Claude Code in a local React project. Keep the complete references of the pinned Vercel skill and tell the reviewer which React version the project uses.
- Copy skills/composition-patterns into .claude/skills/vercel-composition-patterns/.
- Keep the rules and supporting files from the same commit. Start Claude Code at the project root.
- Invoke /vercel-composition-patterns with the component and two real call sites.
Example task
Create a Dialog component with showHeader, showFooter, showClose and compact flags, then supply one confirmation use and one read-only use. Ask for a proposed composable API preserving both call sites.Expected result
The proposal shows how the two variants compose their pieces. It identifies shared state ownership and preserves the behaviors of both callers.
Upstream documentation
Original SKILL.md on GitHub · MIT license · Source reviewed
Frequently asked question
Can I use the guide with React 18?
Yes, for applicable composition ideas. Review React 19-specific rules separately so the suggested API fits the installed version.