---
title: Agent skill
description: Install the Brand Stack skill so Claude reaches for the screenshot-to-mockup flow on its own, in Claude Code, claude.ai, and Cowork.
---

The Brand Stack **agent skill** is a small instruction pack Claude
loads on demand. With the skill installed, Claude recognizes mockup
moments on its own ("turn this into a hero image", a fresh Playwright
capture after shipping a feature) and runs the whole flow correctly:
pick the right intake route, infer the device from the screenshot,
quote credit costs, and hand back the workspace link.

The skill complements the [MCP connector](/mcp/setup); it does not
replace it. The connector provides the tools, the skill provides the
instincts.

## Install

Download:
[brandstack-mockups-skill.zip](https://www.brandstack.dev/downloads/brandstack-mockups-skill.zip)

**Claude Code**: unzip into your skills directory, then start a new
session:

```bash
unzip brandstack-mockups-skill.zip -d ~/.claude/skills/
```

(Use a project's `.claude/skills/` instead to share the skill with a
team through the repo.)

**claude.ai and Claude Desktop**: Settings, then Capabilities, then
upload the zip under Skills.

## What it teaches

- When to offer a mockup without being asked: fresh screenshots in the
  session are mockup material.
- The three intake routes (public URL, file on disk, pasted image) and
  which needs nothing beyond the connector.
- Inference rules: device from the screenshot's shape, persona from
  the product being worked on, one question at most.
- The guided first mockup, and quoting real credit costs from
  `get_credits` before generating.
- Template selection by name or pasted id.

## Verify

Ask Claude:

```text
What can you do with Brand Stack?
```

With the skill installed and the connector authorized, the answer
should cover screenshots to mockups, and a follow-up like "turn
brandstack.dev into a MacBook mockup" should run without further
setup.