Sanity Best Practices
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, the App SDK, and Studios or apps running in the Sanity Dashboard (defineApplication). 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,
Install
npx skills add sanity-io/agent-toolkit --skill sanity-best-practicesgit clone --depth 1 https://github.com/sanity-io/agent-toolkit.git /tmp/agent-toolkit
mkdir -p ~/.claude/skills
cp -r /tmp/agent-toolkit/skills/sanity-best-practices ~/.claude/skills/sanity-best-practicesPersonal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.
From the SKILL.md
# 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 - Developing or deploying a Studio or app in the Sanity Dashboard - 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
Details
- Skill name
sanity-best-practices- Repository
- sanity-io/agent-toolkit
- Path
skills/sanity-best-practices/SKILL.md- License
- MIT
- Repo updated
- 27 October 2026
- Listed in
- heilcheng/awesome-agent-skills
FAQ
What does the Sanity Best Practices skill do?
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, the App SDK, and Studios or apps running in the Sanity Dashboard (defineApplication). 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,
How do I install the Sanity Best Practices skill?
skills CLI (Claude Code, Cursor, Codex and more): npx skills add sanity-io/agent-toolkit --skill sanity-best-practices. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.
Is Sanity Best Practices popular?
It lives in sanity-io/agent-toolkit, which has 194 GitHub stars and 31 forks, and is included in 1 curated skill list.
Related skills
Content Modeling Best Practices
194sanity-io/agent-toolkit
Structured content modeling guidance for schema design, content architecture, content reuse, references versus embedded objects, separation of concerns, and taxonomies across Sanity and other headless CMSes. Use this skill when designing or refactoring content types, deciding field shapes, debating reusable versus nested content, planning omnichannel content models, or reviewing whether a schema is too page-shaped or presentation-driven.
SEO Aeo Best Practices
194sanity-io/agent-toolkit
SEO and AEO best practices for metadata, Open Graph, sitemaps, robots.txt, hreflang, JSON-LD structured data, EEAT, and content optimized for search engines and AI answer surfaces. Use this skill when implementing page SEO, technical SEO, schema markup, international SEO, AI-overview readiness, or improving content for Google, ChatGPT, Perplexity, and similar assistants.
Oil Icon
322oil-oil/oil-icon
生成风格统一的图标集合，通过宫格生图、切分和去背景交付透明 PNG。用户需要成套自定义图标、栏目图标或匹配品牌风格的图标时使用；不用于单个简单矢量图标或小尺寸密集功能符号。
React Email
208resend/resend-skills
Use when building HTML email templates with React components, adding a visual email editor to an application using the React Email visual editor, rendering emails to HTML, or sending emails with Resend. Covers welcome emails, password resets, notifications, order confirmations, newsletters, transactional emails, and the embeddable email editor component.
Dashmotion
184csthink/dashmotion
Create dark-themed, animated technical diagrams as self-contained HTML+SVG files — flowcharts whose connectors visibly flow, and architecture diagrams where requests travel as light dots through the system (Diagrid/Temporal landing-page style). Use this skill whenever the user asks for a flowchart, workflow, pipeline, process diagram, state machine, system architecture, infrastructure, cloud, microservices, or network topology diagram — and especially when they mention "animated", "flowing", "dynamic", "alive", "GIF-like", or want a diagram for a landing page, README, docs, or product demo. Al
D3 Viz
251chrisvoncsefalvay/claude-d3js-skill
Creating interactive data visualisations using d3.js. This skill should be used when creating custom charts, graphs, network diagrams, geographic visualisations, or any complex SVG-based data visualisation that requires fine-grained control over visual elements, transitions, or interactions. Use this for bespoke visualisations beyond standard charting libraries, whether in React, Vue, Svelte, vanilla JavaScript, or any other environment.
Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.