Skip to content

Skills

Teach your agent the catalog

An agent that has never heard of Hoverlab writes its own loader, and it writes a worse one. A skill is a markdown file that tells it what is here — 1,126 effects, 307 blocks, pages and templates — which rung to reach for, and how to install it. Every skill is free.

Install one

terminal
npx hoverlab skill hoverlab

That writes .claude/skills/hoverlab/SKILL.md into the current project — the path Claude Code and Claude Desktop read. Start a new session and the agent picks it up. Run npx hoverlab skill with no id to list what is available, or --dir to write somewhere else if your agent keeps skills elsewhere.

A skill is plain markdown with two lines of front matter. Any agent that can read a file can use one — the install path is the only part that is Claude-specific.

What's available

SkillWhat it does
hoverlabBuild UI from the Hoverlab catalog — 1111 CSS effects, 15 shader effects, 307 React blocks, 126 pages and 32 templates, installed as source you own. Use when asked to add a button, loader, hero, pricing table, dashboard screen or a whole starter project, when asked to make an interface "look better", or when a design or Figma frame has to be turned into real components. Reach for it before writing a component from scratch.
hoverlab-landingCompose a marketing or landing page out of Hoverlab blocks with a house style that reads as designed rather than assembled — section order, spacing rhythm, type scale, motion budget and the specific block ids to reach for. Use when asked for a landing page, marketing site, product page, waitlist page or "a page that sells this".

Start with hoverlab — it covers the four rungs, the CLI verbs and the MCP tools, and it is the one that stops an agent hand-rolling a component that already exists. The rest add taste for a specific kind of work and assume the first one is present.

Read one without installing

Every skill is served from the public API, unauthenticated like the rest of it. ?format=raw returns the markdown itself, so an agent that can fetch a URL can be pointed straight at it.

terminal
curl https://hoverlab.dev/api/v1/skills
curl https://hoverlab.dev/api/v1/skills/hoverlab?format=raw

Skills and MCP together

They do different jobs and the pair is better than either alone. The MCP server gives an agent the ability to search and install; a skill gives it the judgement about when to. An agent with MCP and no skill has the tools and no reason to pick them up.

terminal
npx hoverlab skill hoverlab
claude mcp add hoverlab -- npx -y hoverlab mcp

Neither needs an account. The CLI, the API and the MCP server are all open — see the API docs for why.

Something wrong or missing here? Browse the catalog — every page in it links back to the source it documents.