mcpField
C
creating-svg-illustrations

creating-svg-illustrations

github.com/narumirunaデザイン・UI17227 回インストール6 日前に更新
リポジトリ

creating-svg-illustrations について

スライドや文書向けに、編集可能な SVG イラストを作成・検証するワークフロースキルです。レイアウト、アクセシビリティ、アセットの可搬性、レンダラーの確認を扱います。

主な機能

  1. 01スライドと文書の確認
  2. 02編集可能な SVG の作成
  3. 03アクセシビリティ情報と代替テキスト
  4. 04アセットの可搬性に関する指針
  5. 05SVG とレンダリングの検証

活用シーン

  1. 01プレゼンテーション用の図の作成
  2. 02Marp への SVG イラストの埋め込み
  3. 03SVG のレンダリング問題の調査

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/narumiruna/skills --skill creating-svg-illustrations

インストール後、Claude Code で/creating-svg-illustrationsを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

assets/examples/
with-diagrams.md
references/
core-rules.md
embedding.md
pattern-examples.md
troubleshooting.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

ワークフロー

  1. 対象のスライドまたはドキュメント、必要な寸法、周囲の配色、レンダラーを確認します。
  2. アイデアが伝わる、編集可能な最小限の SVG を作成します。適切な viewBox、明示的なテキストスタイル、一貫性のある図形を使い、ビジュアルが意味を持つ場合は SVG のタイトルと説明を追加します。埋め込む場合は、references/embedding.md の要件に従って、埋め込み先にも説明的な代替テキストを設定するか、隣接する同等の意味情報を用意します。SVG 内部のメタデータだけでは不十分です。
  3. アセットの移植性を保ちます。埋め込みフォント、説明のない絵文字、不要なフィルター、出力を自己完結させる必要がない場合の base64 コンテンツは避けます。
  4. 利用可能であれば svglint で検証し、対象の成果物に SVG を開くか埋め込んで、クリッピング、拡大縮小、コントラスト、テキスト、相対パスを確認します。
  5. まず SVG の成果物を返し、その後に実施した検証と、レンダラーやフォントに関する注意点を記載します。

依頼にスライド作成や配色のガイダンスも含まれる場合に限り、それらを使用します。ソースの検証しか行っていない場合は、見た目を確認したと主張しないでください。また、依頼がない限り、成果物をコミットまたは公開しないでください。

コメント