skills.rest
ebecerra-developer
ebecerra-developerCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

sanity-best-practices

Provides Sanity development guidelines for schemas, GROQ queries, TypeGen, and framework integrations.

Updated Mar 6, 2026
Search Tags:#schema design#groq#headless cms#visual editing#sanity#typegen#framework integration
One-click install
npx skills add https://github.com/ebecerra-developer/ebecerra-web --skill sanity-best-practices-ebecerra-developer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sanity-best-practices
Source: https://github.com/ebecerra-developer/ebecerra-web/tree/main/.agents/skills/sanity-best-practices
Command: npx skills add https://github.com/ebecerra-developer/ebecerra-web --skill sanity-best-practices-ebecerra-developer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Developers working with Sanity often struggle with correct schema design, efficient GROQ queries, type-safe integrations, and framework-specific setup across Next.js, Nuxt, Astro, Angular, and other stacks. This Skill consolidates official best practices into topic-specific reference guides so you apply the right pattern immediately. ## Core Features & Use Cases - Framework Integration Guides: Step-by-step rules for Next.js, Nuxt, Astro, Remix, SvelteKit, Angular, Hydrogen, and the Sanity App SDK, covering data fetching, Portable Text rendering, and image optimization. - Content Modeling & Querying: Schema design with defineType and defineField, GROQ performance rules, query fragments, and TypeGen workflows for end-to-end type safety. - Advanced Platform Features: Visual Editing with Presentation and Stega, localization patterns, content migration, Sanity Functions for event-driven automation, and Blueprints for infrastructure as code. - Use Case: When building a Next.js blog backed by Sanity, load the nextjs and groq references to set up defineQuery-based fetching, Live Content API, and optimized image queries with LQIP placeholders. ## Quick Start Ask the assistant to apply Sanity best practices when creating a schema, writing a GROQ query, or integrating Sanity with your frontend framework.

Frequently Asked Questions about sanity-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I integrate Sanity with Next.js App Router?▼

Install @sanity/client, @sanity/image-url, and @portabletext/react, then create a client with your projectId, dataset, and a dated apiVersion. Fetch data in Server Components using defineQuery-wrapped GROQ queries, and follow the nextjs reference for Live Content API and embedded Studio setup.

How do I write performant GROQ queries in Sanity?▼

Use optimizable filters like _type, _id, slug.current, and defined() so queries use indexes, and always project only the fields you need. Avoid reference resolution (->) inside filters, order before slicing, and use cursor-based pagination instead of deep slices.

Does Sanity support Visual Editing in Angular?▼

Angular has no official Visual Editing support—there is no Stega encoding or click-to-edit overlay integration. You can build a basic preview mode with a token-authenticated client using the drafts perspective, or try the community library @limitless-angular/sanity for experimental overlays.

What is the difference between document-level and field-level localization in Sanity?▼

Document-level localization uses @sanity/document-internationalization to create separate documents per language, ideal for pages and posts. Field-level localization uses sanity-plugin-internationalized-array for translated fields within one document, suited to structured content like products.

How do I prevent infinite loops in Sanity Functions?▼

Add a GROQ filter that excludes already-processed documents, such as checking that a computed field is not yet defined. Also use @sanity/client v7.12.0 or later, which sets lineage headers automatically to cap recursive invocation chains at 16.

When should I use Sanity Functions versus webhooks?▼

Use Sanity Functions when you need to read and mutate document data, enrich content, or call Agent Actions in response to content events. Use a plain webhook when you only need to notify an external URL on publish without shaping document data.

Related Skills

Explore More Software Engineering Skills→
etylsarinetylsarin
59

sanity-cms

Validate GROQ queries and schema edits for Sanity CMS projects.

Community
Intermediate
firebasefirebase
402

firebase-hosting-basics

Deploys web apps and services to Firebase Hosting with integrated CDN and SSL.

Official
Intermediate
tapanshahtapanshah

seo-sitemap

Analyze and generate XML sitemaps with URL validation and Google guideline adherence.

Community
Intermediate
PAIPaloozaPAIPalooza
2

Strapi Blog Post Featured Image Uniqueness

Enforce unique featured images for blog posts in Strapi CMS.

Official
Intermediate