React Composition Patterns

Before you start: read this whole install prompt, tell me in a few lines what this skill does and what installing it involves, and wait for my go-ahead before you do anything else. Prerequisites — None — no account, no key, no payment, and no script in its folder. It is a knowledge-only skill: at use time the agent reads its rule files while working on my own React code, nothing is installed into my project and nothing is contacted. One scope note: its React 19 rule applies only to React 19 and later; the rest applies to React component architecture generally. Install "React Composition Patterns" for me. It teaches the agent React composition patterns that scale: do not add boolean props to customise behaviour (use composition instead), structure complex components as compound components sharing context, decouple state management from the UI by lifting state into provider components behind a generic context interface, create explicit variant components instead of boolean modes, compose with children instead of render props, and, on React 19, drop forwardRef and use use() instead of useContext(). Its folder holds the main file, eight rule files with incorrect and correct examples, a compiled AGENTS.md with every rule expanded, a README and a metadata file. Repository: https://github.com/vercel-labs/agent-skills (the skill is the whole skills/composition-patterns/ folder at the pinned commit: SKILL.md plus 13 companion files, 14 files in total) Pinned version: install the code at commit 063bee94c3f4df8453406c830b0a7df0f2860278 exactly. Do not substitute a newer version. If this commit is unreachable, stop and tell me. 1. Clone https://github.com/vercel-labs/agent-skills into a temporary folder, check out commit 063bee94c3f4df8453406c830b0a7df0f2860278, and copy the skills/composition-patterns/ folder from that checkout. Then compare every file in the folder with the fingerprints recorded for this listing on 2026-10-22: [FINGERPRINTS] - AGENTS.md: SHA-256 89e3ddd58fcf99a53a50e25dfd21b8cde1be5f10b7df6bacd3dfa6796932f516 - README.md: SHA-256 85915a43a6f0b4efe525e3cf6398dd866166da2025837c4460468a24a940da94 - SKILL.md: SHA-256 e38e0eaa609316b10423a9a138ed95e35099accd3f735585295c8a8f165c28a3 - metadata.json: SHA-256 49262ed5cb4186f31ee980cf8d990be0170c51efed4908d0464a1cff9905bd05 - rules/_sections.md: SHA-256 a174213b87e6911e2b766995a2cbaf8d1534057076e82fb79fe3f0ecb38047df - rules/_template.md: SHA-256 587f7d16b0660eb61fee4a4d3d7df2b3077d6835de170602c7d6e60bee559131 - rules/architecture-avoid-boolean-props.md: SHA-256 007555ebb020f4d552582a2c4db194db71a1fd33094012e5187bcfa4f8c392d5 - rules/architecture-compound-components.md: SHA-256 f246af13dc269b521cf20eb8ad99a0cb645beac381c8c9b117262c34612c8457 - rules/patterns-children-over-render-props.md: SHA-256 7c45a0d21b3c4126a32cba916ee31adeae195386ad1dbbe6634aedb7457aa0ad - rules/patterns-explicit-variants.md: SHA-256 8c19e596e61807549d01ce8c6954c6358199f97a8511c0c02c625ec0efda8c0e - rules/react19-no-forwardref.md: SHA-256 881830adb7534c4b2d70db426556646ad9837f5478f744f35641f635ada22227 - rules/state-context-interface.md: SHA-256 09e73afbf9285fa416679cc864a287b9e8b821d0969272ab784295386d8c9bc3 - rules/state-decouple-implementation.md: SHA-256 76a8c1eb29a70d8996ab3f71260345af2f7bc89deab815a421d6c87c6591a9c3 - rules/state-lift-state.md: SHA-256 74c54038a6c554c748fe31cec673b80861b5d920b7553cf78cdf10d18b4b759b If a file does not match, it changed since the listing was prepared: do not install it yet, tell me what you found and let me decide. 2. Read SKILL.md in full, and tell me in plain words: what the skill does when used, what it connects to, whether it reads or sends any personal information or credentials, and anything that seems unusual. Stop on any red flag and tell me before going further. Confirm these points from the files: - The skill folder holds 14 files and no code at all: SKILL.md (frontmatter name vercel-composition-patterns), AGENTS.md (the compiled full guide), README.md, metadata.json, a sections overview and a rule template under rules/, and 8 rule files. There is no script to run, at install time or at use time. - Nothing is sent anywhere during installation itself; the only download at install time is the skill folder from GitHub at the pinned commit. - At use time the agent only reads these rule files while working on my own React project, locally in my conversation and my codebase. No service is contacted, no dependency is installed, and no personal information or credentials are read or sent. - Do not apply any pattern, do not refactor any component, and do not use the skill in any way during this install: using it is a separate step that only starts when I ask for React work later. 3. When I say "yes, install", install it as a skill: copy the whole composition-patterns folder into the agent's skills directory, in a folder named exactly "composition-patterns", keeping its 14 files in their original relative layout (SKILL.md at its root). 4. Verify with no network calls: frontmatter valid (name: vercel-composition-patterns), the 14 files in place with matching fingerprints. Do not run anything from the folder and do not use the skill to verify. 5. Report what was installed, where, and what I still need to do myself (for example: that it is knowledge-only, that its React 19 rule needs React 19 or later, and that using it is a separate step that only starts when I ask for React work). GitHub is optional: if I have a GitHub account or the gh CLI, you may use it; otherwise public access is fine. Never require it unless it's in the prerequisites above. Rules: don't touch anything outside the temp folder and the install target. If anything looks off, stop and ask me.