← All skills
cc-technical-diagrams
75 / 100 · Review before installing
Check before installing. Some of what it can do is expected: a coding skill usually runs build and test commands.
By bovinphang/frontend-craft (GitHub) · coding · 23 stars · scanned at commit 2d779d3
Use when creating or exporting structured technical diagrams, including architecture, workflows, sequence diagrams, data flows, lifecycle diagrams, agent or memory flows, local interactive previews, and PNG quality checks. Use editable draw.io sources when long-term manual editing or vendor shapes matter. Do not use for UI mockups, product imagery, posters, or raster image editing.
Works with any agent that supports SKILL.md skills.
What this skill can do
Runs commands on your computer
The author does not mention this. It runs automatically when the plugin is installed. Expected for a coding skill.
Found in 22 places.
Show 17 more
- skills/cc-technical-diagrams/scripts/export-diagram.mjs, line 6
import { spawnSync } from "node:child_process"; - skills/cc-technical-diagrams/scripts/export-diagram.mjs, line 195
const result = spawnSync(command, [pngPath, "-background", "white", "-alpha", "remove", "-quality", "95", outputPath], { - skills/cc-technical-diagrams/scripts/export-diagram.mjs, line 210
const result = spawnSync("ffmpeg", ["-y", "-i", pngPath, "-q:v", "2", outputPath], { - skills/cc-technical-diagrams/scripts/export-diagram.mjs, line 233
const result = spawnSync("powershell", ["-NoProfile", "-Command", script], { - skills/cc-technical-diagrams/scripts/export-diagram.mjs, line 247
const result = spawnSync("sips", ["-s", "format", "jpeg", outputPath, "--out", outputPath], { - skills/cc-technical-diagrams/scripts/mermaid-render.mjs, line 6
import { spawnSync } from "node:child_process"; - skills/cc-technical-diagrams/scripts/mermaid-render.mjs, line 39
const version = spawnSync(command, [...prefix, "--version"], { encoding: "utf8", timeout, windowsHide: true }); - skills/cc-technical-diagrams/scripts/mermaid-render.mjs, line 44
const result = spawnSync(command, [...prefix, "-i", input, "-o", artifact, "-t", theme], { encoding: "utf8", timeout, windowsHide: true }); - .mcp.json, line 4
"command": "npx", - .mcp.json, line 11
"command": "npx", - .mcp.json, line 18
"command": "npx", - .mcp.json, line 25
"command": "npx", - .mcp.json, line 37
"command": "npx", - hooks/hooks.json, line 9
"command": "node \"${CLAUDE_PLUGIN_ROOT}/dist/hooks/fec-security-check.js\"", - hooks/hooks.json, line 22
"command": "node \"${CLAUDE_PLUGIN_ROOT}/dist/hooks/fec-format-changed-file.js\"", - hooks/hooks.json, line 35
"command": "node \"${CLAUDE_PLUGIN_ROOT}/dist/hooks/fec-cleanup-claude-cache.js\"", - hooks/hooks.json, line 40
"command": "node \"${CLAUDE_PLUGIN_ROOT}/dist/hooks/fec-session-start.js\"",
and 2 more places
Connects to the internet
The author does not mention this.
Found in 3 places.
Downloads and installs other software
The author does not mention this. It runs automatically when the plugin is installed.
Found in 5 places.
Show 2 more
Safer alternatives
Low-risk skills in the same category (coding) that look related. Check that one does what you need.
Other copies in this repository
bovinphang/frontend-craft has 1 more folder with a skill named cc-technical-diagrams. This page shows the lowest-scoring copy.
Install
Paste this into your terminal. It downloads exactly the version we scanned, not whatever is newest.
if [ -e ~/.agents/skills/'cc-technical-diagrams' ] || [ -L ~/.agents/skills/'cc-technical-diagrams' ]; then echo 'A skill folder named cc-technical-diagrams already exists — not replacing it' >&2; false; else d=$(mktemp -d) && git clone --quiet --filter=blob:none --no-checkout 'https://github.com/bovinphang/frontend-craft' "$d" && git -C "$d" checkout --quiet '2d779d35f55643e3b6dab139fcc56ddf453260b0' -- 'skills/cc-technical-diagrams' && mkdir -p ~/.agents/skills && cp -R "$d"/'skills/cc-technical-diagrams' ~/.agents/skills/'cc-technical-diagrams' && rm -rf "$d"; fi
Codex reads ~/.agents/skills directly. For Claude Code, Cursor, Copilot, Gemini CLI, Antigravity or OpenCode, also link it. For Claude Code: ln -s ~/.agents/skills/'cc-technical-diagrams' ~/.claude/skills/'cc-technical-diagrams' (other agents: ~/.cursor/skills, ~/.copilot/skills, ~/.gemini/skills, ~/.gemini/config/skills, ~/.config/opencode/skills). Or install through the finder skill, which does both.
Badge for your README
The badge for bovinphang/frontend-craft shows the score of its lowest-scoring skill.
[](https://zalavijaysinh.github.io/skilltrust/repos/bovinphang/frontend-craft/)
Score history
| Date | Version | Score |
|---|
| 2026-11-12 | 2d779d3 | 75 |