# 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](https://cruiseui.dev/studio) prompt, so it stays in step with every release. Download it again to update.

[Download AI skill](https://cruiseui.dev/skill/cruise-ui.zip)

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](https://cruiseui.dev/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](https://cruiseui.dev/docs/installation#react).