Claude Code plugin
The Helix plugin bundles the MCP server and twelve skills. Two commands in Claude Code:
/plugin marketplace add timelycare/helix-component-library
/plugin install helix-ui@helix-design-system
Then verify with /mcp — the helix server should list six tools: get_component,
search_components, get_tokens, get_pattern, check_accessibility and
get_registry. If it does not appear, the plugin did not install; nothing else on
this page will work until it does.
The skills come with it. There is no separate step, and nothing to copy into your repo.
Skills
A skill is judgment, not lookup. Facts about components — variants, props, required ARIA attributes, token bindings — come from the MCP server and the metadata behind it, so they cannot drift. The skills carry the part an API cannot: which of two defensible designs is right here, and what the house does about it.
Claude loads them automatically when a task matches; you do not invoke them by hand.
The twelve the plugin ships
Start here
| Skill | What it decides |
|---|---|
helix-design-system | The entry point. Which components actually exist, what order the passes run in, and which skill owns a question. |
Is the design right — before any component is chosen
| Skill | What it decides |
|---|---|
helix-design-principles | What a screen should do first for someone arriving with no particular goal; the tie-break when two designs are both defensible. |
helix-ux | What a screen owes the person using it. The skill for defects that arrive as complaints — people miss the thing, lose their filters, cannot finish by keyboard. |
Is it built right
| Skill | What it decides |
|---|---|
helix-component-usage | Which component, which variant, which size — and when an action needs a confirmation step. |
helix-tokens | Every visual value: colour, background, spacing, radius, shadow, type size. Catches arbitrary Tailwind values and hardcoded hex. |
helix-patterns | Whole-page composition: which page template, the rhythm between sections, empty and loading states. |
helix-app-layouts | The chrome around the page: top bar, sidebar, page header, dialog sizing and footer order. |
helix-form-patterns | Forms, wizards, settings pages: how steps are shown, when the form commits, which fields appear conditionally. |
helix-data-patterns | Tables, list views, filters, analytics: row actions, status columns, pagination, filters that survive a browser back press. |
helix-copy-patterns | Any string a user reads — action labels, empty states, status vocabulary, consequence text in dialogs. |
helix-accessibility | Focus, keyboard, screen-reader behaviour, contrast, and the semantically correct element. |
helix-setup | Installing and configuring @timelycare/helix-ui, including into an app that already has its own design system. |
Two more that stay in the Helix repo
helix-compound-components (authoring the compound layer) and helix-convention
(making a house rule actually stick) are maintainer skills. They are not in the
plugin: a product builder never writes a compound, and every shipped description is
always-on context, so they would cost every session something only the design-system
team spends.
Getting the skills to fire
Claude loads a skill when the task matches its description, which works well for
"build me a settings page" and less well for short fix- and review-shaped prompts
("is this right?", "clean this up"). Adding this to the consuming app's CLAUDE.md
closes most of that gap:
## Helix UI
This app uses `@timelycare/helix-ui`. The Helix skills are installed; use them.
- Starting any Helix UI work → load `helix-design-system` first.
- Before emitting any component, token class or icon name → `helix-component-usage`.
- Reviewing a screen or flow, or asked "is this right?" → `helix-ux`.
- Any visual value (colour, spacing, radius, type size) → `helix-tokens`.
Never answer a Helix question from general React knowledge. If a skill covers it,
read the skill first — an import that does not resolve or an arbitrary Tailwind
value is the failure this exists to prevent.
What good output looks like
Semantic tokens only, never arbitrary values or raw hex. Components that exist —
verified against get_registry, not guessed. Accessibility attributes present
rather than assumed. The skills enforce all three; this page is only how you
install them.