create-svg-illustrations について
スライドやドキュメント向けに編集可能な SVG イラストを作成するスキルです。デザイン、アクセシビリティ、移植性、検証、対象レンダラーでの確認を案内します。
主な機能
- 01対象の寸法、配色、レンダラーの確認
- 02アクセシブルな説明付きの編集可能な SVG 作成
- 03アセットの移植性の確保
- 04svglint による検証と表示確認
- 05用途に応じた資料や例の参照
活用シーン
- 01スライドデッキ用の図の作成
- 02ドキュメントへの SVG イラスト埋め込み
- 03SVG の拡大縮小、切れ、コントラストの確認
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ narumiruna/ skills --skill create-svg-illustrationsインストール後、Claude Code で/create-svg-illustrationsを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
assets/examples/with-diagrams.mdreferences/core-rules.mdembedding.mdpattern-examples.mdtroubleshooting.md詳細
SVG イラスト
まず references/core-rules.md を確認し、成果物に必要な追加情報だけを読みます。
| 必要な情報 | 読むもの、または使うもの |
|---|---|
| キャンバス、スタイル、テキスト、アクセシビリティ、検証 | references/core-rules.md |
| 再利用可能な構成 | references/pattern-examples.md |
| Marp への埋め込み | references/embedding.md |
| レンダリングの失敗 | references/troubleshooting.md |
| 動作確認済みのデッキ例 | assets/examples/with-diagrams.md |
ワークフロー
- 対象のスライドまたはドキュメント、必要な寸法、周囲の配色、レンダラーを確認します。
- アイデアが伝わる、編集可能な最小限の SVG を作成します。適切な
viewBox、明示的なテキストスタイル、一貫性のある図形を使い、ビジュアルが意味を持つ場合は SVG のタイトルと説明を追加します。埋め込む場合は、references/embedding.mdの要件に従って、埋め込み先にも説明的な代替テキストを設定するか、隣接する同等の意味情報を用意します。SVG 内部のメタデータだけでは不十分です。 - アセットの移植性を保ちます。埋め込みフォント、説明のない絵文字、不要なフィルター、出力を自己完結させる必要がない場合の base64 コンテンツは避けます。
- 利用可能であれば
svglintで検証し、対象の成果物に SVG を開くか埋め込んで、クリッピング、拡大縮小、コントラスト、テキスト、相対パスを確認します。 - まず SVG の成果物を返し、その後に実施した検証と、レンダラーやフォントに関する注意点を記載します。
依頼にスライド作成や配色のガイダンスも含まれる場合に限り、それらを使用します。ソースの検証しか行っていない場合は、見た目を確認したと主張しないでください。また、依頼がない限り、成果物をコミットまたは公開しないでください。
コメント
Markdown 対応