Agent skill

Legal Architecture

by zh-xx in zh-xx/legal-assistant-skills

生成专业的法律结构可视化图,输出为自包含 HTML 文件(内嵌 SVG,浅色主题,适合打印和嵌入文档)。适用场景:(1) 用户要求"画结构图""生成可视化""做流程图""法律图示"时;(2) 涉及诉讼推理结构(当事人→证据→事实→法律→判决);(3) 合同关系图(甲乙方权利义务、履约节点、违约责任);(4) 法规程序图(申请→审查→决定→救济);(5)…

MITAuto-check passedFrontend & Design

Install Legal Architecture

skills CLI
$ npx skills add zh-xx/legal-assistant-skills --skill legal-architecture -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install zh-xx/legal-assistant-skills legal-architecture --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/zh-xx/legal-assistant-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/legal-architecture .claude/skills/legal-architecture && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
legal-architecture
GitHub stars
174
Token cost
~1.7k tokens
SKILL.md length
503 words
Files
3 (incl. assets)
Skills in repo
8
Repo updated
First seen
Licence
MIT

At a glance

生成专业的法律结构可视化图,输出为自包含 HTML 文件(内嵌 SVG,浅色主题,适合打印和嵌入文档)。适用场景:(1) 用户要求"画结构图""生成可视化""做流程图""法律图示"时;(2) 涉及诉讼推理结构(当事人→证据→事实→法律→判决);(3) 合同关系图(甲乙方权利义务、履约节点、违约责任);(4) 法规程序图(申请→审查→决定→救济);(5)…

  • Works in 4 steps: Header — title (with colored status… → Diagram card — white card with… → Info cards — 3-column grid with metadata… → …
  • The user asks for litigation flow diagrams
  • SKILL.md covers Design System and Output Format
  • Reaches fonts.googleapis.com

What it does

Legal Architecture is an agent skill from zh-xx/legal-assistant-skills. 生成专业的法律结构可视化图,输出为自包含 HTML 文件(内嵌 SVG,浅色主题,适合打印和嵌入文档)。适用场景:(1) 用户要求"画结构图""生成可视化""做流程图""法律图示"时;(2) 涉及诉讼推理结构(当事人→证据→事实→法律→判决);(3) 合同关系图(甲乙方权利义务、履约节点、违约责任);(4) 法规程序图(申请→审查→决定→救济);(5) 证据链图、请求权基础分析图、法律体系层级图。Use when the user asks for litigation flow diagrams, contract relationship diagrams, legal reasoning structure diagrams, evidence chain diagrams, or any legal visualization.

Its SKILL.md is about 1.7k tokens, which your agent loads only when the skill is triggered. The skill folder holds 3 other files, including assets.

It sits in Frontend & Design, covering Diagrams and Legal research. The repository describes itself as: AI assistant skills for legal work. Compatible with Claude Code, Codex, and other platforms. The licence is MIT.

When your agent uses it

  • The user asks for litigation flow diagrams
  • Contract relationship diagrams
  • Legal reasoning structure diagrams
  • Evidence chain diagrams

Example prompts

  • “/legal-architecture”

Workflow steps

4 steps, taken from the first numbered list in SKILL.md.

  1. Header — title (with colored status dot), subtitle (case number / date / court)
  2. Diagram card — white card with border-shadow, contains SVG
  3. Info cards — 3-column grid with metadata (parties, evidence summary, judgment key points)
  4. Footer — case number and skill attribution

What it can do on your machine

Read from SKILL.md and the folder at commit 3094afd. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are svg and html).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • fonts.googleapis.com

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Legal Architecture loads about 1.7k tokens when it runs. Until then it costs about 98 tokens; SKILL.md has 503 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~98
When it runs · the whole SKILL.md, loaded when a task matches
~1.7k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from zh-xx/legal-assistant-skills at commit 3094afd, republished under its MIT licence (© zh-xx). 503 words, ~1,712 tokens.

