/hairline-create a sales funnelfunnel
Four trays step down, each narrower with fewer beads: the stage under the pointer lifts, its neighbours rising less in turn.
Skill
Make your own figure
hairline-create is a skill for coding agents. Give it an idea and it draws a new figure to Hairline's ten rules, on the same engine as the nineteen in the docs, as one HTML file.
Install
npx skills add lucasmarkes/hairlineWhat you install is one folder of small text files. There is no npm install, and Node is only needed to run the checks.
How to use it
/hairline-create <idea>- Type the command with an idea. If you already have the metaphor, say it, and the concepts step is skipped.
- Out comes
hairline-<name>.html: one file with no dependencies that opens from disk, holding the figure, an intensity slider and a theme switch. - It runs on any agent that reads skills: Claude Code, Cursor, Codex and others.
How it works
- Concepts. It offers two or three concepts, one line each: the object, what the pointer does, what the read-out says. You pick one.
- Build. It writes only the figure. The engine and the page around it are pasted in as they are.
- Check. A script checks the file against the rules, then the agent looks at it in a browser.
- Hand over. You get the page, the metaphor it used, the rules it leans on, and anything it could not check.
- Adjust. Ask for changes while you use it. It edits the figure and checks again.
What it draws
Four ideas, four files. Each one opens from disk with no dependencies. Move the pointer over one.
/hairline-create a rate limiterclearance
Each second is a column of requests: a burst lifts the ones near the pointer, and none of them gets past the bar.
/hairline-create git branchessidings
A trunk line and three sidings: the track under the pointer is checked out, its wagons rising in turn to a bright head.
Then asked
The rails almost disappear and the trains read as loose blocks. Make it read as a railway at a glance./hairline-create weather over a citystorm
A cloud you steer over a district rains on the roofs under it; only the rain from its middle reaches them.
Then asked
The cloud looks like a stack of cylinders. Make it read as a cloud at a glance.The nineteen figures and their options are in the docs. The skill’s files are in its folder on GitHub.