> ## Documentation Index
> Fetch the complete documentation index at: https://docs.colossal.sh/llms.txt
> Use this file to discover all available pages before exploring further.

# Overview

> The harness for using your own coding agents with Colossal: Agent Skills and the Colossal MCP server.

Colossal provides a harness that you can use with your own agents to build and manage your project. It includes:

* Agent Skills
* Colossal MCP

Agent Skills are structured guides that AI coding agents (Claude Code, Cursor, Codex, Gemini CLI, OpenCode, and \~50 others) load before acting. Each skill is a `SKILL.md` file with optional scripts and references that follows the [Agent Skills](https://agentskills.io) specification.

Colossal maintains a number of Agent Skills that your AI agent can use to create beautiful storefronts based on our design reference library — built to work seamlessly with the Colossal backend.

The [`colossalhq/agent-skills`](https://github.com/colossalhq/agent-skills) repo bundles skills that are used to build storefronts: SDK usage, design references, and design extraction.

## Skills

| Skill                                                   | Purpose                                                                                                                                          |
| ------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| [Store Builder](/agent-skills/colossal-builder)         | Use the [Storefront SDK](/react-sdk/overview) in any React app -- hooks, providers, types, and helpers.                                          |
| [Design Library](/agent-skills/colossal-design-library) | Curated catalog of design references (`design.json` + `theme.css` + `preview.html`) ready to drop into a storefront.                             |
| [Store Designer](/agent-skills/colossal-store-design)   | Create new design references from store screenshots, or apply an existing reference to any project (shadcn, Tailwind, vanilla CSS, Vue, Svelte). |

Store Designer writes new references into the Design Library and reads from it when applying an existing design.

## Install

Install all skills into the current project:

```bash theme={null}
npx skills add colossalhq/agent-skills --all
```

Pick specific skills and target agents:

```bash theme={null}
npx skills add colossalhq/agent-skills \
  --skill colossal-builder \
  --skill colossal-design-library \
  -a claude-code -a cursor \
  -y
```

Install globally across every project on your machine:

```bash theme={null}
npx skills add colossalhq/agent-skills -g
```

List skills without installing:

```bash theme={null}
npx skills add colossalhq/agent-skills --list
```

After install, skills land at `<project>/.claude/skills/<name>/` for Claude Code and `<project>/.agents/skills/<name>/` for most other agents. The CLI auto-detects which agents are present.

## Update

```bash theme={null}
npx skills update                      # refresh all installed skills
npx skills update colossal-design-library  # refresh one
```

Skills install via symlink by default, so updates are picked up immediately. With `--copy`, `update` replaces the bytes in place.

## How agents use them

When the user describes a task that matches a skill's `description` -- "build a storefront", "list available themes", "extract a design from this screenshot" -- the agent loads the skill and follows it. Skills include scripts the agent can run directly (theme analysis, listing references), example outputs, and the constraints that apply to every Colossal storefront.

For the broader open-source skills library that powers Colossal's built-in agents, see [`colossalhq/agent-skills`](https://github.com/colossalhq/agent-skills).