Community画像github.com

parthkapoor15/skill-library

SVG図形(アイコン、ロゴ、イラスト)を等角投影の線画フィギュア「Hairline」に変換するスキル。ポインター操作に応答するジェスチャーを付与します。

skill-library とは?

このスキルは、ユーザーが提供したSVGファイル(アイコン、ロゴ、イラストなど)を解析し、@lucasmarkes/hairlineエンジン上で動作する等角投影の線画フィギュアとして再構築します。元のSVGをアニメーション化したりトレースしたりせず、図形のプロポーションとパーツを保持した新しい立体フィギュアを生成し、さらにポインター操作に応答するジェスチャーを追加します。Cline、Claude Code、Cursor、CodexなどのAIエージェントプラットフォームで動作し、ユーザーが指定したファイルパスを`/hairline-create`コマンドで受け取ります。ジェスチャーが指定されていない場合は、AIが自動的に提案します。図形が他社の商標である場合、引き渡し時にその旨を明示する必要があります。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/parthkapoor15/skill-library/tree/HEAD/skills/hairline/hairline-adopt

Installed? Explore more 画像 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

Hairline: 図形を採用する

ユーザーは図形を所持しており、それをHairlineフィギュアとして生き生きとしたものにしたいと考えています。このスキルは図形を読み取り、Hairlineエンジン上でそのオブジェクトをソリッドとして再構築し、ジェスチャーを付与します。SVG自体をアニメーション化したり、トレースしたりすることは決してありません。図形はアイデンティティを提供し、フィギュアはそのプロポーションとパーツを保持して新たに構築されます。

必要なもの

  • 1つの .svg ファイル:アイコン、ロゴ、イラスト。複数ある場合は、一度に1つのフィギュアを作成します。どれを先にするか尋ねてください。
  • オプションで、ポインターがそれに対して何をするか。これがない場合、コンセプトがジェスチャーを提案します。

実行手順

ファイルのパスを指定して /hairline-create を呼び出し、その後にユーザーがジェスチャーについて述べたことをそのままの言葉で続けます。ステップ0で図形を読み取り、オブジェクトとそのパーツを確定します。その後、コンセプトはそれらを保持したままジェスチャーが異なるものになります。または、ジェスチャーが指定された場合は、フォームと読み上げが異なるものになります。それ以降のすべて(ビルド、チェック、引き渡し)は、そのスキルの役割です。

伝えるべきこと

コンセプトを提示する際は、最初に1行で、図形を何として読み取ったか、およびどのパーツを保持したかを述べてください。ユーザーが読み取りを修正した場合は、いずれのコンセプトも構築される前に、ユーザーの方法で再度読み取ってください。

図形が他社に属するマークである場合は、引き渡し時にその旨を伝えてください:このページには他社のマークが表示されており、公開するかどうかはその会社次第です。

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

関連スキル