CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

sanity-form-component-suspense

Fix a Sanity Studio custom form component (components.input, components.field, components.item, or a plugin's form.components) that suspends without its own Suspense boundary, so it loads without layout shift and never blocks new documents. Use when the console warns "The custom input/field/item component ... suspended without a <Suspense> boundary of its own" or "A form component ... suspended without a <Suspense> boundary of its own", when a custom form component uses React.lazy, use(), App SDK hooks (useDocumentProjection, useQuery, useDocument) or another suspending data library, or when a field or array item shows a skeleton that never goes away on new documents.

80

Quality

100%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

Quality

Content

100%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

The body is a tightly written diagnostic-to-fix procedure: a short product-specific problem statement, a seven-step workflow with an explicit verification step, and one complete executable example that internalizes the workflow's own guidance (gating on _createdAt, matching fallback height, keeping renderDefault outside the boundary). No filler, no borrowed-context explanations, no structural waste.

DimensionReasoningScore

Conciseness

Every sentence carries non-obvious, product-specific facts ("Studio puts a fallback boundary around every field and every array item", "the list is virtualized and measures each row", "A promise created during render ... is thrown away while the component suspends on mount") with no explanation of general React/Suspense concepts. Matches the 5 anchor (lean, assumes competence, every token earns its place); not 4, because no section needs trimming.

5 / 5

Actionability

The body contains a complete, import-inclusive, copy-paste-ready TSX example (ModelSizeInput with Suspense, Skeleton fallback, useFormValue gating, useDocumentProjection) plus concrete directives like "Gate on useFormValue(['_createdAt'])" and "Keep props.renderDefault(props) outside the boundary". Matches the 5 anchor (fully executable code covering the common case); not 4, because the example has no gaps.

5 / 5

Workflow Clarity

Seven clearly sequenced steps from locating the component (including the DevTools Suspense tab for diagnosis and the production-minified-name caveat) to an explicit verification step ("Open a new document of the type and an existing one: the warning is gone, the rest of the form is editable right away, and nothing moves"). Matches the 5 anchor (clear sequence with explicit validation); the operation is non-destructive and steps 5–6 preempt the known failure modes, so no validation cap applies.

5 / 5

Progressive Disclosure

The skill is self-contained with no bundle files and clean, well-labeled sections (intro, Workflow, Example) that are easy to navigate; nothing in the body (a single cohesive procedure plus one example) would benefit from being split into a reference file. Matches the 5 anchor for a single-file skill with well-organized sections; not 4, because there are no organization gaps or content misplaced inline.

5 / 5

Total

20

/

20

Passed

Description

100%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

An exemplary description: it states a precise fix, enumerates the exact component slots and APIs involved, and gives three explicit "Use when" triggers including verbatim console-warning text. The length is justified by trigger coverage rather than padding, and every clause is user-sayable.

DimensionReasoningScore

Specificity

"Fix a Sanity Studio custom form component (components.input, components.field, components.item, or a plugin's form.components) that suspends without its own Suspense boundary, so it loads without layout shift and never blocks new documents" names exact component slots, the mechanism, and two concrete outcomes. This matches the 5 anchor (multiple specific concrete actions, comprehensive coverage); it is not 4 because there are no minor gaps — the exact component paths and both outcomes (no layout shift, no blocking of new documents) are stated.

5 / 5

Completeness

Both questions are answered explicitly: the "what" ("Fix a Sanity Studio custom form component ... that suspends without its own Suspense boundary") and the "when" ("Use when the console warns ... or when a custom form component uses React.lazy, use(), App SDK hooks ... or when a field or array item shows a skeleton that never goes away") with three concrete trigger clauses. This matches the 5 anchor; not 4, because the "when" could not be more explicit — it includes verbatim warning text.

5 / 5

Trigger Term Quality

The description quotes the console warnings verbatim ("suspended without a <Suspense> boundary of its own", both the "custom input/field/item component" and "A form component" variants) and lists the exact APIs a user would mention (React.lazy, use(), useDocumentProjection, useQuery, useDocument) plus the symptom "a skeleton that never goes away". This matches the 5 anchor — comprehensive natural trigger terms including synonyms; a 4 would require missing natural terms, and none are missing.

5 / 5

Distinctiveness Conflict Risk

The niche is clear and narrow (Sanity Studio custom form components that suspend), with triggers anchored to product-specific console warnings and SDK hooks. Minimal conflict risk with generic React or CMS skills; matches the 5 anchor (clear niche with distinct triggers) rather than 4, since no closely related skill would plausibly be triggered instead.

5 / 5

Total

20

/

20

Passed

Validation

100%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository

sanity-io/agent-toolkit

Path

skills/sanity-form-component-suspense/SKILL.md

Reviewed

Table of Contents

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.