# Create Interactive Hairline Figures

Interactive line illustrations require consistent geometry, motion, and visual checks. This skill guides concept selection, builds a standalone HTML figure, and checks its structure and appearance.

## Install

```bash
npx skillstore add lucasmarkes/hairline-create
```

## Metadata

- Status: approved
- Slug: lucasmarkes-hairline-create
- Skillstore revision: r1
- Version status: missing
- Tree hash: 88dfb00cc5ceeacd824818d714d259aa54a24a0d7b946e10de8ddef6642b3ff9
- Author: lucasmarkes
- GitHub username: lucasmarkes
- License: MIT
- Repository: https://github.com/lucasmarkes/hairline/tree/c3692e0c797956268847d843949f79714b6f7a41/skills/hairline-create
- Ref: 3c8a6986844d0f4d66f39545ffafc38ca8115923
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: external\_commands, scripts, filesystem, env\_access, network
- Quality score: 70
- Public page: https://skillstore.pages.dev/skills/lucasmarkes-hairline-create
- Manifest: https://skillstore.pages.dev/api/skills/lucasmarkes-hairline-create/manifest

## Capabilities

- Offer two or three concepts describing an object, pointer response, and short readout.
- Create rounded isometric figures using the supplied geometry, spring, tween, and pointer helpers.
- Assemble the fixed engine, page template, and figure into one self-contained HTML file.
- Check syntax, kernel integrity, template consistency, required interfaces, and prohibited figure patterns.
- Capture eight browser views covering rest, pointer response, thumbnail size, slider endpoints, and both themes.
- Report frame bounds, readouts, console errors, and whether drawings settle during browser inspection.

## Use Cases

- Prototype a Pointer Interaction: Explore how a tray, stack, or field responds to pointer movement before adapting the interaction to a product.
- Build a Shareable Illustration: Create a standalone HTML line figure with theme switching, an intensity slider, and no runtime external assets.
- Explain a Process Through an Object: Translate a process into a recognizable physical metaphor with one gesture and a short readout.

## Prompt Templates

### Choose a Concept

```
Suggest three Hairline concepts for [idea]. Describe each object, pointer response, and short readout. Wait for my choice before building.
```

### Create a Figure

```
Create a Hairline figure of [object] that [pointer action]. Use the supplied engine and page, then validate the HTML. Ask before installing dependencies.
```

### Inspect Every State

```
Inspect [figure file] using [answer point] and [edge points]. Capture the eight views, report failures, and inspect the sheet. Ask before installing dependencies.
```

### Refine Without Changing the Engine

```
Refine [figure file] to [requested change]. Edit only the figure, preserve stable hit areas, rerun validation, and disclose unverified checks. Ask before installing dependencies.
```

## Limitations

- Figures must follow the fixed Hairline engine, ten style rules, 400 by 320 drawing frame, and 200-line source limit.
- Automated validation requires Node; screenshot inspection also requires npm, Playwright, and a compatible browser.
- The screenshot helper may download dependencies into a user cache; installation requires security review and controlled permissions.
- Visual quality needs human inspection, and text validation does not guarantee security isolation.

## Best Practices

- Choose one recognizable object, one pointer gesture, and a composed rest pose before writing the figure.
- Keep the engine and page unchanged, and review dependency installation before running browser inspection.
- Validate after every edit, inspect all eight views, and disclose any checks that could not be performed.

## Anti Patterns

- Modify the engine or page template to work around a figure problem.
- Add labels, icons, custom colors, or independent animation timers inside the drawing.
- Treat a passing text validator as proof of visual quality or security isolation.

## Security Audit

- Audited at: 2026-10-04T13:37:47.382\+00:00
- Summary: Most static matches are benign JavaScript syntax, documentation, CSS, or intended local file operations. Automatic npm installation exposes the host to mutable dependencies and enabled lifecycle scripts, while browser inspection lacks network isolation. No evidence found of credential theft, malicious supplied figures, or audit-directed prompt injection.

## Stats

- Views: 0
- Downloads: 0
- Favorites: 0
- Popularity score: 0