Menú
Effective Mermaid diagrams. Use when creating markdown documents with human audiences.
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Basado en la clasificación ocupacional SOC
Declare what the system should be before writing code. Use when building new features, redesigning feature areas, or making significant changes that need a declaration of intent. Guides the declaration chain from findings through plans.
Wear the QA hat — think about quality the way a 15-year senior QA thinks. Use when building features, reviewing work, validating output, or when anything feels "done" but hasn't been proven to work. Prevents the gap between "it runs" and "it works."
Evidence-first research with mandatory citations and source evaluation. Use when gathering information for decisions, comparing approaches, investigating unknowns, or any task requiring verified evidence from multiple sources. Invoke at the START of research, not when writing up results.
Check and invoke available skills before starting work. Invoke at the start of any task to ensure relevant skills are loaded.
Guides effective documentation creation. Activates relevant guidance for north-star, gestalt, reference, research, design, plan, flow, findings, concepts, or process documents. Prevents cascading harm from wrong information.
Audit, sanitize, and package ~/.claude/ configuration into a distributable repository with versioned releases. Use when updating the public agentic-config repo, syncing local changes, creating releases, or auditing for PII. Handles cross-platform install scripts and semantic versioning.
| name | mermaid-diagrams |
| description | Effective Mermaid diagrams. Use when creating markdown documents with human audiences. |
| zones | {"knowledge":55,"constraint":25,"wisdom":15,"process":5} |
Diagrams reveal relationships that prose cannot express efficiently. Before creating one, ask if a list or table would work.
Never diagram linear sequences.
A --> B --> C --> D
This is a list pretending to be a diagram. Use a numbered list instead.
Test: If there are no branches, decisions, or parallel paths, use a list.
Invariant A diagram earns its place only when it reveals relationships or patterns that would require paragraphs to explain.
Example Request flows through validation, cache check, and database lookup with error handling at each branch. A flowchart shows all paths instantly; prose would need three paragraphs. //BOUNDARY: If deleting the diagram loses no critical information, delete it.
Depth
Invariant Quote labels containing spaces or special characters; escape markdown syntax in labels.
Example
graph LR
A["User Request"] --> B{Size?}
B -->|"> 1MB"| C["Process (async)"]
B -->|"< 1MB"| D["Process (sync)"]
//BOUNDARY: Unquoted labels with spaces break rendering.
Depth
>, <, - at start, 1. at start1. 2. 3.) in labels - breaks Mermaid syntaxreferences/syntax.mdInvariant
Document diagram meaning for both Claude (in %% comments) and users (in visible text or legend).
Example
graph TD
Request --> Check{Valid?}
Check -->|Yes| Success:::success
Check -->|No| Error:::error
classDef success fill:#90EE90,stroke:#2E7D32,color:#000
classDef error fill:#FFB6C1,stroke:#C62828,color:#000
%% MEANING: Request validation flow
%% GOTCHA: Retries omitted for clarity
Colors: Green = success path, Red = error path
Depth
%% comments: For Claude's context (invisible in rendered output)| Need | Use | Reference |
|---|---|---|
| Process with branches/decisions | Flowchart | references/flowchart.md |
| Multi-party interactions over time | Sequence | references/sequence.md |
| State transitions | State diagram | references/state.md |
| Database schema | ER diagram | references/er-diagram.md |
| Code class hierarchy | Class diagram | references/class.md |
| Project schedule | Gantt chart | references/gantt.md |
| Historical events | Timeline | references/timeline.md |
| Concept hierarchy | Mindmap | references/mindmap.md |
| Quantity flows | Sankey | references/sankey.md |
| Proportions (3-7 items) | Pie chart | references/pie.md |
| Prioritization (2D) | Quadrant chart | references/quadrant.md |
| Trend/metric data | XY chart | references/xy-chart.md |
| Service topology (20+) | Architecture | references/architecture.md |
| Hierarchical proportions | Treemap | references/treemap.md |
| Workflow stages | Kanban | references/kanban.md |
Decision tree in your head:
Non-negotiable:
color:#000)Suggested semantic palette:
--success: fill:#90EE90,stroke:#2E7D32,color:#000
--error: fill:#FFB6C1,stroke:#C62828,color:#000
--warning: fill:#FFE082,stroke:#F57C00,color:#000
--info: fill:#81D4FA,stroke:#0277BD,color:#000
Before committing:
Consult for specific diagram types:
references/flowchart.md - Process with branches/decisionsreferences/sequence.md - Multi-party interactionsreferences/state.md - State transitionsreferences/er-diagram.md - Database schemareferences/class.md - OOP hierarchiesreferences/gantt.md - Project schedulesreferences/timeline.md - Historical eventsreferences/mindmap.md - Concept hierarchiesreferences/pie.md - Proportions (3-7 items)references/xy-chart.md - Trends and metricsreferences/quadrant.md - 2D prioritizationreferences/sankey.md - Quantity flowsreferences/treemap.md - Hierarchical proportionsreferences/architecture.md - Service topologyreferences/kanban.md - Workflow stagesreferences/syntax.md - Quoting, escaping, layout enginesDiagrams are expensive. Make them earn their place.