UI Skillbook
2

Skeleton

Decorative shapes that stand in for content while it loads, keeping the layout steady.

UI SkillbookSiteplane docsSiteplane UI 1.8.1
Works withClaude CodeCodexCursorOpenCodeUniversal
Install

Run npx uiskillbook get siteplane-skeleton and follow the Siteplane Skeleton skill it prints for this task.

Paste this into your agent.

Skeleton stands in for content whose shape you know, such as a card, a list row or table rows. Mirror the real layout so nothing shifts when the data arrives.

Install

bashnpx shadcn@4.18.0 add @siteplane/skeleton

Import it from @/siteplane/components/skeleton. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

  • vs Spinner: Pick Spinner instead when you can't predict the result's layout or the wait happens inside a control.
  • vs Progress: Pick Progress instead when you can measure how far along the work is.
  • vs Empty State: Pick Empty State once loading has finished and there is nothing to show.

Rules

  • Size each Skeleton with className to match the content that replaces it.
  • Mark the surrounding region busy and announce loading there; assistive technology skips skeletons.
  • Remove the placeholders as soon as the real content renders.
  • Skip skeletons for brief waits, where a flash of grey looks worse than nothing.

Reference

  • Skeleton docs, with every prop, part and example (Markdown)
  • Siteplane UI 1.8.1, Feedback. Read the installed source under src/siteplane before relying on an API.

Add to your agent

Print this skill from the terminal, or connect the whole catalog over MCP. Setup guides

CLI

npx uiskillbook get siteplane-skeleton

MCP server

https://www.uiskillbook.com/mcp

Questions

Related skills

Auditby pbakaus

Run technical UI quality audits across accessibility, performance, theming, responsive behavior, and anti-patterns.

AccessibilityExternalGitHub stars: 95.1K

Better Colorsby jakubkrehel

OKLCH color space for web projects. Convert hex/rgb/hsl to oklch, generate palettes, check contrast, handle gamut boundaries, and theme with Tailwind v4. Triggers on oklch, color conversion, palette generation, contrast ratio, gamut, display p3, design tokens, hue drift, chroma, dark mode colors.

VisualExternalGitHub stars: 9.2K

Better Interfaceby jakubkrehel

Run a holistic interface review across accessibility, layout, writing, typography, color, and visual polish.

VisualExternalGitHub stars: 9.2K

Better Typographyby jakubkrehel

Web typography from choosing fonts to spacing, wrapping and accessibility. Use when picking or pairing typefaces, configuring variable fonts or OpenType features, setting up a type scale, styling text in components, truncating text, styling underlines, selection, placeholders or carets, or reviewing frontend code for typography. Triggers on typography, fonts, font formats, woff2, variable fonts, font-weight, opentype, font-feature-settings, letter-spacing, line-height, type scale, tabular numbers, text-wrap, truncation, line clamp, underlines, text-decoration, text selection, iOS input zoom, font smoothing, text contrast, measure, line length, text-box, smart punctuation, drop cap.

TypographyExternalGitHub stars: 9.2K

Back to Siteplane UI