mcpField
S
svg-precision-skill

svg-precision-skill

github.com/dkyazzentwatwaデザイン・UI124276 回インストール29 週間前に更新
リポジトリ

svg-precision-skill について

svg-precision-skillは、明確なシーン仕様に基づくSVGの作成と、引き渡し前の検証をエージェントに案内します。寸法や座標、プレビューを管理したい作業に適しています。

主な機能

  1. 01仕様に基づくSVG作成
  2. 02テンプレートとレイアウト例
  3. 03SVGのビルドと検証
  4. 04必要に応じたPNGプレビュー

活用シーン

  1. 01寸法と座標を固定したSVGの作成
  2. 02引き渡し前のSVG検証
  3. 03簡易PNGプレビューの確認

インストール

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

$npx skills add https://github.com/dkyazzentwatwa/chatgpt-skills --skill svg-precision-skill

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

同梱ファイル

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

agents/
openai.yaml
references/
recipes.md
spec.md
scripts/
requirements.txt
self_test.py
svg_cli.py
scripts/examples/
bar_chart.json
diagram.json
icon_check.json
technical_dim.json
ui_card.json
scripts/svg_skill/
__init__.py
core.py
render.py
validate.py

詳細

SVG 精密作成スキル

明確なシーン仕様に基づいて SVG を作成し、引き渡す前に検証します。

ワークフロー

  1. リクエストを、寸法と座標を固定した具体的な仕様に落とし込みます。
  2. テンプレートには references/spec.md を、安定したレイアウトパターンには references/recipes.md を使用します。
  3. scripts/svg_cli.py build で SVG を作成します。
  4. scripts/svg_cli.py validate で検証します。
  5. ユーザーが手早く見た目を確認する必要がある場合は、PNG のプレビューをレンダリングします。

ルール

  • viewBox、width、height を明示的に設定します。
  • 絶対座標とシンプルな図形を優先します。
  • 正確なレンダリングが重要な場合、テキストは慎重に扱います。
  • 必要かつテスト可能な場合を除き、特殊なフィルターは避けます。

コメント

Markdown 対応