What problem does it solve? When a UI need isn't covered by the chrome component registry, developers often build bespoke one-off components that stay local to a project and get rewritten in the next one. This Skill guides an agent through growing the registry properly: finding the registry repo, avoiding duplicates, meeting the house quality bar, and upstreaming the result into both the registry and the docs site. ## Core Features & Use Cases - Duplicate Detection: Checks the registry and reference docs to decide whether a need is a genuinely new component or just a prop on an existing one, with concrete precedent examples (switch vs checkbox, stepper vs tabs). - Quality Bar Enforcement: Encodes the registry's design language (dark-only, square corners, lowercase copy, rationed color) and engineering rules (hydration safety, reduced-motion handling, real semantics, keyboard support). - End-to-End Upstreaming: Covers creating the component, meta.ts contract, demo, docs-site wiring, reference documentation, drift checking via tools/refs.mjs, and installing the result back into consuming projects. - Use Case: While building a feature in a project that consumes chrome, you need a UI element the registry lacks. The Skill walks you through adding it to the registry repo, verifying the build, documenting it, and installing it back via the chrome CLI. ## Quick Start Ask the agent to add a new component to the chrome registry, for example: "chrome doesn't have a rating input — build it as a proper registry component and upstream it."
