AgentSkillsCN

security-svg-diagram

具备生成安全攻击教学用SVG图的技能。可将XSS、CSRF、SQL注入、MITM、钓鱼等各类攻击流程，以攻击者、服务器、受害者的角色布局及带编号的步骤进行可视化呈现。针对每种攻击类型，均会生成“攻击示意图”与“防御对策示意图”两幅配套的SVG图像。其设计风格采用深色模式，兼具现代感；配有图标化的卡片式布局，并附有代码示例。可通过“安全图”“攻击流程图”“XSS详解”“攻击路径”“防御对策图”“安全教育”“漏洞解析”等关键词触发调用。在需要以图表形式直观阐释攻击原理与应对措施的场景中，可积极加以运用。

SKILL.md
--- frontmatter
name: security-svg-diagram
description: "セキュリティ攻撃の教育用SVG図を生成するスキル。XSS、CSRF、SQLインジェクション、MITM、フィッシングなどの攻撃フローを、攻撃者・サーバー・被害者のアクター配置と番号付きステップで視覚化する。各攻撃タイプにつき「攻撃図」と「対策図」の2枚1組のSVGペアを生成。ダークモードのモダンなデザイン、アイコン付きカード、コード例を特徴とする。「セキュリティ図」「攻撃フロー図」「XSS図解」「攻撃の流れ」「対策図」「セキュリティ教育」「脆弱性の説明」などのキーワードでトリガー。攻撃の仕組みや対策を図で説明したい場面では積極的に使用すること。"

Security SVG Diagram Generator

セキュリティ攻撃の教育用SVG図を生成するスキル。1つの攻撃タイプにつき攻撃図 + 対策図のペアを出力する。

ワークフロー

  1. •ユーザーから攻撃タイプを受け取る（例: xss-reflected, csrf, sql-injection）
  2. •references/diagram-templates.md で攻撃タイプに対応するテンプレート型（Flow型、中間割込型等）を確認
  3. •references/svg-components.md と references/design-system.md を参照
  4. •攻撃の内容自体はClaudeの知識を使い、テンプレート型に沿って攻撃図SVGを生成 → /mnt/user-data/outputs/{attack-type}-attack.svg
  5. •同じアクター配置で対策図SVGを生成 → /mnt/user-data/outputs/{attack-type}-defense.svg
  6. •両ファイルを present_files で提示

出力ファイル構成

ファイル内容
{type}-attack.svg攻撃フロー図（アクター、番号付き矢印、ステップ詳細、攻撃テクニックカード）
{type}-defense.svg対策図（同じアクター配置に防御ポイントを重ね、攻撃が遮断される様子を表示）

SVG設計の基本原則

レイアウト構造（攻撃図）

code
┌──────────────────────────────────────────────────────────────────────┐
│  タイトル + サブタイトル + OWASPカテゴリバッジ                           │
├──────────────────────────────────────────┬───────────────────────────┤
│                                          │  攻撃ステップ詳細          │
│  ┌─────┐      ┌─────┐      ┌─────┐     │  ①タイトル + 説明2行       │
│  │攻撃者│ ──→  │サーバー│ ──→ │被害者│     │  ②タイトル + 説明2行       │
│  └─────┘      └─────┘      └─────┘     │  ③ ...                    │
│     番号付き矢印で接続                     │  ④ ...                    │
│                                          │  ⑤ ...                    │
│  [脆弱性ボックス]  [ブラウザボックス]        ├───────────────────────────┤
│                                          │  凡例                      │
│  [コード例]                               │                           │
├──────────────────────────────────────────┴───────────────────────────┤
│  🔥 使用される攻撃テクニック                                           │
│  [カード1: アイコン+説明] [カード2] [カード3]                           │
└──────────────────────────────────────────────────────────────────────┘

レイアウト構造（対策図）

