mcpField
S
svg-illustration

svg-illustration

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

svg-illustration について

svg-illustration は、スライド向けを含む SVG 図表やイラストの作成、問題解決に特化したスキルです。関連性の低い制作ガイドではなく、SVG 専用のルールや例を参照するよう案内します。

主な機能

  1. 01SVG のサイズと間隔の指針
  2. 02図表パターンのリファレンス
  3. 03スライドへの埋め込みガイド
  4. 04エクスポートと埋め込みの問題解決
  5. 05SVG のサンプル素材

活用シーン

  1. 01スライド向け SVG 図表の作成
  2. 02図表のサイズと間隔の決定
  3. 03SVG のエクスポートや埋め込みの問題解決

インストール

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

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

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

同梱ファイル

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

agents/
openai.yaml
assets/examples/
with-diagrams.md
references/
core-rules.md
embedding.md
index.md
output-examples.md
pattern-examples.md
troubleshooting.md

詳細

SVG イラストレーションのエントリー

概要

SVG 図のための簡潔なエントリーです。基本方針は、スライド作成やカラーのモジュールを確認するのではなく、SVG のルールとパターンを直接確認することです。

使用する場面

  • スライドですぐに使える SVG 図やイラストを作成するとき
  • SVG のサイズ、余白、埋め込みのルールを選ぶとき
  • SVG のエクスポートや埋め込みに関する問題を解決するとき

クイックリファレンス

目的読むもの
基本ルールreferences/core-rules.md
パターンの例references/pattern-examples.md
スライドへの埋め込みreferences/embedding.md
トラブルシューティングreferences/troubleshooting.md

例

プロンプト：「サイズの整ったアーキテクチャ図が必要です。」→ core-rules.md、続けて pattern-examples.md を読みます。

アセット

  • assets/examples/ - SVG 図の例

よくある間違い

  • 図だけが必要なのに、SVG のルールより先に Marp の作成方法を読む
  • SVG のリファレンスではなく、スライド作成ツールの概要にざっと目を通す

注意すべき兆候

  • 「SVG のルールは作成方法のどこかに埋もれているかもしれない」
  • 「とりあえずすべてにざっと目を通そう」

コメント

Markdown 対応