当用户拥有一个 SVG（图标、徽标、插图）并希望将其转化为 Hairline 图形，或执行 /hairline-adopt 命令时使用。该技能读取绘图，将其对象重新构建为基于 @lucasmarkes/hairline 引擎的等轴测线条图形，并赋予其响应指针的手势。
该技能专为将静态 SVG 绘图（如图标、徽标或插图）转化为动态的 Hairline 交互式图形而设计。它并不直接动画化或描摹原始 SVG，而是分析其形状结构，识别关键部件，然后基于 Hairline 引擎（由 @lucasmarkes/hairline 提供）全新构建一个等轴测线条图形。构建的图形会获得一个手势，使其能够响应指针（鼠标或触摸）的交互。技能的核心流程是：接收 SVG 文件路径，通过 /hairline-create 命令启动；步骤 0 负责读取并解析绘图，确定对象及其部件；随后的概念会保持这些部件，但在手势或读取形式上有所差异。此技能适用于需要对静态设计资源添加交互式动态效果的设计师或开发者，支持通过文件路径或 /hairline-adopt 命令调用。输出时，技能会智能提供多个概念选项（手势或形式不同），并允许用户纠正读取结果。
npx skills add https://github.com/parthkapoor15/skill-library/tree/HEAD/skills/hairline/hairline-adoptInstalled? Explore more 图像 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →
用户有一张绘图，希望它活过来，成为 Hairline 图形。此技能读取绘图，将其对象重新构建为 Hairline 引擎上的实体，并赋予其一个手势。它从不动画化 SVG 本身，也从不描摹它：绘图提供身份，而图形是全新构建的，拥有其比例和部件。
.svg 文件：图标、徽标或插图。如果提供多个文件，每次只制作一个图形：询问哪个优先。调用 /hairline-create，传入文件路径，以及之后用户关于手势的描述（用他们自己的话）。其步骤 0 会读取绘图并固定对象及其部件；其概念随后保持这些部件，但在手势上有所不同，或者当手势已给出时，在形式和读出口径上有所不同。之后的所有操作——构建、检查和交接——均属该技能范畴。
当你提供概念时，首先用一行话说明你读出了什么，以及保留了哪些部件。如果用户纠正了读取结果，在构建任何概念之前，按他们的方式重新读取。
如果绘图属于其他人的标志，在交接时声明：页面展示的是另一家公司的标志，是否发布由该公司决定。
This repo contains 1 individual skill — each has its own dedicated page.
Generate spectrograms and feature-panel visualizations from audio with the songsee CLI.
Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build web components, pages, or applications and the visual direction matters as much as the code quality.
Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.
Add documentation for a new AI provider — usage docs, env vars, Docker config, image resources.
Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze network requests, profile performance, or verify visual output with real runtime data. Requires the chrome-devtools MCP server to be configured.
This skill should be used when the user wants to visualize data. It intelligently selects the most suitable chart type from 26 available options, extracts parameters based on detailed specifications, and generates a chart image using a JavaScript script.