Back to Skills

sanity-best-practices

Sanity development best practices for schema design, GROQ queries, TypeGen, Visual Editing, images, Portable Text, Studio structure, localization, migrations, Sanity Functions, 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, Sanity Func

137stars18forksUpdated 5/18/2026

Security Assessment

Medium Risk(50/100)

Detected risks:

Secret Exposure([references/hydrogen.md] TOKEN=, [references/hydrogen.md] SECRET=, [references/visual-editing.md] token =)
Sensitive File Access([references/get-started.md] .env, [references/app-sdk.md] .env, [references/remix.md] .env)
Security Score50/100

About sanity-best-practices

The `sanity-best-practices` skill provides comprehensive guidelines and reference material for developers working with the Sanity content platform. It addresses common challenges in content modeling, schema design, GROQ query optimization, Visual Editing, image handling, Portable Text, Studio structure, TypeGen configuration, localization, and migrations. The skill also covers automation through Sanity Functions, infrastructure management with Blueprints, and integration with various frontend frameworks such as Next.js, Nuxt, Astro, Remix, SvelteKit, Angular, Hydrogen, and the Sanity App SDK. Its primary goal is to streamline Sanity development workflows, ensure code quality, and reduce errors when building or maintaining Sanity-based projects.

Key features include detailed integration guides for frontend frameworks, topic-specific reference files for core Sanity functionality, and best practices for schema design, content modeling, and type safety. It offers quick references for GROQ queries, Visual Editing, page builder configurations, image management, Studio organization, TypeGen workflows, SEO, localization, and content migrations. Additionally, the skill provides guidance on event-driven content automation, Blueprints for infrastructure as code, and custom applications leveraging Sanity Functions and the App SDK. Each reference includes correct and incorrect code examples, decision matrices, workflow guidance, and framework-specific patterns where applicable.

This skill is suitable for developers, technical leads, and content engineers who work with Sanity or integrate it into frontend applications. It is particularly useful for teams setting up new projects, onboarding developers, optimizing queries and content workflows, implementing live previews, managing Studio structure, or maintaining and refactoring existing codebases. By following these best practices, users can ensure consistent, maintainable, and efficient Sanity implementations while leveraging the platform's full capabilities.

FAQ

When should I apply the `sanity-best-practices` skill?

Apply this skill when setting up new projects, onboarding developers, integrating Sanity with frontend frameworks, designing schemas, optimizing GROQ queries, implementing Visual Editing and live preview, managing images and Portable Text, configuring Studio structure, setting up TypeGen, handling localization, migrating content, building custom apps with the App SDK, or automating workflows with Sanity Functions.

Which frontend frameworks are compatible with the integration guides?

The skill provides integration guides for Next.js, Nuxt, Astro, Remix, SvelteKit, Angular, and Shopify Hydrogen. Each guide includes framework-specific patterns and best practices for embedding Sanity Studio, live content updates, and efficient content fetching.

Does this skill cover content migration?

Yes, it includes reference files on content migration strategies, including general migration guidance and specific HTML to Portable Text transformations using @portabletext/block-tools.

Are there any prerequisites or limitations for using this skill?

Users should have a basic understanding of Sanity, JavaScript/TypeScript, and the frontend framework they intend to integrate. The skill focuses on best practices and guidance rather than providing custom APIs or automated scripts.

Can this skill help with type safety and schema validation?

Yes, it includes guidance on TypeGen configuration, workflow, and type utilities, as well as schema design patterns, validation rules, and deprecation handling.

All Files

25 files
references/get-started.md8.4 KB
View
references/app-sdk.md10.6 KB
View
references/localization.md11.1 KB
View
references/remix.md3.4 KB
View
references/functions.md16.7 KB
View
references/nextjs.md14.2 KB
View
references/studio-structure.md3.4 KB
View
references/groq.md9.0 KB
View
references/page-builder.md8.1 KB
View
references/typegen.md6.0 KB
View
references/angular.md18.4 KB
View
references/image.md3.3 KB
View
references/astro.md2.6 KB
View
references/hydrogen.md6.7 KB
View
references/portable-text.md9.8 KB
View
references/visual-editing.md8.1 KB
View
references/blueprints.md3.1 KB
View
references/migration.md2.0 KB
View
references/seo.md8.3 KB
View
references/migration-html-import.md3.4 KB
View
references/schema.md9.9 KB
View
references/nuxt.md2.3 KB
View
references/svelte.md3.9 KB
View
references/project-structure.md3.0 KB
View
SKILL.md3.7 KB
View

Install sanity-best-practices

Download and extract the skill files to your .claude/skills/ directory.

Quick Setup:

  1. Copy the skill folder to .claude/skills/
  2. Claude will automatically detect and use the skill