Crosshair Skeleton is a skeleton loader (a skeleton screen) and an attention effect: use it to highlight one supporting element on a landing page, or as the loading state of a block that waits on data. Crosshair corners lock onto the element, a grid maps it, and cursors select every element inside, size labels and all, leaving a skeleton block in its exact shape. When the data lands, the real content swaps in element by element: no shimmer, no layout jump. This repository is the whole thing: one dependency-free ES module, adapters for React and Next.js, Vue and Svelte, and an agent skill for Claude Code and Codex.
Features
- A landing-page highlight. With
auto, it plays once when a hero visual, an image or a bento card scrolls into view, then shows the content after a short pause. No data needed.
- Draws your real layout. It reads what is inside the element: one bar per line of text at its real width, and buttons, chips, images, charts and inputs as blocks in their own shape and corner radius. When the data arrives it measures again, so the swap always lands on the real layout.
- Tables, lists and charts in one go. Table rows, list items, cards of one kind and chart bars are drawn as groups, all at once rather than one by one.
- Any element, any framework. Cards, charts, tables, forms, text, images, lists, video and code, in plain JavaScript, React, Next.js, Vue, Nuxt, Svelte, SvelteKit, Solid, Angular, Lit, Astro, Alpine or htmx. No CSS file, fonts or images to add.
- Light and dark. Every colour comes from the element's own text colour and the background behind it, so it matches your theme with no setup and follows a theme switch while it waits.
- Light on the CPU, big pages included. The long wait runs on the compositor with no JavaScript, off-screen skeletons don't build until they scroll in, and only what is on screen is animated: a skeleton over 3,000 rows hands over in one short task.
- Never in the way. Loads under 150 ms show nothing, a shown skeleton never flashes, the placeholder is
inert and aria-busy while loading, reduced motion gets a static skeleton, and nothing is left in the DOM afterwards.
- An agent skill. Drop the folder into Claude Code or Codex and ask for "a crosshair loading skeleton on the revenue card". AGENT-GUIDE.md gives agents the procedure, the pitfalls and a browser checklist.
| Drawing: cursors select each element | Waiting, in dark mode |
|---|
| |
When to use it
It is a cosmetic effect that draws the eye, so restraint is the point:
- Highlight one supporting element per section: the hero visual, an image container, the bento card you want noticed. Not the headline, copy, buttons or navigation.
- At most one per section and three per page. Most pages need one.
- Skip busy sections (long lists, pricing tables, logo walls): when a block looks crowded, the effect only adds noise.
- Keep the hero's largest element visible, so the page load Google measures is not delayed.
- In an app, use it as the loading state of one slow block of data, not on every card or widget.
The full rules, with what to use instead, are in SKILL.md.
Install
npm install crosshair-skeleton
Or copy crosshair-skeleton.js into your project. It is one file.
As an agent skill
Copy this folder into your agent's skills directory:
| Agent | Folder |
|---|
| Claude Code | ~/.claude/skills/crosshair-skeleton/ (or .claude/skills/ in a project) |
| Codex | ~/.codex/skills/crosshair-skeleton/ |
Others that read SKILL.md | Their skills folder |
Agents applying the skill should follow AGENT-GUIDE.md: the integration procedure, pitfalls seen on production UI, and a browser verification checklist.
Usage
import { crosshair } from "crosshair-skeleton";
const card = document.querySelector("#revenue");
const skeleton = crosshair(card); // loading starts
renderRevenue(card, await getRevenue()); // real content in place, still hidden
await skeleton.done(); // revealed, overlay removed
Declarative, for any framework or server-rendered HTML:
<section data-crosshair="loading" data-crosshair-reveal="flow">…</section>
<script type="module">
import { watch } from "./crosshair-skeleton.js"; // or "crosshair-skeleton" with a bundler
watch(); // set data-crosshair to anything else to reveal
</script>
React, Next.js, Vue and Svelte
// React, Next.js, Remix, Preact
import { useCrosshair } from "crosshair-skeleton/react";
const ref = useCrosshair(!data); // <div ref={ref}>…</div>
<!-- Vue, Nuxt: app.use(CrosshairSkeleton) from "crosshair-skeleton/vue" -->
<div v-crosshair="!data">…</div>
<!-- Svelte, SvelteKit: import { skeleton } from "crosshair-skeleton/svelte" -->
<div use:skeleton={!data}>…</div>
Each adapter is tested against the real framework: the skeleton appears, the real data is revealed, a reload restarts it and an unmount mid-load leaves nothing behind. Tested: React 19 (Strict Mode), Preact 10, Vue 3.5, Svelte 5, Solid 1.9, Lit 3 (shadow DOM), Alpine 3 and htmx 2. React and Vue also server-render cleanly (Next.js, Nuxt). Solid, Angular, Lit, Astro, Alpine and htmx patterns, every option, part hints and theming are in SKILL.md.
This is the beginning of the README. Read the rest at the original. Read the full README ↗
