Skip to content
helixui

Cursor

Cursor is a fork of VS Code with first-class AI chat. helixui works two ways:

  1. .cursorrules — a project-local rule file Cursor reads at every chat turn.
  2. MCP — add the helixui server to Cursor’s MCP config so it can query helixui at any time.

Drop-in .cursorrules

Save this at your repo root as .cursorrules:

This project uses the helixui design system. Follow these rules when
generating, editing, or reviewing UI code.


## Components


- Import all UI primitives from `@helixui/core`. Never write a primitive
  from scratch when a helixui equivalent exists. The full list of
  components is in `node_modules/@helixui/core/dist/components/` —
  one directory per component, each with a `spec.md` you can read.
- Use `@helixui/icons` for icons. There are 265+ named exports across
  `@helixui/icons` and `@helixui/icons/filled`.


## Tokens


- All colors, spacing, radii, font sizes come from helixui tokens. Use
  CSS custom properties: `var(--helixui-color-bg-action-brand-default)`,
  `var(--helixui-space-4)`, etc.
- Never write a hex code, a px value, or a font name directly.
- If a token doesn't exist for what you need, ask the user — don't
  invent.


## Theming


- The active theme is provided by `<HelixUIDNAProvider dna={…}>` from
  `@helixui/core`. Don't pass `style` props to override colors.
- If you need a different theme, breed one with `compose(a, b)` from
  `@helixui/dna` — don't write CSS overrides.


## Accessibility


- Every interactive element must be keyboard-reachable.
- Every icon-only button must have an `aria-label`.
- Don't remove focus rings. The `:focus-visible` outline is global.


## File layout


- App-level showcases live in `apps/site/src/pages/showcase/`.
- Internal components stay in `apps/<your-app>/src/components/`.
- Don't add files to `packages/*` — that's the upstream library.


## When in doubt


Read these files before generating:


- `DESIGN.md` (repo root) — canonical design system.
- `packages/core/src/components/<name>/spec.md` — component contract.
- `MANIFESTO.md` — eight principles you should treat as immutable.

MCP setup

Cursor reads MCP config from ~/.cursor/mcp.json:

{
  "mcpServers": {
    "helixui": {
      "command": "node",
      "args": ["/absolute/path/to/your/project/node_modules/@helixui/mcp/bin/server.mjs"]
    }
  }
}

After saving, fully quit Cursor (not just close the window) and relaunch. The helixui.* tools appear in the MCP panel of the chat sidebar.

What to try first

Open the project, summon Cursor chat (⌘L on macOS, Ctrl+L on Linux) and try:

Generate a <Pricing> component using helixui. Three tiers: Hobby ($0), Pro ($29), Team ($99). Each tier needs a feature list and a CTA. Use brand tone for Pro since it’s the recommended plan.

You should see Cursor reach for Card, Stack, Button, Badge, Text, and the right tokens — without hallucinated props.

Power moves

”Theme this page in noir”

If the helixui MCP server is wired up:

Take this page and rerun it under DNA preset “noir” via helixui.list_presets → helixui.express_dna. Apply via HelixUIDNAProvider. Show me the diff.

”Lint my UI for token violations”

Cursor + helixui.validate is a quick lint pass:

Walk src/components/ and use helixui.validate on each JSX file. Flag any unknown components or props.

”Visual mock from screenshot”

The user attached a screenshot. Use helixui.derive_dna_from_image (adapter: ‘anthropic’) to pick the closest DNA, then sketch a helixui page that matches.