Agent Skill

The Cubitt Skill is an agent skill that encodes Cubitt UI rules, component usage patterns, and token guidance. It helps prevent common styling and interaction mistakes when building with Cubitt. The skill provides:

Components — Available primitives and composites, usage patterns, Do/Don't examples
Icons — Import paths, sizing rules, when to use outline vs fill
Tokens — Color system, typography weights, semantic tokens
Logos — Tilt Legal and Mobius props and variants

Installation

Add the Cubitt MCP

Follow the MCP setup guide to add the Cubitt MCP to your agent.

The skill works without the Cubitt MCP, but you'll get the best experience with it as the skill guides agents to use MCP tools at key moments for component docs and icon search.

Install the Skill

The skill ships with @tilt-legal/cubitt-components and installs automatically via postinstall:

pnpm add @tilt-legal/cubitt-components

Or re-run the skill installer manually:

pnpm exec cubitt-skills

This copies the skill into .agents/skills/cubitt and adds it to AGENTS.md for auto-discovery.

The skill is overwritten on each install/update of @tilt-legal/cubitt-components, keeping it in sync with the package.

Invoke the Skill

The skill auto-discovers from AGENTS.md, but agents can be inconsistent. You can also invoke it explicitly:

"Use the Cubitt skill for this UI change."
"Apply Cubitt rules to this component."

Symlinking

Some agent providers use their own config folders (.claude, .cursor, etc.). If your provider doesn't read from .agents/skills, create a symlink:

ln -s ../../.agents/skills/cubitt .claude/skills/cubitt

Keep .agents/skills/cubitt as the source of truth as it gets updated by the postinstall script everytime you update @tilt-legal/cubitt-components.