vercel-composition-patterns
fcakyon/claude-codex-settingsFrontend & designCoding & code review
vercel-composition-patterns is a skill in fcakyon/claude-codex-settings, last changed 31 Mar 2026. It is instructions only: no scripts, no named hosts and no pre-approved tools.
React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.
At a glance
What it can touch
- Instructions only
It is instructions only: no scripts, no named hosts and no pre-approved tools.
How much a skill can do, not whether it is risky.
Pattern check
1 item to review
Name copied from another skill
R38 · High · SKILL.md:2Commit f44ddce · 29 Oct 2026
How the check worksPattern check:1 item to reviewSee it
Install
Each tab says whether it installs commit f44ddce, the one we checked, or the latest version.
OpenCode also looks in .agents/skills/ and ~/.agents/skills/, so use the Any agent steps.
Goose also looks in .agents/skills/ and ~/.agents/skills/, so use the Any agent steps.
Windsurf (Devin Desktop) also looks in .agents/skills/ and ~/.agents/skills/, so use the Any agent steps.
Zed also looks in .agents/skills/ and ~/.agents/skills/, so use the Any agent steps.
Roo Code also looks in .agents/skills/ and ~/.agents/skills/, so use the Any agent steps.
Factory Droid also looks in .agents/skills/ and ~/.agents/skills/, so use the Any agent steps.
Junie also looks in .agents/skills/ and ~/.agents/skills/, so use the Any agent steps.
Amp also looks in .agents/skills/ and ~/.agents/skills/, so use the Any agent steps.
No install command here reaches Kiro. Copy the skill's folder into .kiro/skills/ in your project, or ~/.kiro/skills/ for all your projects. fcakyon/claude-codex-settings/plugins/react-skills/skills/composition-patterns (opens in a new tab)
Antigravity also looks in .agents/skills/, so the Any agent steps reach it with This project. For All projects, see where Antigravity looks.
Cline also looks in .claude/skills/, so the Claude Code steps reach it with This project. For All projects, see where Cline looks.
Read this before installing: Name copied from another skill — SKILL.md:2
Claude Code
Pinned to commit f44ddce, the one we checked.
From your project's root folder:
tmp="$(mktemp -d)" &&git clone -q --depth 1 --filter=blob:none --no-checkout https://github.com/fcakyon/claude-codex-settings.git "$tmp" &&git -C "$tmp" fetch -q --depth 1 origin f44ddce6a3e4ad8f868da4f0ec363f3cb0b20dfc &&git -C "$tmp" sparse-checkout set -- plugins/react-skills/skills/composition-patterns &&git -C "$tmp" checkout -q f44ddce6a3e4ad8f868da4f0ec363f3cb0b20dfc &&mkdir -p .claude/skills &&mkdir .claude/skills/vercel-composition-patterns &&cp -R "$tmp"/plugins/react-skills/skills/composition-patterns/. .claude/skills/vercel-composition-patterns/ &&rm -rf "$tmp"If Claude Code was already running and this created the skills folder, run /reload-skills.
Claude apps
Pinned to commit f44ddce, the one we checked.
Skills in the Claude apps belong to your account rather than to a project.
Make vercel-composition-patterns.zip, with the skill folder at the top level:
tmp="$(mktemp -d)" &&git clone -q --depth 1 --filter=blob:none --no-checkout https://github.com/fcakyon/claude-codex-settings.git "$tmp" &&git -C "$tmp" fetch -q --depth 1 origin f44ddce6a3e4ad8f868da4f0ec363f3cb0b20dfc &&git -C "$tmp" sparse-checkout set -- plugins/react-skills/skills/composition-patterns &&git -C "$tmp" checkout -q f44ddce6a3e4ad8f868da4f0ec363f3cb0b20dfc &&out="$(mktemp -d)" &&cp -R "$tmp"/plugins/react-skills/skills/composition-patterns "$out"/vercel-composition-patterns &&(cd "$out" && zip -qr - vercel-composition-patterns) > vercel-composition-patterns.zip &&rm -rf "$tmp" "$out"In Claude, open Customize > Skills, select +, then + Create skill > Upload a skill, and choose vercel-composition-patterns.zip.
On Free, Pro and Max plans, turn on Code execution and file creation (Create and edit files in newer settings) under Settings > Capabilities.
Codex
Pinned to commit f44ddce, the one we checked.
From your project's root folder:
tmp="$(mktemp -d)" &&git clone -q --depth 1 --filter=blob:none --no-checkout https://github.com/fcakyon/claude-codex-settings.git "$tmp" &&git -C "$tmp" fetch -q --depth 1 origin f44ddce6a3e4ad8f868da4f0ec363f3cb0b20dfc &&git -C "$tmp" sparse-checkout set -- plugins/react-skills/skills/composition-patterns &&git -C "$tmp" checkout -q f44ddce6a3e4ad8f868da4f0ec363f3cb0b20dfc &&mkdir -p .agents/skills &&mkdir .agents/skills/vercel-composition-patterns &&cp -R "$tmp"/plugins/react-skills/skills/composition-patterns/. .agents/skills/vercel-composition-patterns/ &&rm -rf "$tmp"Codex picks up new skills on its own; restart it if this one does not appear.
Cursor
Pinned to commit f44ddce, the one we checked.
From your project's root folder:
tmp="$(mktemp -d)" &&git clone -q --depth 1 --filter=blob:none --no-checkout https://github.com/fcakyon/claude-codex-settings.git "$tmp" &&git -C "$tmp" fetch -q --depth 1 origin f44ddce6a3e4ad8f868da4f0ec363f3cb0b20dfc &&git -C "$tmp" sparse-checkout set -- plugins/react-skills/skills/composition-patterns &&git -C "$tmp" checkout -q f44ddce6a3e4ad8f868da4f0ec363f3cb0b20dfc &&mkdir -p .cursor/skills &&mkdir .cursor/skills/vercel-composition-patterns &&cp -R "$tmp"/plugins/react-skills/skills/composition-patterns/. .cursor/skills/vercel-composition-patterns/ &&rm -rf "$tmp"Copilot & VS Code
Pinned to commit f44ddce, the one we checked.
From your project's root folder:
tmp="$(mktemp -d)" &&git clone -q --depth 1 --filter=blob:none --no-checkout https://github.com/fcakyon/claude-codex-settings.git "$tmp" &&git -C "$tmp" fetch -q --depth 1 origin f44ddce6a3e4ad8f868da4f0ec363f3cb0b20dfc &&git -C "$tmp" sparse-checkout set -- plugins/react-skills/skills/composition-patterns &&git -C "$tmp" checkout -q f44ddce6a3e4ad8f868da4f0ec363f3cb0b20dfc &&mkdir -p .github/skills &&mkdir .github/skills/vercel-composition-patterns &&cp -R "$tmp"/plugins/react-skills/skills/composition-patterns/. .github/skills/vercel-composition-patterns/ &&rm -rf "$tmp"In a running Copilot CLI session, run /skills reload.
Or install it with gh skill, which also installs the commit we checked. Needs GitHub CLI 2.90 or later.
gh skill install fcakyon/claude-codex-settings plugins/react-skills/skills/composition-patterns/SKILL.md@f44ddce6a3e4ad8f868da4f0ec363f3cb0b20dfc --agent github-copilot --scope projectGemini CLI
Pinned to commit f44ddce, the one we checked.
From your project's root folder:
tmp="$(mktemp -d)" &&git clone -q --depth 1 --filter=blob:none --no-checkout https://github.com/fcakyon/claude-codex-settings.git "$tmp" &&git -C "$tmp" fetch -q --depth 1 origin f44ddce6a3e4ad8f868da4f0ec363f3cb0b20dfc &&git -C "$tmp" sparse-checkout set -- plugins/react-skills/skills/composition-patterns &&git -C "$tmp" checkout -q f44ddce6a3e4ad8f868da4f0ec363f3cb0b20dfc &&mkdir -p .gemini/skills &&mkdir .gemini/skills/vercel-composition-patterns &&cp -R "$tmp"/plugins/react-skills/skills/composition-patterns/. .gemini/skills/vercel-composition-patterns/ &&rm -rf "$tmp"In a running session, run /skills reload.
Or use Gemini CLI’s own installer. Installs the latest version, not the one we checked.
gemini skills install https://github.com/fcakyon/claude-codex-settings.git --path plugins/react-skills/skills/composition-patterns --scope workspaceAny agent
Pinned to commit f44ddce, the one we checked.
OpenCode, Goose, Windsurf (Devin Desktop), Zed, Roo Code, Factory Droid, Junie, Amp and Antigravity read .agents/skills in a project.
From your project's root folder:
tmp="$(mktemp -d)" &&git clone -q --depth 1 --filter=blob:none --no-checkout https://github.com/fcakyon/claude-codex-settings.git "$tmp" &&git -C "$tmp" fetch -q --depth 1 origin f44ddce6a3e4ad8f868da4f0ec363f3cb0b20dfc &&git -C "$tmp" sparse-checkout set -- plugins/react-skills/skills/composition-patterns &&git -C "$tmp" checkout -q f44ddce6a3e4ad8f868da4f0ec363f3cb0b20dfc &&mkdir -p .agents/skills &&mkdir .agents/skills/vercel-composition-patterns &&cp -R "$tmp"/plugins/react-skills/skills/composition-patterns/. .agents/skills/vercel-composition-patterns/ &&rm -rf "$tmp"Or use the skills CLI from skills.sh. Installs the latest version, not the one we checked. The skills CLI reports installs to skills.sh unless you set DISABLE_TELEMETRY=1.
npx skills@1.7.4 add fcakyon/claude-codex-settings --skill vercel-composition-patternsWhat it can touch
From the files and frontmatter at commit f44ddce. This is how much a skill can do, not whether it is risky.
Instructions only
It is instructions only: no scripts, no named hosts and no pre-approved tools.
Pattern check
Pattern check: 1 item to review · commit f44ddce · 29 Oct 2026
We checked every text file in this skill, at commit f44ddce on 29 Oct 2026, against 45 published patterns such as download-and-run commands, hidden text and credential access. We don't run the skill, we don't read the web pages it points to, and we can't judge everything its instructions might lead an agent to do. In published tests, pattern checks like this one missed most malicious skills. Read the skill before you install it — especially anything it asks you to download or run.
Format check
Each agent reads SKILL.md a little differently. We check the file against each one's published rules; we don't run the skill in any agent.
Agent Skills specFails
The open format from agentskills.io, held to what the strictest agents enforce, so one folder loads everywhere.
- Error
The name "vercel-composition-patterns" doesn't match its folder "composition-patterns". The spec requires them to match. N4
Fix: Set name: composition-patterns, or rename the folder to vercel-composition-patterns.
- Note
Reference files that SKILL.md doesn't link: rules/_sections.md, rules/_template.md, rules/architecture-compound-components.md, rules/patterns-children-over-render-props.md, rules/patterns-explicit-variants.md and 3 more. Anthropic suggests linking every reference file directly from SKILL.md. B4
Fix: Link each one from SKILL.md and say when to read it.
- Note
Reference files over 100 lines with no table of contents at the top: rules/architecture-avoid-boolean-props.md (101 lines), rules/architecture-compound-components.md (113 lines), rules/patterns-explicit-variants.md (101 lines), rules/state-context-interface.md (192 lines), rules/state-decouple-implementation.md (114 lines) and 1 more. B5
Fix: Add a short list of the sections at the top of each.
- Error
Claude CodePasses
Claude Code reads its own extra fields, ignores unknown ones, and still loads a skill whose frontmatter is broken, without its fields.
- Note
The name "vercel-composition-patterns" doesn't match its folder "composition-patterns". Claude Code shows the skill as /vercel-composition-patterns, and the folder name also invokes it. N4
Fix: Set name: composition-patterns, or rename the folder to vercel-composition-patterns.
- Note
Reference files that SKILL.md doesn't link: rules/_sections.md, rules/_template.md, rules/architecture-compound-components.md, rules/patterns-children-over-render-props.md, rules/patterns-explicit-variants.md and 3 more. Anthropic suggests linking every reference file directly from SKILL.md. B4
Fix: Link each one from SKILL.md and say when to read it.
- Note
Reference files over 100 lines with no table of contents at the top: rules/architecture-avoid-boolean-props.md (101 lines), rules/architecture-compound-components.md (113 lines), rules/patterns-explicit-variants.md (101 lines), rules/state-context-interface.md (192 lines), rules/state-decouple-implementation.md (114 lines) and 1 more. B5
Fix: Add a short list of the sections at the top of each.
- Note
Claude apps & API uploadFails
Uploading to claude.ai or the Claude API, or packaging with Anthropic's script, accepts only the six spec fields and stops on anything else.
- Error
The name "vercel-composition-patterns" doesn't match its folder "composition-patterns". claude.ai refuses an upload whose folder name doesn't match the skill name. N4
Fix: Set name: composition-patterns, or rename the folder to vercel-composition-patterns.
- Note
The description is 310 characters. The claude.ai Help Center says 200 at most, though Anthropic's API docs and validator allow 1,024. D4
Fix: If the claude.ai upload refuses it, trim the description to 200 characters.
- Note
Reference files that SKILL.md doesn't link: rules/_sections.md, rules/_template.md, rules/architecture-compound-components.md, rules/patterns-children-over-render-props.md, rules/patterns-explicit-variants.md and 3 more. Anthropic suggests linking every reference file directly from SKILL.md. B4
Fix: Link each one from SKILL.md and say when to read it.
- Note
Reference files over 100 lines with no table of contents at the top: rules/architecture-avoid-boolean-props.md (101 lines), rules/architecture-compound-components.md (113 lines), rules/patterns-explicit-variants.md (101 lines), rules/state-context-interface.md (192 lines), rules/state-decouple-implementation.md (114 lines) and 1 more. B5
Fix: Add a short list of the sections at the top of each.
- Error
OpenAI (Codex & API)Passes with warnings
Codex finds SKILL.md by its exact name and needs a description; OpenAI's Skills API checks the frontmatter against the spec and caps uploads.
- Warning
The name "vercel-composition-patterns" doesn't match its folder "composition-patterns". OpenAI's own upload example uses a differently named folder, but the spec it follows says they must match. N4
Fix: Set name: composition-patterns, or rename the folder to vercel-composition-patterns.
- Warning
VS Code & CopilotPasses with warnings
VS Code reads skills one folder below .github/skills, .claude/skills or .agents/skills and falls back to the folder name when the name is missing or differs; GitHub's Copilot docs require the exact name SKILL.md.
- Warning
The name "vercel-composition-patterns" doesn't match its folder "composition-patterns". VS Code uses the folder name, composition-patterns, instead. N4
Fix: Set name: composition-patterns, or rename the folder to vercel-composition-patterns.
- Warning
SKILL.md
Files
11 files
Copies
These share its SKILL.md or its name and description but not all its files, so we list them separately.
More from fcakyon/claude-codex-settings
Other Frontend & design skills
Same category, most repo stars first.