# Sanity Image Pipeline

> >-

- **Type:** Skill
- **Install:** `agentstack add skill-aiengkenn-agent-skills-sanity-image-pipeline`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [AIEngKenn](https://agentstack.voostack.com/s/aiengkenn)
- **Installs:** 0
- **Category:** [Content & Media](https://agentstack.voostack.com/c/content-and-media)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [AIEngKenn](https://github.com/AIEngKenn)
- **Source:** https://github.com/AIEngKenn/agent-skills/tree/main/skills/sanity-image-pipeline

## Install

```sh
agentstack add skill-aiengkenn-agent-skills-sanity-image-pipeline
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Sanity Image Pipeline

Images that are **accessible**, **performant**, and **never blank the layout**.

## Ask first

- Next.js `next/image` in use?  
- Existing `urlFor` helper?  
- Fallback local paths (`/images/placeholders/…`)?  

## Schema rules

```ts
defineField({
  name: "mainImage",
  type: "image",
  options: { hotspot: true },
  fields: [
    defineField({
      name: "alt",
      type: "string",
      title: "Alt text",
      validation: (rule) => rule.required(),
    }),
  ],
})
```

Human titles in editorial language via `sanity-editor-ux`.

## App rules

1. **urlFor** from `@sanity/image-url` with projectId/dataset  
2. Prefer width/height or `fill` + aspect ratio  
3. Pass `lqip` from `asset->metadata.lqip` as blurDataURL when available  
4. If CMS image missing → local placeholder, don’t crash  
5. Alt: CMS alt → else meaningful fallback → never empty decorative guess without reason  

## GROQ snippet

```groq
mainImage{
  asset->{ _id, url, metadata { lqip, dimensions } },
  alt,
  hotspot,
  crop
}
```

## Anti-patterns

- Rendering raw Sanity CDN URLs at full resolution everywhere  
- Optional alt with no validation on content images  
- No fallback → broken `` on partial bootstrap  

## Deliverable

Schema field pattern · `urlFor` helper · React image component behavior · placeholder strategy.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [AIEngKenn](https://github.com/AIEngKenn)
- **Source:** [AIEngKenn/agent-skills](https://github.com/AIEngKenn/agent-skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-aiengkenn-agent-skills-sanity-image-pipeline
- Seller: https://agentstack.voostack.com/s/aiengkenn
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.