opencomponents.dev

Open Components (https://opencomponents.dev) is a standard for UI components. Each component's page covers its UI (how it looks), then holds it to three layers: UX (user experience), DX (developer experience) and AX (agentic experience). Every shipped component, and every foundation like Design Tokens, has a contract: its API, its DOM contract, its states, its tokens and every rule in its checklist. Each rule has a stable ID, like button/keep-focus, a level (must or should) and, for components, a scope: component (met by the component itself), usage (met by the code that uses it) or both. How to use this server: 1. list-components shows what the standard covers, shipped or planned, and the names the other tools take. search-docs finds where a topic is covered. 2. Read the contract first, with get-contract: it holds every requirement in a fraction of the page's length. Read the page with get-page only for the reasoning or the examples behind a rule, a few sections at a time and in your framework, since component pages are too long to read whole. 3. To build a component, read its contract, then get-reference-implementation for a tested Vue 3 implementation and the tests to port. Check your work against the rules with a component or both scope. 4. To review code, use list-rules with the component and a scope: ["component", "both"] for the component itself, ["usage", "both"] for a screen that uses it. Report every rule as pass or fail, with its ID and the evidence from the code. 5. A component meets the standard when it meets every must rule. Each should rule is expected unless there's a good reason not to follow it. 6. Cite rule IDs exactly as this server writes them, and never make one up. 7. Planned components have no page or contract yet. Hold them to the three layers and Design Tokens, following the Button's structure, as the build-component prompt does. The guidelines are licensed under CC BY 4.0, so credit Open Components when you reuse them.