Agent 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. The MCP server gives your agent tools; skills give it the judgment to use those tools correctly.

Install

npx skills add auraimage/skills

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

To install a single skill:

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

Skills

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)

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 key and blurhash from upload results alongside the URL.

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 ?w= in every CDN URL, generate <picture> elements with AVIF and WebP <source> elements for images wider than 200px, omit fmt in production to let the CDN auto-negotiate via Accept header, and pick the right fit mode (face for portraits, contain for logos, cover for cards, auto for editorial images).

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)

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

Once the MCP server is configured (via the auraimage-mcp skill or manually), your agent gains access to these tools: