Skills

Skills give assistants project-aware context about Cubix. Once installed, the agent knows how to find, install, compose, and customize components using the correct APIs, tokens, and primitive base for your app.

For example, you can ask:

• “Add a login form with email and password fields using Cubix Field and Input.”
• “Create a settings page with a profile form and a destructive delete dialog.”
• “Build a dashboard shell with Sidebar, stats cards, and a Data Table.”
• “Add an agent chat layout with Conversation, Thinking, Tool Call, and Prompt Input.”
• “Install button and dialog with --base radix and match our existing tokens.”

The skill reads your project cubix.json and supplies framework details, aliases, installed components, icon library, and base (base, radix, or aria) so imports and composition stay correct.

Install

Install the Cubix skill into your project with the Skills CLI:

pnpm dlx skills add cubix/ui

After install, assistants that support Agent Skills load Cubix guidance automatically when you work on UI, registry items, or CLI flows. Pair this with Installation so cubix.json already exists in the repo.

What's included

The skill equips the assistant with the following knowledge:

Project context

On relevant tasks, the skill resolves configuration from cubix.json and cubix info: framework, Tailwind CSS entry, aliases, base library, icon library, and where components land under components/cubix.

{
  "style": "cubix",
  "base": "base",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "css": "app/globals.css",
    "cssVariables": true
  },
  "iconLibrary": "lucide",
  "aliases": {
    "ui": "@/components/cubix",
    "utils": "@/lib/utils"
  }
}

CLI commands

Full reference for init, add, view, search, build, and info - including --base, overwrite, and dry-run style workflows. See the CLI docs for the human-readable reference.

Theming and customization

How semantic tokens, oklch palettes, dark mode, radius scale, and variants work. Assistants are steered to background, foreground, muted, accent, primary, destructive, border, input, and ring instead of hardcoded colors. Details live under Theming.

Bases and composition

Cubix keeps one visual API across Base UI, React Aria, and Radix UI. The skill teaches named exports, data-slot, cn(), and how asChild maps to each primitive compose API so generated code stays aligned with your chosen base.

Registry authoring

How to shape registry.json items, dependencies, and public/r/*.json output from cubix build. More in Registry.

Agent surfaces

Guidance for Cubix AI building blocks - Conversation, Prompt Input, Thinking, Tool Call, Streaming Text, and related patterns - so chat and agent UIs follow the same ownership model as the rest of the catalog.

How it works

1. Project detection - the skill activates when it finds cubix.json in the workspace.
2. Context injection - it reads project config (and prefers cubix info --json when available) so aliases, base, and paths stay accurate.
3. Pattern enforcement - the assistant follows Cubix composition rules: semantic tokens, data-slot, accessible states, and base-specific APIs without inventing a parallel design system.
4. Component discovery - before generating UI, it uses cubix search, cubix view, or the docs catalog under Components to pick real registry items.

Tips for better results

• Name the base when it matters: --base aria or --base radix.
• Point at existing screens or tokens so the assistant extends Cubix instead of introducing one-off styles.
• Ask it to run cubix add for missing components rather than pasting incomplete stubs.
• For long-form or chat copy, pair Skills with Typeset presets so prose rhythm stays consistent.