# Agent Skills (https://auraimage.ai/docs/skills)



Agent skills are the fastest way to integrate AuraImage. Install once and your AI agent knows how to set up the project, write correct image URLs, use the React components, and run migrations — automatically, without you having to explain the patterns each time.

Skills work on top of the [MCP server](/docs/ai-integration). The MCP server gives your agent tools; skills give it the judgment to use those tools correctly.

## Install [#install]

```bash
npx skills add auraimage/skills
```

This installs all five skills. Restart your agent after installing.

To install a single skill:

```bash
npx skills add auraimage/skills/install-auraimage-app
```

## Skills [#skills]

### Install AuraImage (`/install-auraimage-app`) [#install-auraimage-install-auraimage-app]

Fires when you ask your agent to "install AuraImage", "set up AuraImage", or "add AuraImage to this project" — or when you run `/install-auraimage-app` directly.

The skill runs a five-dimension discovery scan (framework, image surface, secrets, backend, hosting), shows you a summary and ordered plan, asks for one confirmation, then executes everything in sequence: writes `.env.local`, registers the MCP server in `.mcp.json`, installs `@auraimage/sdk`, adds the React components via shadcn, and scaffolds an upload-token route. Idempotent — re-running it prints "Already installed" and exits cleanly.

### AuraImage React (`auraimage-react`) [#auraimage-react-auraimage-react]

Fires when your agent is working in React or Next.js and touches image display or upload UI.

Instructs the agent to always use `<AuraImage />` instead of raw `<img>` or `<picture>`, choose the right placeholder strategy (`blurhash` for hero images, `lqip` for thumbnails, `empty` for icons), and use `<AuraUploader />` for all upload UI rather than writing manual upload flows. Also ensures the agent stores `name` and `blurhash` from upload results alongside the URL.

### AuraImage URL API (`auraimage-url-api`) [#auraimage-url-api-auraimage-url-api]

Fires when your agent is writing or reviewing any `<img>`, `<picture>`, or CSS `url()` — including in plain HTML, email templates, and OG tags.

Instructs the agent to always include a `w=` transform in the path segment of every CDN URL, generate `<picture>` elements with AVIF and WebP `<source>` elements for images wider than 200px, use extension-less URLs in production to let the CDN auto-negotiate via `Accept` header (pinning an explicit `.jpg`/`.png` only for `og:image`), and pick the right `fit` mode (`face` for portraits, `contain` for logos, `cover` for cards, `auto` for editorial images).

### AuraImage Migrate (`auraimage-migrate`) [#auraimage-migrate-auraimage-migrate]

Fires when you ask your agent to "migrate" or "optimize" images, or when it detects local images in `/public`, Cloudinary/Imgix/S3 URLs, or `next/image` with local file imports.

Instructs the agent to follow a five-step workflow: run `audit_lcp` first to get an exact file list and savings estimate, preview the migration with `dryRun: true`, confirm with you, run the actual upload, rewrite `<img>` tags to full `<picture>` elements with AVIF/WebP srcsets, then verify with `audit_lcp` again.

### AuraImage MCP (`auraimage-mcp`) [#auraimage-mcp-auraimage-mcp]

Fires when you ask to use `audit_lcp`, `migrate_assets`, `generate_responsive_tag`, `generate_alt`, or `smart_crop_preview`, or when setting up AuraImage for the first time.

Instructs the agent to check for an existing `.mcp.json`, merge the `auraimage` MCP server entry without overwriting other servers, ensure `AURA_SECRET_KEY` is in `.env.local` (never committed), and prompt you to restart your agent. Unlocks all five MCP tools once configured.

## MCP tools [#mcp-tools]

Once the MCP server is configured (via the `auraimage-mcp` skill or [manually](/docs/ai-integration)), your agent gains access to these tools:

| Tool                      | What it does                                                       |
| ------------------------- | ------------------------------------------------------------------ |
| `audit_lcp`               | Scans a directory for unoptimized images and estimates LCP savings |
| `migrate_assets`          | Uploads local images to AuraImage (supports `dryRun`)              |
| `generate_responsive_tag` | Generates a `<picture>` element with AVIF/WebP srcsets             |
| `generate_alt`            | Generates alt text for an image URL using vision AI                |
| `smart_crop_preview`      | Returns crop variant URLs for face/auto/cover at given dimensions  |


## Related

- [AI Integration](https://auraimage.ai/docs/ai-integration)
- [Agent Skills](https://auraimage.ai/skills)
- [Getting Started](https://auraimage.ai/docs/getting-started)