Agent skill · software engineering · aradotso
boneyard-skeleton-loading
boneyard-skeleton-loading — an agent skill for coding agents.
Why this skill is useful
Provides specific commands and integration patterns for generating skeleton loading screens that the AI wouldn't reliably generate on its own.
What it needs
Requires boneyard-js installed locally. About 4k tokens when loaded. Last updated 2026-07-09. 70 stars on the source repository.
What this skill does
bash npm install boneyard-js tsx 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> ) } bash npx boneyard-js build or specify your dev server URL npx boneyard-js build http://localhost:3000 tsx import './bones/registry' export default function RootLayout({ children }: { children: React.ReactNode }) { return ( <html lang="en"> <body>{children}</body> </html> ) } bash 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 tsx 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> ) } tsx 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> ) } tsx import { Skeleton } from 'boneyard-js/react' function PostList() { const { data: posts, isLoading } …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aradotso/boneyard-skeleton-loading