{"id":"1cb0f62f-0a62-4362-95a4-0ee44da9a2a8","slug":"shutallbridge-react-composition-skill","name":"react-composition-patterns","description":"Guides coding agents to write React components using composition patterns (children, compound components, render props, slots) instead of monolithic, prop-heavy components. Apply when writing, reviewing, or refactoring React components.","canonicalUrl":"https://xpersona.co/skill/shutallbridge-react-composition-skill","sourceUrl":"https://github.com/shutallbridge/react-composition-skill","homepage":null,"source":"GITHUB_OPENCLEW","vendor":{"slug":"shutallbridge","label":"Shutallbridge","url":"https://github.com/shutallbridge/react-composition-skill"},"protocols":["OPENCLEW"],"capabilities":["change","render","use"],"trustScore":null,"trustConfidence":"unknown","artifactCount":0,"benchmarkCount":0,"lastRelease":null,"freshnessAt":"2026-04-15T01:16:05.504Z","freshnessLabel":"Apr 15, 2026","securityReviewed":true,"openapiReady":false,"stats":[{"label":"Trust score","value":"Unknown"},{"label":"Compatibility","value":"OpenClaw"},{"label":"Freshness","value":"Apr 15, 2026"},{"label":"Vendor","value":"Shutallbridge"},{"label":"Artifacts","value":"0"},{"label":"Benchmarks","value":"0"},{"label":"Last release","value":"Unpublished"}],"factsPreview":[{"factKey":"docs_crawl","category":"integration","label":"Crawlable docs","value":"6 indexed pages on the official domain","href":"https://github.com/login?return_to=https%3A%2F%2Fgithub.com%2Fopenclaw%2Fskills%2Ftree%2Fmain%2Fskills%2Fasleep123%2Fcaldav-calendar","sourceUrl":"https://github.com/login?return_to=https%3A%2F%2Fgithub.com%2Fopenclaw%2Fskills%2Ftree%2Fmain%2Fskills%2Fasleep123%2Fcaldav-calendar","sourceType":"search_document","confidence":"medium","observedAt":"2026-04-15T05:03:46.393Z","isPublic":true},{"factKey":"vendor","category":"vendor","label":"Vendor","value":"Shutallbridge","href":"https://github.com/shutallbridge/react-composition-skill","sourceUrl":"https://github.com/shutallbridge/react-composition-skill","sourceType":"profile","confidence":"medium","observedAt":"2026-04-15T01:16:05.505Z","isPublic":true},{"factKey":"protocols","category":"compatibility","label":"Protocol compatibility","value":"OpenClaw","href":"https://xpersona.co/api/v1/agents/shutallbridge-react-composition-skill/contract","sourceUrl":"https://xpersona.co/api/v1/agents/shutallbridge-react-composition-skill/contract","sourceType":"contract","confidence":"medium","observedAt":"2026-04-15T01:16:05.505Z","isPublic":true},{"factKey":"handshake_status","category":"security","label":"Handshake status","value":"UNKNOWN","href":"https://xpersona.co/api/v1/agents/shutallbridge-react-composition-skill/trust","sourceUrl":"https://xpersona.co/api/v1/agents/shutallbridge-react-composition-skill/trust","sourceType":"trust","confidence":"medium","observedAt":null,"isPublic":true}],"highlights":["Trust evidence available"],"agentCard":{"name":"react-composition-patterns","description":"Guides coding agents to write React components using composition patterns (children, compound components, render props, slots) instead of monolithic, prop-heavy components. Apply when writing, reviewing, or refactoring React components.","source":"GITHUB_OPENCLEW","sourceId":"github:1158329463","repository":"https://github.com/shutallbridge/react-composition-skill","documentation":"https://xpersona.co/skill/shutallbridge-react-composition-skill/agent/shutallbridge-react-composition-skill","protocols":["OPENCLEW"],"capabilities":["change","render","use"],"languages":["typescript"],"install":{"command":"git clone https://github.com/shutallbridge/react-composition-skill.git","ecosystem":"git"},"examples":[{"kind":"example","language":"tsx","snippet":"function Card({ children }: { children: React.ReactNode }) {\n  return <div className=\"rounded-lg border p-6 shadow-sm\">{children}</div>;\n}\n\n// Consumer composes freely\n<Card>\n  <h2>Title</h2>\n  <p>Any content the consumer wants.</p>\n</Card>"},{"kind":"example","language":"tsx","snippet":"<Select onValueChange={setColor}>\n  <Select.Trigger>\n    <Select.Value placeholder=\"Pick a color\" />\n  </Select.Trigger>\n  <Select.Content>\n    <Select.Item value=\"red\">Red</Select.Item>\n    <Select.Item value=\"blue\">Blue</Select.Item>\n  </Select.Content>\n</Select>"}]}}