메뉴
Build features with the Sanity App SDK (@sanity/sdk-react) and Sanity UI. Use when adding components, fetching or editing Sanity content, or working with hooks like useDocuments, useDocument, useDocumentProjection, useEditDocument, or useQuery.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Build features with the Sanity App SDK (@sanity/sdk-react). Use when adding components, fetching or editing Sanity content, or working with hooks like useDocuments, useDocument, useDocumentProjection, useEditDocument, or useQuery.
Use when writing, adding, or modifying e2e tests for CLI commands in packages/@sanity/cli-e2e/. Triggers on e2e test creation, new command test coverage, or changes to CLI test infrastructure.
Use when creating git commits - enforces conventional commit format with correct type prefixes for release-triggering vs non-release changes
Use this for writing or reviewing Sanity product UI copy: Studio UI text, error/validation messages, empty states, tooltips, buttons, status/confirmation dialogs, onboarding flows, CLI output, and API error responses. Trigger whenever you see UX writing, product copy, or interface text for Sanity (Studio, CLI, API), especially errors or system messages.
| name | sanity-app-sdk |
| description | Build features with the Sanity App SDK (@sanity/sdk-react) and Sanity UI. Use when adding components, fetching or editing Sanity content, or working with hooks like useDocuments, useDocument, useDocumentProjection, useEditDocument, or useQuery. |
If the Sanity MCP server is configured, call its get_sanity_rules tool with the app-sdk rule before writing SDK code. That rule is maintained by Sanity, is more detailed, and supersedes the notes below. The notes below are a fallback for when MCP is not available.
useDocuments / usePaginatedDocuments: lists of documents. Returns document handles, not full documents.useDocumentProjection: read specific fields from a handle, for display.useDocument plus useEditDocument: read and write a single document in real time.useQuery: raw GROQ. Use sparingly; prefer handles plus projections.Fetch handles first, then spread them into other hooks:
const {data} = useDocuments({documentType: 'article'})
// in a child component receiving one handle:
const {data: fields} = useDocumentProjection({...handle, projection: '{title}'})
Use documentId as the React key when rendering lists, never the array index.
Data hooks suspend while loading. Wrap every data-fetching component in <Suspense> with a fallback, keep one fetching hook per component, and always pass a fallback to SanityApp. All SDK hooks must be used inside SanityApp.
Write through useEditDocument on change so content stays in sync with the Content Lake:
const {data: title} = useDocument({...handle, path: 'title'})
const editTitle = useEditDocument({...handle, path: 'title'})
// <input value={title ?? ''} onChange={(e) => editTitle(e.currentTarget.value)} />
Do not hold document field values in useState and save on submit. That pattern goes stale and loses concurrent edits.
This app wraps everything in Sanity UI's ThemeProvider (see src/SanityUI.tsx, built with buildTheme()). Build UI with Sanity UI primitives like Card, Stack, Flex, Text, and Button. See https://www.sanity.io/docs/app-sdk/sanity-ui-sdk and https://www.sanity.io/ui.
Fetch these for current detail rather than relying on the notes above: