Menü
Map any system or workflow as a beautiful interactive HTML diagram
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
| name | workflow-visualizer |
| description | Map any system or workflow as a beautiful interactive HTML diagram |
| triggers | ["visualize this workflow","map out this system","diagram my workflow","show how this works"] |
| context | fork |
Turn any system description into a beautiful, interactive HTML diagram. Click nodes, hover for details, and see exactly how data flows through your workflow. One self-contained HTML file, no dependencies.
When you say "visualize this workflow" or "map out this system", this skill parses your description, identifies every component, and builds an interactive diagram you can open in any browser.
Extract these components from the user's description:
| Component | What to Look For | Example |
|---|---|---|
| Triggers | What starts the workflow | "When a new email arrives", "Every morning at 9am" |
| Inputs | Data that enters the system | "Email body", "CSV file", "API response" |
| Processing Steps | Actions that transform data | "Extract key info", "Summarize text", "Filter results" |
| Tools / Services | External tools or APIs used | "Claude", "Zapier", "Google Sheets", "Slack" |
| Decision Points | Conditional branches | "If priority is high", "When amount > $100" |
| Outputs | Final results or deliverables | "Send Slack message", "Update spreadsheet", "Generate report" |
| Loops | Recurring or repeating steps | "Repeat for each item", "Run daily" |
| Data Stores | Where data lives between steps | "Database", "JSON file", "Spreadsheet" |
If the user's description is vague, ask clarifying questions before building.
Select the layout that best fits the workflow shape:
| Layout | Structure | Best For |
|---|---|---|
| Left-to-Right Flow | Horizontal chain of nodes | Linear processes, pipelines, simple workflows |
| Top-Down Waterfall | Vertical cascade | Sequential steps, decision trees, funnels |
| Hub and Spoke | Central node with radiating connections | One tool that connects to many, API integrations |
| Swimlane | Horizontal lanes per tool/person | Multi-team processes, handoffs between systems |
| Circular | Loop back to start | Recurring workflows, feedback loops, monitoring |
Generate a single self-contained HTML file with these features:
| Node Type | Background | Border | Icon Style |
|---|---|---|---|
| Trigger | #1e3a5f | #3B82F6 (blue) | Lightning bolt, clock, webhook |
| Processing | #1a3d2e | #10B981 (green) | Gear, wand, filter |
| Tool / Service | #3d2e1a | #F59E0B (amber) | Tool logo or wrench |
| Output | #3d1a1a | #EF4444 (red) | Check, send, export |
| Data Store | #1a1a2e | #6366F1 (indigo) | Database, folder, file |
| Decision | #2e1a3d | #A855F7 (purple) | Question mark, fork |
Each node displays:
Lines: Solid with arrowheads, color matches source node border, optional data label, animated dash on highlight.
Hover: Node scales 1.05x, border glows, tooltip with step description.
Click: Highlights node and direct connections, dims unconnected nodes, click background to reset.
Responsive:
Page bg #0f0f0f, container #161616, header text #ffffff, subtitle #888888, node text #ffffff, connections #444444 (colored when highlighted). System sans-serif font, 12px border radius, 20px node padding, 160px min node width.
Include a header (workflow name + description), the diagram container, and a color-coded legend (Blue=Triggers, Green=Processing, Amber=Tools, Red=Outputs, Indigo=Data Stores, Purple=Decisions). All styles and JS inline, no external dependencies.
Audits the security posture of an AI agent (codebase or architecture description): finds toxic combinations, reviews MCP governance and guardrails, and produces a prioritized report with an optional red-team plan. Use when reviewing agent security, auditing MCP configs, or assessing prompt-injection and exfiltration risk.
Manage Plane.so project management via the planecli CLI — list, create, update, and search work items, projects, cycles/sprints, modules, labels, states, documents, and comments. ALWAYS use this skill when the user mentions Plane, Plane.so, planecli, or references work item identifiers like ABC-123, FE-234, MOB-45. Also invoke when the user asks to manage tasks, issues, sprints, backlogs, or project boards AND either explicitly mentions Plane or the project context indicates Plane is the tool in use. Do NOT use for other project management tools (Jira, Linear, Asana, Trello, Azure DevOps Boards).
Analyzes coupling between modules using the three-dimensional model (strength, distance, volatility) from "Balancing Coupling in Software Design". Use when asking "are these modules too coupled?", "show me dependencies", "analyze integration quality", "which modules should I decouple?", "coupling report", or evaluating architectural health. Do NOT use for domain boundary analysis (use domain-analysis) or component sizing (use component-identification-sizing).
Reviews frontend files (`.tsx`, `.ts`, `.js`) for code quality, performance, and business logic issues. Use when the user requests a code review of frontend files, when reviewing staged changes before commit, or when checking specific components for best-practice violations.
Generates Vitest + React Testing Library tests for frontend components, hooks, and utilities. Use when writing tests, reviewing spec files, improving coverage, or when the user mentions Vitest, RTL, unit tests, or integration tests.
Produce HTML output instead of markdown for any agent task. Four levels — Static Doc, Visual Artifact, Two-Way Interactive, Throwaway Tool. Based on Thariq Shihipar's "Unreasonable Effectiveness of HTML" framework. Triggers on "/html-it", "html-it", "html this", "render as html", "build me an html", "make an html artifact".
