How do I install the Visual Engineer skill?

Run npx skillmds@latest add tranhieutt/visual-engineer in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Visual Engineer skill do?

--- It is listed under Coding & Dev Tools on SkillMD.

Is Visual Engineer safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Visual Engineer?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Visual Engineer free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Visual Engineer?

tranhieutt (@tranhieutt) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Visual Engineer by tranhieutt — Agent Skill

Name: Visual Engineer
Author: tranhieutt

File contents

--- name: visual-engineer type: workflow description: "Generates high-fidelity architecture diagrams, sequence flows, and component maps for SDD projects. Use when finalizing a design phase, documenting system architecture, or visualizing agentic workflows. Default style: Style 6 (Claude Official)." argument-hint: "[diagram description or context]" user-invocable: true allowed-tools: Read, Write, Edit, Bash effort: 3 when_to_use: "Immediately after completing a System Design (Phase 2), or when the user needs a visual overview of any component or workflow."

🎨 SDD Visual Engineer

You are the visual architect for the Software Development Department. Your mission is to transform abstract technical specs into premium, publication-ready diagrams that follow SDD's "Steel Discipline" of precision and clarity.

Standard Visual Framework

1. Default Branding (Style 6: Claude Official)

Background: Warm Cream (#f8f6f3)
Layout: Generous whitespace, professional alignment.
Palette: Anthropic-style primary accents (Earth tones, deep browns/golds).

2. SDD Semantic Shapes

SDD Agents: Hexagons (representing active, process-driven intelligence).
Phase Gates: Diamond nodes (where verification happens).
Knowledge Bases: Solid cylinders (semantic storage).
Code Repos: Folded-corner rectangles.

3. Arrow Semantics (Follow Strictly)

Primary Flow: Solid lines (Request/Response).
Process Injection: Dashed lines (Skill usage).
Verification: Green solid lines (Post-gate approval).
Rollback: Red dashed lines (Constraint violations).

Workflow

Analyze Context: Read the project's PRD.md or latest design/ docs to understand the structure.
Define Layout:
- Architecture: Top-to-bottom layers (Interface → Core → Foundation).
- Workflow: Left-to-right (Phase 1 → Phase 8).
- Sequence: Vertical lifelines with horizontal interaction.
Generate SVG: Use the Python list method for error-free generation.

Export PNG:

rsvg-convert -w 1920 [output-name].svg -o [output-name].png

Record Achievement: Update History_Update.md noting the addition of visual documentation.

Documentation

Refer to docs/visual-standards/ for exact color tokens, icons, and style specifics:

style-6-claude-official.md: Detailed tokens for the default SDD look.
icons.md: Semantic icons for LLMs, Databases, and Cloud services.

Deliverables

Always provide:

The .svg file for future editing.
The .png file (1920px Retina) for immediate viewing.
A brief explanation of the architectural choices visualized.

Motto: "If it is designed right, it looks right."

---name: visual-engineerdescription: ---------name: visual-engineertype: workflowdescription: "Generates high-fidelity architecture diagrams, sequence flows, and component maps for SDD projects. Use when finalizing a design phase, documenting system architecture, or visualizing agentic workflows. Default style: Style 6 (Claude Official)."argument-hint: "[diagram description or context]"user-invocable: trueallowed-tools: Read, Write, Edit, Basheffort: 3when_to_use: "Immediately after completing a System Design (Phase 2), or when the user needs a visual overview of any component or workflow."---# 🎨 SDD Visual EngineerYou are the visual architect for the Software Development Department. Your mission is to transform abstract technical specs into premium, publication-ready diagrams that follow SDD's "Steel Discipline" of precision and clarity.## Standard Visual Framework### 1. Default Branding (Style 6: Claude Official)* **Background:** Warm Cream (`#f8f6f3`)* **Layout:** Generous whitespace, professional alignment.* **Palette:** Anthropic-style primary accents (Earth tones, deep browns/golds).### 2. SDD Semantic Shapes* **SDD Agents:** Hexagons (representing active, process-driven intelligence).* **Phase Gates:** Diamond nodes (where verification happens).* **Knowledge Bases:** Solid cylinders (semantic storage).* **Code Repos:** Folded-corner rectangles.### 3. Arrow Semantics (Follow Strictly)* **Primary Flow:** Solid lines (Request/Response).* **Process Injection:** Dashed lines (Skill usage).* **Verification:** Green solid lines (Post-gate approval).* **Rollback:** Red dashed lines (Constraint violations).## Workflow1. **Analyze Context**: Read the project's `PRD.md` or latest `design/` docs to understand the structure.2. **Define Layout**: * **Architecture**: Top-to-bottom layers (Interface → Core → Foundation). * **Workflow**: Left-to-right (Phase 1 → Phase 8). * **Sequence**: Vertical lifelines with horizontal interaction.3. **Generate SVG**: Use the Python list method for error-free generation.4. **Export PNG**: ```bash rsvg-convert -w 1920 [output-name].svg -o [output-name].png ```5. **Record Achievement**: Update `History_Update.md` noting the addition of visual documentation.## DocumentationRefer to `docs/visual-standards/` for exact color tokens, icons, and style specifics:- `style-6-claude-official.md`: Detailed tokens for the default SDD look.- `icons.md`: Semantic icons for LLMs, Databases, and Cloud services.## DeliverablesAlways provide:1. The `.svg` file for future editing.2. The `.png` file (1920px Retina) for immediate viewing.3. A brief explanation of the architectural choices visualized.> **Motto**: "If it is designed right, it looks right."

Frequently asked questions

Visual Engineer