api-cms-sanity
Structured content platform — GROQ queries, schema definitions, @sanity/client, Portable Text, image handling, real-time listeners, mutations, TypeGen
npx skills add majiayu000/claude-skill-registry --skill api-cms-sanity --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
What it does
Sets up patterns and guidance for using Sanity as a structured content platform, including client creation, GROQ querying, schema definitions with defineType/defineField, rendering Portable Text, image URL building, mutations (create/patch/delete/transactions), real-time listeners with client.listen(), and TypeGen for type-safe GROQ queries.
How it works
- Client setup with createClient: demonstrates configuring projectId, dataset, apiVersion (dated like '2025-02-19'), and useCdn (true for public reads, false for authenticated/fresh data).
- GROQ queries: shows using defineQuery and parameterized queries with $param, including filtering, projection, ordering, and slicing.
- Schema definitions: uses defineType, defineField, and defineArrayMember to model document types, fields, references, and rich content; includes previews.
- Portable Text rendering: uses @portabletext/react with custom components for image, code blocks, links, and marks; demonstrates rendering with a PortableText value.
- Image URL builder: uses @sanity/image-url via createImageUrlBuilder, and provides a urlFor helper with responsive image examples and width-based srcSet.
- Mutations: covers create, createOrReplace, patch (set, inc, unset, insert), delete, and transactions with commit calls.
- Real-time listeners: shows subscribing to client.listen() with a GROQ filter, handling next/error, and unsubscribing.
- TypeGen: mentions generating TypeScript types from schemas and GROQ queries using defineQuery for type-safe queries.
When to use it
- When setting up @sanity/client for data fetching
- When writing GROQ queries (filters, projections, joins, ordering, slicing)
- When defining content schemas with defineType/defineField
- When rendering Portable Text in a UI
- When generating image URLs with @sanity/image-url
- When performing mutations (create, patch, delete, transactions)
- When configuring real-time listeners with client.listen()
- When generating TypeScript types with Sanity TypeGen
What it can touch
- Client interactions via @sanity/client (createClient, fetch, create, createOrReplace, patch, delete, transaction, listen)
- GROQ utilities via groq and defineQuery
- Schema tooling via defineType, defineField, defineArrayMember
- Portable Text rendering via @portabletext/react
- Image URL building via @sanity/image-url and urlFor
- Type generation via Sanity TypeGen and defineQuery
Caveats
- The guidance requires setting apiVersion to a dated string when creating the client to avoid legacy API behavior.
- Use useCdn: true for public reads and useCdn: false for authenticated or fresh data.
- Parameterized GROQ queries must use $param placeholders rather than interpolating user input directly.
- Drafts handling is emphasized: drafts have _id prefixed with drafts. and may not be included in published perspectives unless explicitly queried.
- This pattern emphasizes TypeGen integration and naming/export conventions per project standards.
# Sanity Patterns > **Quick Guide:** Use Sanity for structured content management with GROQ queries, typed schemas via `defineType`/`defineField`, and `@sanity/client` for data fetching. Always set `apiVersion` to a dated string, use `useCdn: true` for public reads, handle draft documents explicitly, use `@sanity/image-url` for image transformations, and render rich text with `@portabletext/react`. Generate TypeScript types with `sanity typegen generate`. --- <critical_requirements> ## CRITICAL: Before Using This Skill > **All code must follow project conventions in CLAUDE.md** (kebab-case, named exports, import ordering, `import type`, named constants) **(You MUST always set `apiVersion` on `createClient` to a dated string like `'2025-02-19'` — omitting it uses a legacy API that may break)** **(You MUST use `useCdn: true` for public read queries and `useCdn: false` when using a token or needing fresh data)** **(You MUST use parameterized GROQ queries (`$param`) for any dynamic values — never interpolate user input into GROQ strings)** **(You MUST handle drafts explicitly — draft documents have `_id` prefixed with `drafts.` and are not returned by default with `perspective: 'publis
- CRITICAL: Before Using This Skill
- Philosophy
- Core Patterns
- Pattern 1: Client Setup with createClient
- Pattern 2: GROQ Queries with Filters and Projections
- Pattern 3: Schema Definitions with defineType and defineField
- Pattern 4: Portable Text Rendering
- Pattern 5: Image URL Builder
- Pattern 6: Mutations (Create, Patch, Delete)
- Pattern 7: Real-Time Listeners
- Pattern 8: TypeGen for Type-Safe GROQ
- Decision Framework
- useCdn: true vs false
- Draft Handling
What does the api-cms-sanity skill do?
Structured content platform — GROQ queries, schema definitions, @sanity/client, Portable Text, image handling, real-time listeners, mutations, TypeGen
How do I install it?
Run `npx skills add majiayu000/claude-skill-registry --skill api-cms-sanity --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From majiayu000/claude-skill-registry, a repository with 534 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.