Feedback · core

Skeleton

feedback.skeleton

A skeleton reserves the shape of predictable content while that content is loading.

skeletonthe gray loading shapescontent placeholdershimmer loaderthe system messagethe progress or status indicator

States5

Touch targetDisplay

Evidence4

Introduced by8 kits

Visual specimen

Same contract. Every kit voice.

MAVAN renderingerror

Translation table

What code calls it.

Webstatus patternThis component is composed from multiple web primitives.pattern

ARIAstatusNo single ARIA role represents the complete component.pattern

SwiftUICustom View compositionSwiftUI has no single direct equivalent; compose and name the behavior explicitly.approximation

AppKitCustom NSView compositionAppKit has no single direct equivalent; use a custom view or controller composition.approximation

Anatomy

Every part, named.

1Status container
2Signal or progress indicator
3Primary message
4Optional supporting detail or dismissal

Often confused with

Similar shape. Different contract.

Spinnerfeedback.spinner

Shares a visual family, but has a different role, state model, or interaction contract.

Progress barfeedback.progress-bar

Shares a visual family, but has a different role, state model, or interaction contract.

Progress ringfeedback.progress-ring

Shares a visual family, but has a different role, state model, or interaction contract.

Prompt · paste into your agent

Ask for the exact thing.

Implement the canonical Skeleton component (feedback.skeleton). A skeleton reserves the shape of predictable content while that content is loading. Support these states: neutral, success, warning, error, loading. Use semantic design tokens rather than raw visual values. Preserve a minimum appropriatepx touch target where interactive. Provide and verify: implementation, state-matrix, responsive, reduced-motion. Keep the component API stable so every Studio kit can supply its own rendering without changing the behavior contract.

Studio contract

What must be proven.

Required states

neutral · success · warning · error · loading

Required evidence

implementation · state-matrix · responsive · reduced-motion

Source union

mavan · jade · lumen · aurora · cabana · purple-rain · spatial · margin