Agent Skills

Your coding agent installs AuraImage.

Six open-source skills teach Claude Code, Codex, Grok Build, and any skills-aware agent to wire AuraImage end to end. Below is the whole session — discovery, one plan, two honest questions.

Try it now

1
Install the skills bundle
2
Then run inside Claude Code, Cursor, Codex, or Grok Build

claude — ~/dev/acme-storefront

Claude Code v2.1.206

Welcome back dev!

Fable 5 · Claude Max

dev@acme.dev's Organization

~/dev/acme-storefront

Tips for getting started

Run /install-auraimage-app to set up AuraImage

What's new

Skills auto-load from .claude/skills

MCP servers can be scoped per project

/release-notes for more

/install-auraimage-app

I'll scan the project first — framework, image surface, secrets, backend, hosting — then show you one plan and one confirm.

Read(package.json)Next.js 15.4 · App Router · TypeScript · pnpm 9

Grep(<img|background-image)14 <img> tags · 6 res.cloudinary.com URLs

Glob(public/**/*.{png,jpg})23 local images · 18.7 MB total

Read(.gitignore).env.local ignored · no AURA_* keys anywhere

Read(vercel.json)hosting: Vercel → env file convention .env.local

Discovery — acme-storefront
  Framework   Next.js 15 (App Router, TypeScript, pnpm)
  Images      14 <img> tags · 23 files in /public · 6 Cloudinary URLs
  Secrets     no AURA_* keys · .env.local gitignored
  Backend     route handlers — can sign upload tokens
  Hosting     Vercel

Plan
  1. Credentials & env     →  auraimage-api-key
  2. Register MCP server   →  .mcp.json
  3. Install SDK           →  pnpm add @auraimage/sdk
  4. Components            →  <AuraImage /> + <AuraUploader />
  5. Token route           →  app/api/aura/sign/route.ts

install-auraimage-app

5 steps · 6 writes · nothing runs before this confirm

Proceed? (or describe changes, e.g. 'skip uploader')

1. Yes, run the plan

2. No — tell the agent what to change (esc)

No Secret Key found. Paste one from the dashboard (Settings → Secret Keys) — it stays masked in this session.

sk_live_0198a4f2…9c1b

Fetch(auraimage.ai/v1/sign — validate key)valid · project acme-storefront · key name "prod"

auraimage-api-key

.env.local +AURA_SECRET_KEY=sk_live_0198…9c1b +NEXT_PUBLIC_AURA_PROJECT_NAME=acme-storefront

Write 2 keys to .env.local? A secret is never written to disk without this confirm.

1. Yes, write .env.local

2. No (esc)

Write(.env.local)+2 keys · values masked in the log

Edit(.mcp.json)merged "auraimage" server · existing servers untouched

Bash(pnpm add @auraimage/sdk)+ @auraimage/sdk 1.4.2(ctrl+o to expand)

Packages: +1 + @auraimage/sdk 1.4.2 Done in 1.8s

Bash(npx shadcn@latest add https://auraimage.ai/registry/image.json)components/aura/image.tsx

Bash(npx shadcn@latest add https://auraimage.ai/registry/uploader.json)components/aura/uploader.tsx

Update(app/api/aura/sign/route.ts)

Created app/api/aura/sign/route.ts — the <AuraUploader /> default endpoint, no extra wiring

1+added: import { AuraImage } from '@auraimage/sdk';
2+added: 
3+added: const aura = new AuraImage({
4+added:   secretKey: process.env.AURA_SECRET_KEY!,
5+added:   projectName: process.env.NEXT_PUBLIC_AURA_PROJECT_NAME!
6+added: });
7+added: 
8+added: export async function POST() {
9+added:   const signature = await aura.signUpload({ maxSize: '5mb', allowedTypes: ['image/*'] });
10+added:   return Response.json({ signature });
11+added: }

AuraImage installed — 6 writes, 0 failures

Wrote
  .env.local           +2 keys (masked)
  .mcp.json            auraimage MCP server
  package.json         @auraimage/sdk 1.4.2
  components/aura/     image.tsx · uploader.tsx
  app/api/aura/sign/   route.ts (+11 lines)

Next
  1. Restart your agent to load the MCP server
  2. audit_lcp — scan for unoptimized images
  3. migrate_assets — 23 local + 6 Cloudinary images detected
  4. auraimage-react — <AuraImage /> patterns

Docs: https://auraimage.ai/docs

xhigh · /effort

auto mode on (shift+tab to cycle) · ← for agents

A scripted run of install-auraimage-app — same flow in every agent, real commands, real file writes.

One confirm, not N: The agent shows its discovery and one ordered plan, then asks once. The only second question is the Secret Key write — a secret is never written to disk unconfirmed.
Idempotent: Every write is read-merge-write. Re-running on an installed project prints "Already installed" and exits without touching a file.
Degrade and report: No backend? The uploader is skipped with a reason, not a stack trace. Failures stop the run, keep finished writes, and print the exact retry command.

Six skills, one collection

Install the bundle or cherry-pick. Each skill activates on its own triggers — editing image code wakes auraimage-react, a Cloudinary URL wakes auraimage-migrate.

install-auraimage-app
Start here
The end-to-end installer. Discovers your framework, images, secrets, backend, and hosting, then runs SDK install, MCP registration, components, env setup, and the token route behind a single confirm.
auraimage-api-key
Credentials only. Finds or prompts for your Secret Key, validates it live against the API, and writes env files masked and confirmed. The one skill in the collection allowed to touch secrets.
auraimage-react
React / Next.js
Rules for <AuraImage /> and <AuraUploader /> — BlurHash to LQIP to full-resolution loading, drag-and-drop upload queues, and per-use-case placeholder configuration.
auraimage-url-api
Transform URLs and responsive <picture> elements: w, h, q, fit, and lqip in the path segment, AVIF and WebP srcsets, face-detection and saliency crops.
auraimage-migrate
Audit, dry-run, then upload. Moves local /public images and Cloudinary, Imgix, or S3 URLs onto AuraImage, rewriting JSX and CSS references as it goes.
auraimage-mcp
Registers the MCP server and unlocks the tool belt: audit_lcp, migrate_assets, generate_alt, generate_responsive_tag, smart_crop_preview.