Use Cruise UI as an AI skill

One download teaches your AI assistant the whole style: the rules, both city themes, every component and the starters.

What it is

An agent skill is a folder with a SKILL.md file that AI tools load when a task needs it. The Cruise UI skill holds the Naija Brutalism design spec, the Lagos and Ibadan themes, the component list with install commands, a single-file HTML starter and the theme stylesheet. Ask for "Cruise UI" and the assistant picks your settings, installs components with the shadcn CLI in React / Next.js projects (or starts from the HTML starter), follows the rules and runs the final self-check before it answers.

It's generated from the same spec as the Studio prompt, so it stays in step with every release. Download it again to update.

Or from the terminal

curl -L https://cruiseui.dev/skill/cruise-ui.zip -o cruise-ui.zip

Install

The zip holds one folder, cruise-ui/. Unzip it where your tool looks for skills.

Claude Code

For all your projects:

Terminal

unzip cruise-ui.zip -d ~/.claude/skills/

Or for one project (commit it so your team gets it too):

Terminal, in the project folder

unzip cruise-ui.zip -d .claude/skills/

Either way you end up with skills/cruise-ui/SKILL.md. Start a new session and ask for Cruise UI.

Claude.ai

Open Settings, find the skills section and upload cruise-ui.zip as it is (don't unzip it). Then ask for Cruise UI in any chat.

Codex CLI

For one project, or for all of them:

Terminal

unzip cruise-ui.zip -d .agents/skills/
# or
unzip cruise-ui.zip -d ~/.agents/skills/

Other AI tools

Point the tool at cruise-ui/SKILL.md (it links to the other files), or paste its contents into your project's AGENTS.md and keep the cruise-ui folder next to it. No skill support at all? Use Copy prompt + spec in the Studio instead.

Try it

  • "Build a cake shop landing page in Cruise UI, Ibadan theme, dark mode."
  • "Make a quiz game screen in Cruise UI with a score counter, a countdown and a leaderboard."
  • "Add a Cruise UI pricing section to this Next.js app. Install the components from the registry."
  • "Turn this plain HTML form into Cruise UI, Lagos theme, Soft corners, Pidgin mode on."

What's inside

  • SKILL.md: when to use it, the workflow and the rules that are never broken.
  • references/design-spec.md: the full rules and copy-paste CSS, plus the final self-check.
  • references/themes/: Lagos · Danfo and Ibadan · Micra palettes, signature bands and tokens.
  • references/components.md: every component with its install command and key props.
  • assets/: single-file HTML starters and the theme stylesheet for each city.

React / Next.js projects install components from the @cruiseui registry, as in Installation.