Skeleton

Name: Skeleton
Author: reaviz

ASecurity

Placeholder loading skeleton for content areas. Supports predefined shape variants and an optional shimmer animation.

4 stars
0 votes
0 copies
2 views
Added May 27, 2026

data-aitypescript

Security analysis

A100/100

Scanned May 27, 2026

npx -y skills add reaviz/skills --skill skeleton --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of Skeleton?

Add the live security badge to your README. It updates with every re-scan.

[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/reaviz-skeleton/badge)](https://www.skillsdirectory.com/skills/reaviz-skeleton)

More formats (shields.io, HTML) on the badges page. Keep it an A: scan every change in CI with Pro.

Download with Pro

SKILL.md

# Skeleton

Placeholder loading skeleton for content areas. Supports predefined shape variants and an optional shimmer animation.

## Import

```tsx
import { Skeleton } from 'reablocks';
```

## Skeleton Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `variant` | `'text' \| 'rounded' \| 'rectangle' \| 'square' \| string` | — | Predefined shape variant |
| `animated` | `boolean` | `false` | Enable shimmer pulse animation |
| `theme` | `SkeletonTheme` | — | Per-instance theme override |
| `className` | `string` | — | Additional CSS classes |
| `style` | `CSSProperties` | — | Inline styles |

Also accepts all standard `HTMLDivElement` attributes. Renders with `aria-busy="true"` and `aria-live="polite"`.

## Variants

```tsx
<Skeleton variant="text" />        {/* h-4 w-full — single text line */}
<Skeleton variant="rounded" />     {/* w-10 h-10 rounded-full — avatar circle */}
<Skeleton variant="rectangle" />   {/* h-24 w-full — wide rectangle */}
<Skeleton variant="square" />      {/* w-24 h-24 — square */}
```

## Animated

```tsx
<Skeleton variant="text" animated />
<Skeleton variant="rounded" animated />
```

## Custom Sizes

Use `className` or `style` for custom dimensions:

```tsx
<Skeleton className="h-2.5 w-48" animated />
<Skeleton className="h-10 w-full" animated />
<Skeleton style={{ width: 300, height: 200 }} animated />
```

## Card Placeholder Example

```tsx
<div className="flex items-center gap-4">
  <Skeleton variant="rounded" animated />
  <div className="flex-1 flex flex-col gap-2">
    <Skeleton className="h-4 w-1/3" animated />
    <Skeleton className="h-3 w-full" animated />
    <Skeleton className="h-3 w-4/5" animated />
  </div>
</div>
```

## Multiple Lines

```tsx
<div className="flex flex-col gap-2 w-64">
  <Skeleton className="h-4 w-full" animated />
  <Skeleton className="h-4 w-[90%]" animated />
  <Skeleton className="h-4 w-[80%]" animated />
  <Skeleton className="h-4 w-[70%]" animated />
  <Skeleton className="h-4 w-[60%]" animated />
</div>
```

## SkeletonTheme Interface

```typescript
interface SkeletonTheme {
  base: string;       // Base styles (rounded, bg color)
  animated: string;   // Shimmer animation (pulse gradient)
  variants: {
    text: string;
    rounded: string;
    rectangle: string;
    square: string;
    [key: string]: string;
  };
}
```