Download SKILL.mdSave it as .claude/skills/legal-architecture/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.
name
legal-architecture
description
生成专业的法律结构可视化图,输出为自包含 HTML 文件(内嵌 SVG,浅色主题,适合打印和嵌入文档)。适用场景:(1) 用户要求"画结构图""生成可视化""做流程图""法律图示"时;(2) 涉及诉讼推理结构(当事人→证据→事实→法律→判决);(3) 合同关系图(甲乙方权利义务、履约节点、违约责任);(4) 法规程序图(申请→审查→决定→救济);(5) 证据链图、请求权基础分析图、法律体系层级图。Use when the user asks for litigation flow diagrams, contract relationship diagrams, legal reasoning structure diagrams, evidence chain diagrams, or any legal visualization.
license
MIT
metadata.version
1.1
metadata.author
JeeC (adapted from architecture-diagram by Cocoon AI)

Create professional legal structure diagrams as self-contained HTML files with inline SVG. Designed for court document analysis, contract review, legal knowledge management, and client presentations. Output is light-themed and print-ready.

Design System

Color Palette

Use these semantic colors for legal component types:

Component TypeFill (rgba)StrokeUse Case
当事人/主体 (Party)rgba(219,234,254,0.9)#2563eb (blue-600)原告、被告、甲方、乙方、第三人
事实/行为 (Fact)rgba(241,245,249,0.9)#475569 (slate-600)侵权行为、违约事实、案件经过
证据 (Evidence)rgba(254,243,199,0.9)#b45309 (amber-700)书证、物证、证人证言、鉴定意见
法律规范 (Law)rgba(209,250,229,0.9)#047857 (emerald-700)法条、司法解释、行政法规
程序节点 (Procedure)rgba(237,233,254,0.9)#6d28d9 (violet-700)立案、开庭、举证、质证、裁定
裁判/结论 (Judgment)rgba(254,226,226,0.9)#b91c1c (red-700)判决主文、责任认定、风险结论
争议焦点 (Issue)rgba(255,237,213,0.9)#c2410c (orange-700)争议焦点、待查明事实
Typography

Use Inter for all text — clean, professional, print-friendly:

html
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

Font sizes: 12px for primary labels, 10px for secondary, 9px for annotations, 8px for tiny labels.

Visual Elements

Background: #f8fafc with subtle light grid:

svg
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
  <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#f1f5f9" stroke-width="0.8"/>
</pattern>

Component boxes: Rounded rectangles (rx="6") with 1.5px stroke. Always draw an opaque white background rect FIRST to mask arrows behind boxes:

svg
<rect x="X" y="Y" width="W" height="H" rx="6" fill="white"/>
<rect x="X" y="Y" width="W" height="H" rx="6" fill="rgba(219,234,254,0.9)" stroke="#2563eb" stroke-width="1.5"/>

Arrows — standard flow:

svg
<marker id="arr" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
  <polygon points="0 0, 8 3, 0 6" fill="#94a3b8"/>
</marker>
<line x1="..." y1="..." x2="..." y2="..." stroke="#94a3b8" stroke-width="1.2" marker-end="url(#arr)"/>

Arrows — judgment emphasis (red):

svg
<marker id="arr-red" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
  <polygon points="0 0, 8 3, 0 6" fill="#b91c1c"/>
</marker>

Cross-layer or indirect logical connections: Use dashed lines:

svg
stroke-dasharray="4,3"

Arrow z-order: ALWAYS draw all arrows BEFORE component boxes in the SVG. SVG renders in document order, so arrows drawn first appear behind boxes drawn later.

Layout Patterns

Choose the layout based on content type:

1. 诉讼流程图 (Litigation Flow) — top-to-bottom layered with group boxes

For: case analysis, judgment structure, evidence → fact → law → judgment chain.

PREFERRED PATTERN — dashed group boxes + single vertical arrows:

Each reasoning stage is enclosed in a dashed group box with a badge label straddling its top-left border. Stages connect via a single purely vertical arrow in the center (x=500 for a 1000-wide viewBox). No node-to-node arrows across stages — this avoids visual clutter and false logical implications.

┌─────────────────────────────────┐
│ [当事人]  原告 ●●● 被告          │  ← group box, dashed border
└─────────────────────────────────┘
              ↓  (single arrow at center x)
