React Patterns Skill for Compound Tabs Components
Keep tab selection in a parent provider and verify that compound child components preserve accessible behavior and independent state.
中文Install in Claude Code
Use your React project and component test runner. The example renders two independent Tabs instances.
- Get the complete `cli-tool/components/skills/development/react-patterns` directory from the pinned GitHub commit.
- Copy it into the target project's `.claude/skills/`. Check `.claude/skills/react-patterns/SKILL.md`, start Claude Code at the project root, and call `/react-patterns`.
Example task
Build document tabs Overview and FAQ and account tabs Profile and Settings. Select FAQ and check that the document panel changes while the account panel stays on Profile.What to check
Each tab group shows its own selected panel. Test locators can use roles and accessible names.
Original SKILL.md on GitHub · Updated
Frequently asked question
Should all tab instances share one context state?
Reuse the context definition, but render a separate provider and selected value for every Tabs instance.