skills.rest
tokijh
tokijhCOMMUNITY
Explore all skills by this author →
GitHub

use-design-system/Skeleton

Implement a flexible Skeleton UI component for loading placeholders.

Updated Aug 23, 2026
Search Tags:#frontend#design system#ui component#skeleton#placeholder#loading state
One-click install
npx skills add https://github.com/tokijh/minapp --skill use-design-system-skeleton
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: use-design-system/Skeleton
Source: https://github.com/tokijh/minapp/tree/main/.claude/skills/use-design-system/subskills/Skeleton
Command: npx skills add https://github.com/tokijh/minapp --skill use-design-system-skeleton

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a flexible way to implement placeholder UI elements during content loading, improving the perceived performance and user experience of your application.

Core Features & Use Cases

  • Multiple Rendering Modes: Supports preset patterns, custom item arrays, and primitive components for diverse layout needs.
  • Customizable Placeholders: Allows fine-grained control over the appearance and arrangement of skeleton elements.
  • Use Case: When fetching data for a user profile page, use the Skeleton component to display a placeholder for the avatar, name, and bio while the actual data is being loaded.

Quick Start

Use the Skeleton component with the 'topList' pattern to display a loading placeholder.

Frequently Asked Questions about use-design-system/Skeleton

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I display loading placeholders while fetching data in a web application?▼

Loading placeholders display skeleton UI components during data fetching to improve perceived performance. You can use preset patterns or primitive text, circle, and rectangle components to map the exact layout of your pending content.

Can I customize the animation and style of skeleton loading states?▼

Skeleton loading states support animation control and style customization via props. This allows you to fine-tune the appearance and behavior of placeholder elements to match your application's design system.

What is the best way to structure complex placeholder layouts for a user profile?▼

Complex placeholder layouts use custom item arrays to arrange skeleton elements precisely. You can combine primitive text, circle, and rectangle components to mirror structures like avatars, names, and bios during content loading.

Do I need any external dependencies to implement skeleton UI components?▼

No external dependencies are required to implement skeleton UI components. The Skill operates independently to generate versatile loading placeholders through preset patterns and primitive components.

Are there preset patterns available for common loading state layouts?▼

Preset patterns are available for common loading state layouts, such as the 'topList' pattern. These presets provide a quick start for rendering placeholder UI without needing to manually configure individual items.

Related Skills

Explore More Design & Creative Skills→
Hyeonjun0527Hyeonjun0527
1

component-patterns

Define and apply standardized criteria for web component UI abstraction levels.

Community
Basic
TechsioCZTechsioCZ
2

skeleton-usage

Apply @techsio/ui-kit Skeleton components to preserve layout during content loading.

Official
Intermediate
Arnutt-NArnutt-N

loading-states

Create loading states and skeleton components for React/Next.js frontends.

Community
Advanced
prateekprateek

hig-components-status

Guide determinate and indeterminate progress indicator selection per Apple HIG.

Community
Intermediate