┌─────────────────────────────────┐
│ [争议焦点] 焦点一  焦点二         │
└─────────────────────────────────┘
              ↓
  ... etc through 证据 → 事实认定 → 法律适用 → 判决结果

Group box SVG pattern (badge label straddles top-left border):

svg
<!-- Group box -->
<rect x="8" y="127" width="984" height="82" rx="8"
      fill="rgba(255,237,213,0.12)" stroke="#fb923c"
      stroke-width="1.2" stroke-dasharray="6,4"/>
<!-- Badge: rect behind text, centered on top border (y = group top - 8) -->
<rect x="14" y="119" width="64" height="16" rx="4"
      fill="rgba(255,237,213,0.95)" stroke="#fb923c" stroke-width="0.8"/>
<text x="46" y="131" fill="#9a3412" font-size="9" font-weight="600"
      text-anchor="middle" font-family="Inter,system-ui">争议焦点</text>

Vertical gap between group boxes: 28–32px. Place one arrow per gap:

svg
<line x1="500" y1="[group_bottom+2]" x2="500" y2="[next_group_top-2]"
      stroke="#64748b" stroke-width="1.5" marker-end="url(#arr)"/>
<!-- Final arrow to judgment box uses red: stroke="#b91c1c" stroke-width="2" marker-end="url(#arr-red)" -->

Within each group box, items are arranged horizontally (no intra-group arrows needed — spatial proximity implies relationship). Reserve arrows for cross-group logical flow only.

2. 合同关系图 (Contract Relationship) — hub-and-spoke or two-column For: contract parties, rights/obligations flow, key clause mapping

甲方 ←→ 合同核心义务 ←→ 乙方
         ↓
    履约条件/违约责任

3. 法律体系图 (Legal Framework) — tree or hierarchical For: legal concepts, regulatory hierarchy, claim basis analysis (请求权基础)

上位法 → 下位法 → 实施细则/司法解释
Show full SKILL.md (157 more words)Show less
Spacing Rules

CRITICAL: Avoid element overlaps:

  • Standard component height: 55-60px for single-line, 75-90px for multi-line
  • Minimum vertical gap between rows: 38px
  • Minimum horizontal gap between same-row items: 15px
  • Use equal start/end margins: startX = (viewBoxWidth - totalRowWidth) / 2

Row width calculation:

totalRowWidth = N * boxWidth + (N-1) * gap
startX = (viewBoxWidth - totalRowWidth) / 2
Legend Placement

Place legend BELOW all diagram content, at least 20px below the lowest element. Use a light rounded-rectangle background. Arrange legend items horizontally.

Page Structure
  1. Header — title (with colored status dot), subtitle (case number / date / court)
  2. Diagram card — white card with border-shadow, contains SVG
  3. Info cards — 3-column grid with metadata (parties, evidence summary, judgment key points)
  4. Footer — case number and skill attribution

Output Format

