Skip to main content
skill CX Codex

hairline-adopt — Claude Code skill: what it does, how to install

Rebuilds an icon or logo from an SVG into an isometric line figure on the @lucasmarkes/hairline engine, with a gesture that answers the pointer.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add lucasmarkes/hairline --skill hairline-adopt -a claude-code
Open on GitHub

What hairline-adopt does

The skill takes one SVG (an icon, a logo, an illustration) and rebuilds the drawn object from scratch: solids on the @lucasmarkes/hairline engine, isometric, line only. It does not animate your file and it does not trace it. The drawing supplies the identity and the parts; the figure is built new with the same proportions.

Under the hood it hands off to /hairline-create, passing the file path and, if you said one, the gesture that should answer the pointer. Step 0 reads the drawing and fixes the object and its parts. The concept options then keep those parts and vary the gesture or, when a gesture was given, vary the form and the read-out. Building, checking and the hand-over belong to that skill.

One .svg is the prerequisite. Hand it several and you get one figure at a time; it asks which comes first. Skip the gesture and the concepts propose one. Before anything is built, it says in a line how it read the drawing and which parts it kept, so a wrong reading gets corrected early. A mark that belongs to someone else is worth raising with its owner, and it says so at hand-over.

What it helps with

  • turn a flat icon into a figure that reacts to the pointer
  • rebuild a logo as an isometric line object
  • keep a drawing's proportions without tracing it
  • pick which SVG to start with when several are at hand
  • flag a third-party mark before the figure reaches a page

Example prompts for the agent

  • /hairline-adopt public/logo.svg
  • /hairline-adopt assets/icon.svg the figure turns toward the cursor
  • /hairline-adopt hero.svg — tilt the figure slightly as the pointer moves

How to install hairline-adopt

1Skills CLI (Vercel)

npx skills add lucasmarkes/hairline --skill hairline-adopt -a claude-code

2Manually: put the files in place

~/.claude/skills/hairline-adopt/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/hairline-adopt/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about hairline-adopt

How do I install hairline-adopt in Claude Code?

Run npx skills add lucasmarkes/hairline --skill hairline-adopt -a claude-code. The skill lands at ~/.claude/skills/hairline-adopt/SKILL.md.

What does hairline-adopt do?

It reads an SVG and rebuilds the object as an isometric line figure on the @lucasmarkes/hairline engine, adding a gesture that responds to the pointer. The SVG itself is neither animated nor traced.

What do I need to give it?

One .svg file. A gesture is optional: describe it or let the concepts propose one. With several files it builds a single figure at a time and asks which comes first.

Source text

SKILL.md · MIT
---
name: hairline-adopt
description: Use when someone has an SVG (an icon, a logo, an illustration) and wants it as a Hairline figure, or runs /hairline-adopt with a file. Reads the drawing, rebuilds its object as an isometric line figure on the engine of @lucasmarkes/hairline, and gives it a gesture that answers the pointer.
argument-hint: "<file.svg> [what the pointer does]"
---

# Hairline: adopt a drawing

The person has a drawing and wants it alive, as a Hairline figure. This skill reads the drawing, rebuilds its object as solids on Hairline's engine, and gives it a gesture. It never animates the SVG itself, and it never traces it: the drawing gives the identity, and the figure is built new, with its proportions and its parts.

## What it needs

- One `.svg` file: an icon, a logo, an illustration. Given several, make one figure at a time: ask which comes first.
- Optionally, what the pointer should do to it. Without it, the concepts propose the gesture.

## What to do

Invoke `/hairline-create` with the file's path and, after it, whatever the person said about the gesture, in their words. Its step 0 reads the drawing and fixes the object and its parts; its concepts then keep them and differ in the gesture, or, when the gesture was given, in the form and the read-out. Everything after that, the build, the check and the hand-over, is that skill's.

## What to say

When you offer the concepts, say first, in one line, what you read the drawing as and which of its parts you kept. If the person corrects the reading, read it again their way before any concept is built.

If the drawing is a mark that belongs to someone else, say so at hand-over: the page shows another company's mark, and it is theirs to publish or not.

© lucasmarkes · MIT · lucasmarkes/hairline

Similar skills

Everything for Design →

From the same set2

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor