Claude Code skills

These skills use Boxline to read the web. Copy a skill’s folder into your project’s .claude/skills/ (or into ~/.claude/skills/ for every project) and call it with its slash command. They are open source, in the skills folder of the examples repository.

What they need

• A Boxline API key: npx @boxline/cli login, or BOXLINE_API_KEY in the environment.
• Either the MCP server (web_fetch, web_search, sessions) or the CLI (npx @boxline/cli search|fetch|crawl). design also runs measure.mjs with Node 18 or newer (npx -y -p @boxline/sdk node measure.mjs <url>).

Install a skill

Get the examples, then copy the skill you want into your project:

git clone https://github.com/Boxline-dev/examples.gitcp -r examples/skills/design .claude/skills/       # in your project

Then type its command in Claude Code, for example /design https://example.com. Keep your API key in the environment or in the CLI’s own saved login, never in a skill file or in your project.

web: a site map for agents

/web <url> writes web.md in your project: what a public website has and how to get around it, from its pages as a real browser renders them. It lists the routes, the navigation, each page’s buttons (by their exact label) and forms (fields, method, action), the flows (sign-up, search, checkout) as numbered steps, and which pages sit behind a sign-in.

• It crawls the site, same host, robots.txt respected, at most 15 pages: npx @boxline/cli crawl <url> --limit 15 --format html -o .boxline-web. With only the MCP server, it fetches the start page and up to 14 of its same-host links. A page that fails is skipped.
• It records only what is on the pages, with labels quoted exactly, and deletes .boxline-web when it is done.

Source: github.com/Boxline-dev/examples/skills/web.

design: a site’s design system, measured

/design <url> [more pages] writes DESIGN.md from what the site’s pages really use. One to three pages of the same site measure better than one: the home page plus, say, pricing and a docs page.

npx -y -p @boxline/sdk node measure.mjs <url> [<url> …] > /tmp/design.json

measure.mjs (in the skill’s folder) opens each page at 1440×900 and prints, for each: the page’s background, text color and base font; colors, fonts, spacing, radii and shadows, by how often they occur; distinct components (buttons, inputs, cards); the CSS custom properties on :root as tokens; and whether the style sheets have dark-mode rules. The skill writes only measured values, and never invents one.

Source: github.com/Boxline-dev/examples/skills/design.

learn: a skill from today’s docs

/learn <topic> searches for a topic’s official documentation, reads it in a real browser, and saves a skill, so later work uses today’s APIs instead of stale training data.

• /learn <topic>: one topic, read in depth (3 to 5 pages).
• /learn batch <topic> <topic> …: several topics, quickly (2 pages each).
• --global: save to ~/.claude/skills/ instead of the project’s .claude/skills/.

It prefers the official docs site, then the official repository, and skips tutorials, aggregators and forums. A page over 80,000 characters, or one that fails, is skipped. The skill is saved as .claude/skills/<topic>/SKILL.md, under 300 lines (200 in batch mode), and the skill asks before it replaces one that exists.

Source: github.com/Boxline-dev/examples/skills/learn.

skill-tree: a graph of linked notes

/skill-tree <topic-or-url> turns a topic’s official docs into 8 to 20 small concept notes (30 to 150 lines each) that link to each other with [[wikilinks]], plus an entry SKILL.md so the folder loads as a skill. An agent can follow the links instead of reading one long file. It saves to .claude/skills/<topic>/ (or ~/.claude/skills/<topic>/ with --global), asks before replacing a folder, and prints the tree when it is done.

Source: github.com/Boxline-dev/examples/skills/skill-tree.

harness: a CLAUDE.md from real mistakes

/harness tries the everyday tasks in your project, notes every wrong assumption, and writes CLAUDE.md (under 150 lines) and AGENTS.md (under 50) made only of rules those mistakes earned. When a CLAUDE.md exists, it writes CLAUDE.harness.md next to it and offers to merge.

It leaves your code as it was: every change it makes while trying a task is undone.

• /harness: the 4 core tasks (run the tests, run the build, run the linter, find the entry point).
• /harness --full: all 8 tasks.
• /harness --clean-machine: also runs install, test, build and lint in a fresh Boxline shell machine, to find what a fresh checkout needs.

Source: github.com/Boxline-dev/examples/skills/harness.

Where they come from

Adapted from the skills in hyperbrowserai/examples (MIT licence): learn merges learn and learn-batch; design measures computed styles instead of using a branding API; skill-tree saves a SKILL.md entry point so the graph loads as a skill; harness can run the project in a clean machine. See all examples.