Sanity Best PracticesSkill

Released Jan 27, 2026

MIT

Summary

Sanity's official agent skill — schema design, GROQ, TypeGen, Visual Editing, Portable Text, Studio structure, localization, Functions and Blueprints, plus integration guides for eight frontend frameworks.

Features

Routing index: load only the one or two topic files a task needs
Integration guides for Next.js, Nuxt, Astro, Remix, SvelteKit, Angular and Hydrogen
GROQ query patterns, defineQuery and performance optimization
TypeGen setup for end-to-end type safety
Visual Editing, Presentation preview, Portable Text and page builders
Explicit video guidance: why file assets are the wrong place for production video
Blueprints (infrastructure as code) and Sanity Functions for content automation

Install This Skill

Add this skill to your favorite AI agent in a few steps.

Any AI agent

This skill is plain instructions — it works with any assistant that accepts custom instructions or system prompts.

Copy the skill content with the button below.
Paste it into your agent's instruction file or system prompt (for example AGENTS.md, .cursorrules, or a custom instructions field).
Ask the agent to apply the skill whenever the task matches.

Claude Code & Claude apps

Claude loads skills automatically from its skills directory.

Claude Code

Create a skill folder — personal: ~/.claude/skills/sanity-best-practices/, or per-project: .claude/skills/sanity-best-practices/
Save the skill content as SKILL.md inside that folder.
Claude Code picks it up automatically and invokes it when relevant.

mkdir -p ~/.claude/skills/sanity-best-practices

Claude.ai / Claude Desktop

Enable Skills under Settings → Capabilities, then upload the skill (a folder or zip containing SKILL.md).

One-prompt install

Paste this prompt into any agent with web access and it will install the skill for you.

Install the "Sanity Best Practices" skill from Onei AI. Fetch https://onei.ai/skills/sanity-best-practices, extract the full skill content from the page, and save it where you load skills from (for Claude Code: .claude/skills/sanity-best-practices/SKILL.md). From now on, apply this skill whenever it is relevant to my request.

Skill Content

Markdown Content

Copy this content and use it with your preferred AI agent

---
name: sanity-best-practices
description: Sanity development best practices for schema design, GROQ queries, TypeGen, Visual Editing, images, Portable Text, Studio structure, localization, migrations, Sanity Functions, webhooks, Blueprints, and framework integrations such as Next.js, Nuxt, Astro, Remix, SvelteKit, Angular, Hydrogen, and the App SDK. Use this skill whenever working with Sanity schemas, defineType or defineField, GROQ or defineQuery, content modeling, Presentation or preview setups, Sanity-powered frontend integrations, event-driven content automation, documentEventHandler, defineDocumentFunction, defineMediaLibraryAssetFunction, @sanity/functions, @sanity/blueprints, sanity.blueprint.ts, event-driven content automation, or when reviewing and fixing a Sanity codebase.
---

# Sanity Best Practices

Comprehensive best practices and integration guides for Sanity development, maintained by Sanity. Use the quick reference below to load only the one or two topic files that match the task.

## When to Apply

Reference these guidelines when:
- Setting up a new Sanity project or onboarding
- Integrating Sanity with a frontend framework (Next.js, Nuxt, Astro, Remix, SvelteKit, Hydrogen)
- Writing GROQ queries or optimizing performance
- Designing content schemas
- Implementing Visual Editing and live preview
- Working with images, Portable Text, or page builders
- Configuring Sanity Studio structure
- Setting up TypeGen for type safety
- Implementing localization
- Migrating content from other systems
- Building custom apps with the Sanity App SDK
- Managing infrastructure with Blueprints
- Automating content workflows with Sanity Functions or webhooks

## Global Rules

- Let Sanity generate `_id` values for ordinary documents. Do not create deterministic UUIDs, slug-derived IDs, or legacy-system IDs when creating documents.
- Model relationships with `reference` fields, then resolve related documents with GROQ lookups, source-key fields, or returned `_id` values from created documents.
- Use explicit document IDs mainly for singleton documents controlled by Studio Structure, including localized singletons such as `homePage-en`.

## Video

- Do not store or serve video from Sanity `file` assets for production playback. File assets are delivered as raw downloads with no transcoding or adaptive streaming, and video traffic drives very high bandwidth usage and unexpectedly large bills.
- On Enterprise plans with the video add-on, use Sanity Media Library for video: uploads are transcoded and streamed adaptively via Mux. Model video fields with `defineVideoField()` from `sanity/media-library` and play them with `@mux/mux-player-react` using the asset's playback ID.
- On other plans, use a dedicated video service: install `sanity-plugin-mux-input` to upload and manage videos in your Mux account from the Studio, or host video on a platform such as YouTube or Vimeo and store only the embed URL in Sanity.
- Small clips and short previews in a `file` field are acceptable, but any user-facing video at scale must go through Media Library or a streaming service.

## Quick Reference

### Integration Guides

