Skip to content
Frontend
Skill

/hairline-adopt

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

BOOST
From plugin
hairline
2k2 skills
Install
$ npx -y skills add lucasmarkes/hairline --skill hairline-adopt --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

  • Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
  • You can call itInvoke it directly when you want it.
  • Slash command/hairline-adopt

Context preview

The summary Claude sees to decide when to auto-load this skill.

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

SKILL.md

hairline-adopt.SKILL.md
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.

Read more
Ships withhairline

Thirty-three isometric line figures that answer the pointer. For React and for anything with a DOM. Live, with a slider for intensity: hairline.lucasmarkes.com

Get the whole plugin
Stats
2,064
Stars
121
Forks
Active
Maintenance
TypeScript
Language
MIT
License
1d ago
Last commit
14d ago
Created
8d ago
Added

Repo: lucasmarkes/hairline

Other skills on hairline.