Skill

Boneyard Skeleton Loading

Generates pixel-perfect skeleton loading screens by snapshotting real DOM using boneyard-js. Wraps React components to show loading placeholders during data fetches.

React

Typescript

Javascript

Node

frontend

Install

npx claudepluginhub joshuarweaver/cascade-ai-ml-agents-misc-1 --plugin aradotso-trending-skills-37

Tool Access

This skill uses the workspace's default tool permissions.

Preview

```markdown

SKILL.md

Similar Skills

cache-components

Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.

cache-components

139.2k

mcp-builder

9 files

Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).

anthropics-skills-13

124.2k

canvas-design

20 files

Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.

anthropics-skills-13

124.2k

Stats

Stars36

Forks8

Last CommitApr 3, 2026

Actions

View Source View Plugin View on GitHub View README

Quick Setup

1. Wrap your component

import { Skeleton } from 'boneyard-js/react'

function BlogPage() {
  const { data, isLoading } = useFetch('/api/post')

  return (
    <Skeleton name="blog-card" loading={isLoading}>
      {data && <BlogCard data={data} />}
    </Skeleton>
  )
}

2. Build the bones

npx boneyard-js build
# or specify your dev server URL
npx boneyard-js build http://localhost:3000

3. Import the registry once (e.g. in `app/layout.tsx`)

import './bones/registry'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

Component API

`<Skeleton>` Props

Prop	Type	Default	Description
`name`	`string`	required	Unique identifier matching a built bones file
`loading`	`boolean`	required	When `true`, renders skeleton; when `false`, renders children
`color`	`string`	`#e0e0e0`	Fill color for bones (hex, rgb, etc.)
`animate`	`boolean`	`true`	Enable pulse shimmer animation
`snapshotConfig`	`object`	—	Control which elements are captured

CLI Commands

# Auto-detect dev server and build all skeletons
npx boneyard-js build

# Target a specific dev server URL
npx boneyard-js build http://localhost:3000

# Custom breakpoints and output directory
npx boneyard-js build --breakpoints 390,820,1440 --out ./public/bones

# Default breakpoints: 375px, 768px, 1280px

Code Examples

Basic data-fetching skeleton

import { Skeleton } from 'boneyard-js/react'

function UserProfile({ userId }: { userId: string }) {
  const [user, setUser] = useState(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(data => {
        setUser(data)
        setLoading(false)
      })
  }, [userId])

  return (
    <Skeleton name="user-profile" loading={loading}>
      {user && (
        <div className="profile">
          <img src={user.avatar} alt={user.name} />
          <h2>{user.name}</h2>
          <p>{user.bio}</p>
        </div>
      )}
    </Skeleton>
  )
}

With React Query

import { Skeleton } from 'boneyard-js/react'
import { useQuery } from '@tanstack/react-query'

function ProductCard({ productId }: { productId: string }) {
  const { data, isLoading } = useQuery({
    queryKey: ['product', productId],
    queryFn: () => fetch(`/api/products/${productId}`).then(r => r.json()),
  })

  return (
    <Skeleton name="product-card" loading={isLoading} color="#f0f0f0">
      {data && (
        <div className="product">
          <img src={data.image} alt={data.title} />
          <h3>{data.title}</h3>
          <span>${data.price}</span>
        </div>
      )}
    </Skeleton>
  )
}

List of skeletons

import { Skeleton } from 'boneyard-js/react'

function PostList() {
  const { data: posts, isLoading } = usePosts()

  // Show multiple skeleton placeholders while loading
  if (isLoading) {
    return (
      <div className="post-list">
        {Array.from({ length: 5 }).map((_, i) => (
          <Skeleton key={i} name="post-list-item" loading={true}>
            {null}
          </Skeleton>
        ))}
      </div>
    )
  }

  return (
    <div className="post-list">
      {posts.map(post => (
        <Skeleton key={post.id} name="post-list-item" loading={false}>
          <PostItem post={post} />
        </Skeleton>
      ))}
    </div>
  )
}

Custom color and no animation

<Skeleton
  name="dashboard-chart"
  loading={isLoading}
  color="#d4d4d4"
  animate={false}
>
  {data && <Chart data={data} />}
</Skeleton>

Snapshot config — exclude certain elements

<Skeleton
  name="nav-header"
  loading={isLoading}
  snapshotConfig={{
    exclude: ['button', '[data-no-skeleton]'],
    minWidth: 8,
    minHeight: 8,
  }}
>
  {data && <Header data={data} />}
</Skeleton>

Project Structure After Build

bones/
  registry.ts          ← import this once in app root
  blog-card.bones.json
  user-profile.bones.json
  product-card.bones.json

Each .bones.json stores a flat array of { x, y, w, h, r } rectangles captured at each breakpoint. The <Skeleton> component reads these at runtime and renders matching gray rectangles.

Next.js App Router Integration

// app/layout.tsx
import '../bones/registry'
import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'My App',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

Next.js Pages Router Integration

// pages/_app.tsx
import '../bones/registry'
import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

Workflow for New Skeletons

Add <Skeleton name="my-new-component" loading={...}> around your component
Make sure your dev server is running (npm run dev)
Run npx boneyard-js build
Commit the updated bones/ directory

Common Patterns

Conditional loading state with SWR

import useSWR from 'swr'
import { Skeleton } from 'boneyard-js/react'

const fetcher = (url: string) => fetch(url).then(r => r.json())

function ArticleView({ slug }: { slug: string }) {
  const { data, isLoading } = useSWR(`/api/articles/${slug}`, fetcher)

  return (
    <Skeleton name="article-view" loading={isLoading}>
      {data && (
        <article>
          <h1>{data.title}</h1>
          <p className="byline">By {data.author}</p>
          <div dangerouslySetInnerHTML={{ __html: data.content }} />
        </article>
      )}
    </Skeleton>
  )
}

Dashboard with multiple skeleton zones

import { Skeleton } from 'boneyard-js/react'

function Dashboard() {
  const { stats, statsLoading } = useStats()
  const { chart, chartLoading } = useChartData()
  const { activity, activityLoading } = useActivity()

  return (
    <div className="dashboard">
      <Skeleton name="stats-row" loading={statsLoading}>
        {stats && <StatsRow stats={stats} />}
      </Skeleton>

      <Skeleton name="main-chart" loading={chartLoading}>
        {chart && <MainChart data={chart} />}
      </Skeleton>

      <Skeleton name="activity-feed" loading={activityLoading}>
        {activity && <ActivityFeed items={activity} />}
      </Skeleton>
    </div>
  )
}

Troubleshooting

Skeleton name not found / blank skeleton shows

Run npx boneyard-js build — the bones file for that name hasn't been generated yet
Ensure the name prop exactly matches the one used during build
Confirm bones/registry is imported in your app root

Build command can't find dev server

Start your dev server first (npm run dev)
Pass the URL explicitly: npx boneyard-js build http://localhost:3000

Skeleton layout doesn't match real component

Re-run npx boneyard-js build after making layout changes
Bones are static snapshots — they must be regenerated after UI changes

Skeleton shows at wrong breakpoint size

Use --breakpoints to match your app's actual responsive breakpoints
```
npx boneyard-js build --breakpoints 390,768,1280,1920
```

Output directory issues

Default output is ./bones relative to project root
Change with --out: npx boneyard-js build --out ./src/bones
Update your registry import path accordingly

Boneyard Skeleton Loading

Install

Tool Access

Preview

SKILL.md

Similar Skills

Boneyard Skeleton Loading

Install

Tool Access

Preview

SKILL.md

Quick Setup

1. Wrap your component

2. Build the bones

3. Import the registry once (e.g. in app/layout.tsx)

Component API

<Skeleton> Props

CLI Commands

Code Examples

Basic data-fetching skeleton

With React Query

List of skeletons

Custom color and no animation

Snapshot config — exclude certain elements

Project Structure After Build

Next.js App Router Integration

Next.js Pages Router Integration

Workflow for New Skeletons

Common Patterns

Conditional loading state with SWR

Dashboard with multiple skeleton zones

Troubleshooting

Skeleton name not found / blank skeleton shows

Build command can't find dev server

Skeleton layout doesn't match real component

Skeleton shows at wrong breakpoint size

Output directory issues

Links

Similar Skills

Quick Setup

1. Wrap your component

2. Build the bones

3. Import the registry once (e.g. in app/layout.tsx)

Component API

<Skeleton> Props

CLI Commands

Code Examples

Basic data-fetching skeleton

With React Query

List of skeletons

Custom color and no animation

Snapshot config — exclude certain elements

Project Structure After Build

Next.js App Router Integration

Next.js Pages Router Integration

Workflow for New Skeletons

Common Patterns

Conditional loading state with SWR

Dashboard with multiple skeleton zones

Troubleshooting

Skeleton name not found / blank skeleton shows

Build command can't find dev server

Skeleton layout doesn't match real component

Skeleton shows at wrong breakpoint size

Output directory issues

Links

3. Import the registry once (e.g. in `app/layout.tsx`)

`<Skeleton>` Props

3. Import the registry once (e.g. in `app/layout.tsx`)

`<Skeleton>` Props