- `get-started` - Interactive onboarding for new Sanity projects
- `nextjs` - Next.js App Router, Live Content API, standalone Studio
- `nuxt` - Nuxt integration with @nuxtjs/sanity
- `angular` - Angular integration with @sanity/client, signals, resource API
- `astro` - Astro integration with @sanity/astro
- `remix` - React Router / Remix integration
- `svelte` - SvelteKit integration with @sanity/svelte-loader
- `hydrogen` - Shopify Hydrogen with Sanity
- `project-structure` - Standalone Studio and monorepo patterns
- `app-sdk` - Custom applications with Sanity App SDK
- `blueprints` - Infrastructure as Code: blueprint files, stacks, plan/deploy workflow, error recovery, CI deploys
- `functions` - Automating content workflows with Sanity Functions and webhooks

### Topic Guides

- `groq` - GROQ query patterns, type safety, performance optimization
- `schema` - Schema design, field definitions, validation, deprecation patterns
- `visual-editing` - Presentation Tool, Stega, overlays, live preview
- `page-builder` - Page Builder arrays, block components, live editing
- `portable-text` - Rich text rendering and custom components
- `image` - Image schema, URL builder, hotspots, LQIP, Next.js Image
- `studio-structure` - Desk structure, singletons, navigation
- `typegen` - TypeGen configuration, workflow, type utilities
- `seo` - Metadata, sitemaps, Open Graph, JSON-LD
- `localization` - i18n patterns, document vs field-level, locale management
- `migration` - Content import overview (see also `migration-html-import`)
- `migration-html-import` - HTML to Portable Text with @portabletext/block-tools

## How to Use

Start with the single framework or topic guide that best matches the request, then read additional references only when the task crosses concerns. Use these reference files for detailed explanations and code examples:

```
references/groq.md
references/schema.md
references/nextjs.md
```

Each reference file contains:
- Comprehensive topic or integration coverage
- Incorrect and correct code examples
- Decision matrices and workflow guidance
- Framework-specific patterns where applicable

Usage Instructions

Learn how to use this skill with different AI agents.

Claude Desktop

In Claude Code: /plugin install sanity-plugin@sanity-agent-toolkit, which bundles the MCP server, the agent skills and slash commands.

Cursor

Available on the Cursor Marketplace as the Sanity plugin, or install the skills directly with npx skills add sanity-io/agent-toolkit.

Generic Instructions

npx skills add sanity-io/agent-toolkit

Example Usage

Wire this Next.js App Router site to Sanity with Visual Editing and TypeGen, and review my existing GROQ queries for performance.

Description

Sanity maintains this skill as the reference an agent should load before writing anything against a Sanity project, and it is built around a load-what-you-need index rather than one long document. The SKILL.md is a routing table: twenty-one integration and topic guides plus twenty-six focused best-practice rules, and the instruction is to pull the one or two files that match the task instead of loading the whole set.

Framework coverage is the practical reason to install it: Next.js App Router with the Live Content API and a standalone Studio, Nuxt via @nuxtjs/sanity, Astro via @sanity/astro, React Router / Remix, SvelteKit via @sanity/svelte-loader, Angular with signals and the resource API, and Shopify Hydrogen. Each guide is Sanity's own current wiring, which is where model knowledge tends to be stale.

The global rules are opinionated and specific, and they read like the accumulated result of support tickets. Let Sanity generate _id values for ordinary documents — do not mint deterministic UUIDs, slug-derived IDs or legacy-system IDs. Model relationships with reference fields and resolve them with GROQ lookups. Reserve explicit document IDs mainly for singletons under Studio Structure, including localized ones like homePage-en.

One section is worth reading before you architect anything: the video guidance. Sanity file assets are delivered as raw downloads with no transcoding and no adaptive streaming, so serving production video from them drives very high bandwidth and unexpectedly large bills. The skill tells the agent to use Media Library with Mux-backed adaptive streaming on Enterprise plans with the video add-on, sanity-plugin-mux-input or an external host otherwise, and to keep file fields for short clips only. That is exactly the sort of constraint an agent would otherwise cheerfully violate.

The rest spans GROQ optimization and defineQuery, schema patterns with defineType/defineField, TypeGen for end-to-end type safety, Visual Editing and Presentation preview, images and Portable Text, page builders, Studio customization, localization, migrations, the App SDK, Blueprints for infrastructure-as-code, and Sanity Functions and webhooks for event-driven content automation.

MIT licensed, part of sanity-io/agent-toolkit, and announced alongside Sanity's other agent skills in January 2026.

Related Skills

Skill: Convex

by Convex

New

Convex's official top-level agent skill — routes an agent to the right convex-* skill for the task and to a served capability catalogue that stays current without a reinstall.

Development

Skill: Shopify Liquid & Themes

by Shopify

New

Official Shopify skill for theme development in Liquid — teaches an agent the modern theme architecture of sections, blocks and snippets, and validates generated templates and schemas.

Development

Skill: Shopify Admin GraphQL

by Shopify

New

Shopify's official skill for writing Admin GraphQL queries and mutations — it searches the live API docs and validates every operation against the schema before handing you code.

Development

Skill: Twilio AI Agent Architect

by Twilio

New

Planning skill that interrogates your use case before any code is written, then recommends the right Twilio Conversations stack — ConversationRelay, Memory, Intelligence, Orchestrator, TaskRouter — and the implementation skills to follow.

Development

Browse all skills →