القائمة
図やダイアグラムをSVGコードとして生成し、画面にレンダリング表示するスキル。 USE FOR: SVG render, SVG draw, SVG diagram creation. DO NOT USE FOR: Mermaid diagrams. WHEN: SVGでレンダリングして、SVGで図を描いて。
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
全 Custom Agent が作業開始時に参照する共通プリアンブル。 USE FOR: agent start, common rules, preamble. DO NOT USE FOR: implementation. WHEN: Custom Agent が作業を開始したとき、共通ルールを確認したいとき。
GitHub Actions CI/CD ワークフローの共通仕様。OIDC 認証・workflow_dispatch トリガー・ Copilot push 制約対応・シークレット管理・デプロイ保護の原則を提供する。 USE FOR: GitHub Actions, CI/CD workflow, OIDC authentication. DO NOT USE FOR: application code deployment (use appropriate azure-skills/ deployment skill). WHEN: GitHub Actions ワークフローを作成する、CI/CD パイプラインを設計する。
破壊的操作を事前に検出・阫止する安全ガードの詳細パターンリストと判定フロー。 PHASE: 実行前（コマンド・スクリプト実行前に使用）。 USE FOR: destructive operation detection, rm -rf detection, DROP TABLE detection. DO NOT USE FOR: error recovery after failure (use harness-error-recovery), post-execution verification (use harness-verification-loop). WHEN: コマンドを実行する前の安全確認、破壊的操作の検出。
コード変更後の5段階検証パイプライン（Build/Lint/Test/Security/Diff）の詳細手順。 PHASE: 実行後（コード変更・生成・デプロイを行った**後**に使用）。 USE FOR: build check, lint, test execution. DO NOT USE FOR: error recovery (use harness-error-recovery), pre-execution safety check (use harness-safety-guard). WHEN: コードを変更した後の検証、ビルド確認。
knowledge/ 配下のファイル管理ルールを提供する。業務要件・判定表・連携契約等の ドメイン知識ドキュメントの分類・命名・更新手順を定義する。 USE FOR: knowledge/ file management, D01-D21 classification, domain knowledge organization. DO NOT USE FOR: qa/ file creation (use work-artifacts-layout). WHEN: knowledge/ 配下にファイルを作成・更新する、ドメイン知識を整理する。
初見のリポジトリで最小限の読解により入口・境界・標準コマンドを確定し、 onboarding.md に固定するスキル。"全部読む"を避け、作業に必要な最小限だけ確定する。 USE FOR: repository onboarding, first assignment, entry point discovery. DO NOT USE FOR: full code analysis. WHEN: リポジトリに初めてアサインされた、入口が不明。
| name | svg-renderer |
| description | 図やダイアグラムをSVGコードとして生成し、画面にレンダリング表示するスキル。 USE FOR: SVG render, SVG draw, SVG diagram creation. DO NOT USE FOR: Mermaid diagrams. WHEN: SVGでレンダリングして、SVGで図を描いて。 |
| metadata | {"origin":"user","version":"2.0.0"} |
ユーザーの要求に基づき、高品質で見やすいSVG図を作成してください。
ユーザーが 「SVGでレンダリングして」「SVGで描いて」「SVGで作成して」 など、明示的にSVGでの図の生成を指示した場合に動作します。
| モード | トリガーキーワード | 動作 |
|---|---|---|
| 🖥️ 画面表示モード（デフォルト） | レンダリング、表示、描画、図式化、可視化、描いて、render, display, show, visualize, draw | SVG保存 ＋ 画面にレンダリング表示（必須） |
| 💾 ファイル保存モード | 作成して（表示指示なし）、保存、ダウンロード、エクスポート、create, save, export | SVG保存 ＋ ファイルパス報告のみ |
⚠️ 「レンダリング」「表示」「描画」「図式化」「可視化」のいずれかが含まれる場合、いかなる状況でもファイル保存モードにしてはならない（強制ルール）。
ステップ1: 要件の把握 — 図の種類（フローチャート/シーケンス図/アーキテクチャ図/ER図等）・含める要素・スタイル要件を読み取る。
ステップ1.5: 出力モードの判定【必須】 — 上記テーブルのトリガーキーワードに基づき判定。キーワードが曖昧な場合は画面表示モードを選択。
ステップ2: SVGの生成 — 詳細ルール（基本構造・デザインガイドライン・図の種類別ガイドライン）は references/svg-design-guidelines.md を参照。
ステップ3: ファイルの保存 — .svg ファイルとして保存し、ファイルパスを報告する。画面表示モードの場合は必ずステップ4に進む。
ステップ4: 画面へのレンダリング表示【画面表示モード時は必須・スキップ禁止】 — playwright-browser_navigate + playwright-browser_take_screenshot で表示。詳細は references/svg-design-guidelines.md を参照。
| ファイル | 内容 |
|---|---|
references/svg-design-guidelines.md | ステップ2のSVG基本構造・デザインガイドライン・図の種類別ガイドライン、ステップ3〜4のファイル保存・レンダリング詳細手順、品質チェックリスト、強制ルール4つ |
| Skill | 関係 | 説明 |
|---|---|---|
docs-output-format | 代替 | Mermaid図を使う場合は docs-output-format §2 の Mermaid 記法指針を参照 |
work-artifacts-layout | 出力先 | SVGファイルの保存先パス |
large-output-chunking | 関連 | 巨大なSVGファイルの分割管理 |
