What is included in Sanity Best Practices?

Comprehensive integration guides, topic references (groq, schema, visual-editing, etc.), and patterns for performance, localization, migrations, and Studio configuration.

Which frameworks are supported by integration guides?

Guides cover Next.js, Nuxt, Astro, Remix, SvelteKit, Hydrogen, plus app SDK and blueprints.

How should I use these guides?

Read individual reference files for detailed explanations, code examples, decision matrices, and workflow guidance; apply the guidance to your project lifecycle.

sanity-best-practices

Scanned

npx machina-cli add skill sanity-io/agent-toolkit/sanity-best-practices --openclaw

Files (1)

SKILL.md

3.1 KB

Sanity Best Practices

Comprehensive best practices and integration guides for Sanity development, maintained by Sanity. Contains integration guides and topic references covering schema design, query optimization, and frontend integration.

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

Quick Reference

Integration Guides

get-started - Interactive onboarding for new Sanity projects
nextjs - Next.js App Router, Live Content API, embedded 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 - Monorepo and embedded Studio patterns
app-sdk - Custom applications with Sanity App SDK
blueprints - Infrastructure as Code with Sanity Blueprints

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

Read individual 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

Source

git clone https://github.com/sanity-io/agent-toolkit/blob/main/skills/sanity-best-practices/SKILL.mdView on GitHub

Overview

Sanity Best Practices compile comprehensive guidelines for building, integrating, and optimizing Sanity applications. It covers integration guides for Next.js, Nuxt, Astro, Remix, SvelteKit, Hydrogen, along with GROQ performance, schema design, Visual Editing, images, Portable Text, page builders, and Studio setup.

How This Skill Works

The skill organizes content into reference files and topic guides (groq, schema, visual-editing, page-builder, portable-text, image, studio-structure, typegen, localization, migration). Each reference file includes code examples, decision matrices, and framework-specific patterns. Practitioners use these references to design, review, or optimize Sanity projects.

When to Use It

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

Quick Start

Step 1: Review reference files (groq.md, schema.md, nextjs.md) for patterns.
Step 2: Model your content schemas, set up Studio structure, enable localization.
Step 3: Implement GROQ queries, Visual Editing, and TypeGen; plan migrations.

Best Practices

Start with a solid Studio structure and project setup
Profile GROQ queries for minimal payloads and caching
Design schemas with clear field definitions, validation, and deprecation patterns
Leverage Visual Editing, live editing previews, and portable text components
Plan localization, migrations, and TypeGen from day one

Example Use Cases

Building a Next.js app with embedded Studio and Live Content API
Optimizing GROQ queries for large collections in a GROQ-aware app
Defining a robust content schema with validation and deprecation patterns
Implementing Visual Editing overlays and live previews in a frontend framework
Configuring Studio structure, desk layout, and TypeGen for types

Frequently Asked Questions

Add this skill to your agents