Skip to content

uxfront-com/open-components

v1.0.0CC-BY-4.0

The Open Components standard for UI components, in your agent: skills that build and review components rule by rule, and the MCP server that serves the contracts, every rule and the docs.

adopt-token-paths

Renames a codebase's CSS variables to Open Components token paths, like --color--primary or --button--icon--size, keeping their values, then adds the Stylelint rule that keeps them that way. Use when asked to rename, organise or standardise CSS custom properties or design tokens, to set up a naming convention for them, or to adopt token paths.

build-component

Builds a UI component that meets the Open Components standard, in the user's framework, from its contract, its reference implementation and its tests, or, for one the standard only plans, following the Button's structure. Use when building, porting or rewriting a UI component, like a button, input, spinner, dialog or tabs, for a design system or component library, or when the user asks for one that meets Open Components.

review-component

Reviews a UI component against its Open Components contract, or a codebase's theme and component styles against a foundation like Design Tokens, reporting every rule as pass or fail with its ID and the evidence, then fixing the failures. Use when asked to review, audit or check a component, its accessibility, its API or its tokens, or a theme's CSS variables, against Open Components or a component standard.

review-usage

Reviews how a screen, page or feature uses a UI component, like a button, against the rules of its Open Components contract that the code using it meets, like keeping one primary button per view, reporting every rule as pass or fail with its ID and the evidence, then fixing the failures. Use when asked to review a screen, form, dialog or flow, or how an app uses its buttons, inputs or other components, against Open Components.