code
┌──────────────────────────────────────────────────────────────────────┐
│  タイトル + "多層防御"バッジ                                           │
├──────────────────────────────────────────┬───────────────────────────┤
│                                          │  防御レイヤー一覧          │
│  [WAF]  ┌─────┐      ✗      ┌─────┐    │  ①レイヤー名 + 説明        │
│         │サーバー│ ──✗──→ │被害者│    │  ②...                      │
│  ┌─────┐└─────┘             └─────┘    │  ③...                      │
│  │攻撃者│ (薄く表示)                       │  ④...                      │
│  └─────┘                                 │                           │
│                                          │  🔒多層防御                │
│  [入力サニタイズ]     [CSPヘッダー]         ├───────────────────────────┤
│                                          │  凡例                      │
│  [HttpOnly Cookie]                       │                           │
└──────────────────────────────────────────┴───────────────────────────┘

重要なルール

  1. •viewBox設定: 必ず全要素が収まるサイズを設定。右サイドバーの右端が viewBox幅 - 20px 以内に収まること
  2. •矢印と要素の分離: 番号バッジは矢印ラインから最低20px離す。対向する矢印（②③など）はY座標を40px以上離し、バッジは上下に分散配置
  3. •曲線矢印のルーティング: アクター間を大きく回る矢印は、他のボックス要素（脆弱性表示、コード例、防御カード等）と重ならないよう制御点を十分に離す（最低60px以上のマージン）
  4. •テキスト重複防止: 全テキスト要素は他の要素と重ならないことを確認。特に矢印パスがテキスト領域を横切らないこと
  5. •カラーコーディング: 攻撃=赤系、サーバー応答=青系、ユーザー通信=紫系、防御=緑系を一貫して使用

要素の重なり防止（必須チェック）

SVG生成後、以下のチェックを必ず実施すること。要素が重なると文字が読めなくなり、図の品質が大きく低下する。

バウンディングボックスの計算ルール

各要素の占有領域（バウンディングボックス）を transform の translate(x, y) とその内部の rect / circle / text 座標から計算し、要素間の重なりがないことを確認する。

code
例: <g transform="translate(385, 150)"> 内の <rect x="-58" y="-55" width="116" height="155">
  → 絶対座標: x=[327, 443], y=[95, 250]

例: <g transform="translate(465, 270)"> 内の <circle r="16">
  → 絶対座標: x=[449, 481], y=[254, 286]

最低マージン

要素の組み合わせ最低マージン
カード同士40px以上
カードとブロックマーク（✗）10px以上
カードと矢印ラインテキストを含む場合は20px以上
防御カードとアクターカード20px以上
凡例と他の要素30px以上

よくある重なりパターンと対策

  1. •防御カード同士の重なり: カードを横並び or 十分なY間隔（90px以上）で縦配置
  2. •ブロックマーク（✗）と防御壁カードの重なり: 防御壁カードの下端がブロックマークの上端より上にあることを確認。カードを上に移動するか、ブロックマークを右にずらして回避
  3. •矢印パスが大きなカードを貫通: カードの外を迂回するか、カードのサイズ・位置を調整
  4. •viewBox不足による下部要素のはみ出し: 全要素の最下端 + 20px をviewBox高さに設定

コンポーネント参照

SVGの各コンポーネント（アクター、矢印、カード等）の具体的なSVGコードは references/svg-components.md を参照。

デザインシステム

色、フォント、間隔などの定数は references/design-system.md を参照。

テンプレート型

攻撃タイプごとのレイアウトパターン（Flow型、中間割込型、集中型、階層型、Timeline型）とアクター配置・矢印ルーティングの定義は references/diagram-templates.md を参照。攻撃の内容（ステップ、脆弱性、防御策）はClaudeの知識を使って記述する。

実装例

assets/ ディレクトリに以下のプロトタイプを格納。新しい攻撃タイプのSVGを生成する際はこれらを参考にすること。

  • •assets/xss-reflected-attack.svg — 攻撃図の完成例
  • •assets/xss-reflected-defense.svg — 対策図の完成例

テーマ

デフォルトはダークモード。ユーザーが指定した場合はライトモードに切り替え可能（references/design-system.md に両テーマの色定義あり）。

言語

デフォルトは日本語メイン + 英語サブ（バイリンガル表示）。ユーザー指定で英語のみにも切替可能。