Always produce a single self-contained .html file:

  • Embedded CSS only (Google Fonts link allowed)
  • Inline SVG (no external images or scripts)
  • Light background (#f8fafc) — suitable for printing and embedding in Word/PPT
  • No JavaScript required

File should open and render correctly in any modern browser, and look professional when printed.

© zh-xx, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 2 other files (assets) in legal-architecture of zh-xx/legal-assistant-skills.

  • SKILL.md
  • LICENSE
  • assets/template.html

Open the folder on GitHubat commit 3094afd

Compare with similar skills

Legal Architecture next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Legal Architecture compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Legal Architecture this skillzh-xx/legal-assistant-skills174—~1.7kAutomated safety check: PassMIT
Architecture Mapalmendili/skills3821 repos~2.3kAutomated safety check: PassNone
Previewhanamizuki/solopreneur152—~5.2kAutomated safety check: PassMIT
Show Metellahq/opensession394—~1.6kAutomated safety check: PassMIT
Update Web Assetsgarfiec/Librechat-Mobile111—~1.8kAutomated safety check: NotesMIT
Show Memirumee/nimara-ecommerce1297 repos~809Automated safety check: PassBSD-3-Clause

Similar skills

  • Architecture Map

    almendili/skills

    Build or update an interactive isometric map of a repository's architecture — buildings sized by real measurements, neighborhoods by subsystem, animated flows tracing actual call paths, and a drift…

    382 GitHub starsUsed in 1 repo~2.3k tokens
    Frontend & DesignAuto-check passed
  • Preview

    hanamizuki/solopreneur

    Create an interactive HTML preview of any proposal, plan, idea, doc, brief, or spec and land it in the browsable local Preview Library by default (opens under file:// with a catalog sidebar and…

    152 GitHub stars~5.2k tokensUpdated 14 days ago
    Frontend & DesignAuto-check passed
  • Show Me

    tellahq/opensession

    Help the user understand the current topic visually with concise diagrams, code-shape sketches, and focused HTML artifacts.

    394 GitHub stars~1.6k tokensUpdated today
    Frontend & DesignAuto-check passed
  • Update Web Assets

    garfiec/Librechat-Mobile

    Update the third-party JavaScript vendored into the app for the artifact, diagram, and math WebViews (KaTeX, mermaid, marked, highlight.js, Tailwind, Babel, React).

    111 GitHub stars~1.8k tokensUpdated yesterday
    Frontend & DesignAuto-check: notes
  • Show Me

    mirumee/nimara-ecommerce

    Help the user understand the current topic visually with concise diagrams, code-shape sketches, and focused HTML artifacts.

    129 GitHub starsUsed in 7 repos~809 tokens
    Frontend & DesignAuto-check passed
  • Design It

    smallnest/goal-workflow

    A skill your agent uses when turning a requirement, spec, or feature brief into a single self-contained HTML design document in a fixed house style — one styled HTML page with a table-of-contents…

    291 GitHub stars~1.1k tokensUpdated 27 days ago
    Frontend & DesignAuto-check passed

More from zh-xx/legal-assistant-skills

All 8 skills in this repo
  • Legal Risk Visualization

    zh-xx/legal-assistant-skills

    法律风险结构化分析与可视化。基于法律分析文本,执行五步风险抽取模型, 生成四层可视化输出(雷达图数据、风险矩阵、影响路径图、决策树)。

    174 GitHub stars~2.4k tokensUpdated 5 mo ago
    Auto-check passed
  • Ad Compliance Review

    zh-xx/legal-assistant-skills

    广告合规审核技能,用于审核广告素材是否符合中国广告法及相关法规。适用场景:(1) 用户提交广告文案、广告素材要求合规审核时;(2) 用户提到"广告审核""广告合规""广告法审查"等关键词时;(3) 用户要求检查广告内容是否存在违法违规风险时;(4) 用户提交房地产、食品、医疗、药品、互联网等行业广告要求专项审核时。审核依据涵盖《广告法》《反不正当竞争法》及行业专项法规。

    174 GitHub stars~1.2k tokensUpdated 5 mo ago
    Auto-check passed
  • Contract Gen

    zh-xx/legal-assistant-skills

    合同生成技能,以资深法律专家身份生成完整合同。适用场景:(1) 用户要求'起草合同''生成合同''拟定协议''写合同''草拟合同'时;(2) 用户提供合同类型和交易信息,要求生成完整合同文本时;(3) 用户要求根据特定立场(甲方/乙方/买方/卖方/出租方/承租方)起草倾斜性合同时;(4) 用户要求将已有合同要点或业务条件生成为正式合同文本时。输出 Markdown 格式,可选导出 .docx。

    174 GitHub stars~897 tokensUpdated 5 mo ago
    Auto-check passed
  • Contract Review

    zh-xx/legal-assistant-skills

    Contract review skill that adds comment-based issue annotations without changing original text.

    174 GitHub stars~1.6k tokensUpdated 5 mo ago
    Auto-check passed
  • Food Label Review

    zh-xx/legal-assistant-skills

    预包装食品标签合规审核技能,用于审核食品标签是否符合 GB 7718(预包装食品标签通则)和 GB 28050(预包装食品营养标签通则)。适用场景:(1) 用户提交食品标签图片、文字或文档要求合规审核时;(2) 用户提到"食品标签审核""标签合规""营养标签审查""GB 7718""GB 28050"等关键词时;(3) 用户要求检查食品标签是否存在缺项、错误或违规风险时。支持 2011 版和…

    174 GitHub stars~1.7k tokensUpdated 5 mo ago
    Auto-check passed
  • Legal Job Search

    zh-xx/legal-assistant-skills

    法律AI求职助手 - 帮助法律人(法务/律师)使用AI辅助求职。支持公司/律所调研、法律风险分析、网页简历生成、针对性材料准备、面试备忘录生成。具备MCP工具级降级能力,无MCP时自动使用Web Search。

    174 GitHub stars~1.7k tokensUpdated 5 mo ago
    Auto-check passed

Questions about Legal Architecture

What does Legal Architecture do?

生成专业的法律结构可视化图,输出为自包含 HTML 文件(内嵌 SVG,浅色主题,适合打印和嵌入文档)。适用场景:(1) 用户要求"画结构图""生成可视化""做流程图""法律图示"时;(2) 涉及诉讼推理结构(当事人→证据→事实→法律→判决);(3) 合同关系图(甲乙方权利义务、履约节点、违约责任);(4) 法规程序图(申请→审查→决定→救济);(5)…. Legal Architecture is an agent skill from zh-xx/legal-assistant-skills. 生成专业的法律结构可视化图,输出为自包含 HTML 文件(内嵌 SVG,浅色主题,适合打印和嵌入文档)。适用场景:(1) 用户要求"画结构图""生成可视化""做流程图""法律图示"时;(2) 涉及诉讼推理结构(当事人→证据→事实→法律→判决);(3) 合同关系图(甲乙方权利义务、履约节点、违约责任);(4) 法规程序图(申请→审查→决定→救济);(5) 证据链图、请求权基础分析图、法律体系层级图。Use when the user asks for litigation flow diagrams, contract relationship diagrams, legal reasoning structure diagrams, evidence chain diagrams, or any legal visualization.

When should I use Legal Architecture?

Legal Architecture fits situations like: the user asks for litigation flow diagrams; contract relationship diagrams; legal reasoning structure diagrams; evidence chain diagrams.

How do I install Legal Architecture in Claude Code?

Run `npx skills add zh-xx/legal-assistant-skills --skill legal-architecture -a claude-code`. Or copy the skill folder (legal-architecture in zh-xx/legal-assistant-skills) into .claude/skills/legal-architecture in your project. Claude Code loads it when a task matches its description.

How do I install Legal Architecture in Codex?

Run `npx skills add zh-xx/legal-assistant-skills --skill legal-architecture -a codex`. Or copy the skill folder (legal-architecture in zh-xx/legal-assistant-skills) into .agents/skills/legal-architecture in your project. Codex loads it when a task matches its description.

Can I use Legal Architecture in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add zh-xx/legal-assistant-skills --skill legal-architecture -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/legal-architecture, .gemini/skills/legal-architecture, .github/skills/legal-architecture and .opencode/skills/legal-architecture in your project.

What does Legal Architecture need to run?

SKILL.md names no scripts, command-line tools or credentials: Legal Architecture is instructions for the agent only.

Does Legal Architecture access the network?

SKILL.md names 1 domain. In commands or code: fonts.googleapis.com; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.

Is Legal Architecture safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Legal Architecture use?

Legal Architecture is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Legal Architecture use?

About 1.7k tokens (SKILL.md is roughly 6.8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Legal Architecture?

Skills that share tags, products or a category with Legal Architecture: Architecture Map (almendili/skills, 382 stars), Preview (hanamizuki/solopreneur, 152 stars), Show Me (tellahq/opensession, 394 stars) and Update Web Assets (garfiec/Librechat-Mobile, 111 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Legal Architecture?

zh-xx (a GitHub user) maintains it in zh-xx/legal-assistant-skills, which has 174 GitHub stars. The repository holds 8 skills in this directory. The repository was last updated on April 18, 2026.

Source: zh-xx/legal-assistant-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.