Skills DirectorySkills Directory
SkillsLearnSecurityCategoriesDocsCommunityBlog
Sign InSubmit Skill
Skills Directory

Security-tested agent skills for Claude, coding agents, and AI workflows.

Directory

  • Browse Skills
  • All Skills A–Z
  • Claude Skills
  • Claude Code Skills
  • Agent Skills
  • Categories
  • Submit a Skill

Learn

  • Learn Hub
  • Install Claude Skills
  • Write SKILL.md
  • Skills vs MCP
  • Directories Compared

Security

  • Security
  • Methodology
  • Secure Claude Skills
  • Security Badges

Company

  • About
  • Community
  • Blog
  • API Docs
  • Advertise

2026 Skills Directory. All rights reserved.

Back to skills

Mermate Tab Mermaid

ASecurity

Stage 3 tab (Mermaid) of the Mermate pipeline — Mermaid source compile/render to mastered PNG/SVG diagrams, depth scoring, and the run artifacts that TLA+ and TypeScript build from. Use when editing render pipeline, mermaid-cli integration, depth scoring, diagram output, or /api/render behavior.

3 stars
0 votes
0 copies
1 views
Added 9/11/2026
developmenttypescriptpythonnodeapifrontendbackend

Works with

cliapi

Security Analysis

A100/100

Scanned 9/11/2026

Install to Claude Code

$npx -y skills add DylanCkawalec/Mermate --skill mermate-tab-mermaid --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of Mermate Tab Mermaid?

Add the live security badge to your README — it updates automatically with every re-scan.

Security grade badge for Mermate Tab Mermaid
[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/dylanckawalec-mermate-tab-mermaid/badge)](https://www.skillsdirectory.com/skills/dylanckawalec-mermate-tab-mermaid)

More formats (shields.io, HTML) on the badges page.

Download Zip
Files
SKILL.md
---
name: mermate-tab-mermaid
description: Stage 3 tab (Mermaid) of the Mermate pipeline — Mermaid source compile/render to mastered PNG/SVG diagrams, depth scoring, and the run artifacts that TLA+ and TypeScript build from. Use when editing render pipeline, mermaid-cli integration, depth scoring, diagram output, or /api/render behavior.
---

# Mermate Tab 3 · Mermaid (mmd)

Operates under `mermate` master invariants; Lamport standards via `specification-master-agent`.

## Stage Identity (from `STAGE_REGISTRY.mmd`, public/js/mermaid-gpt-app.js)
- Label: **Mermaid** · reveal: `STAGE 3 · DIAGRAM` · color `#818cf8`
- Expected duration: ≈5–30s · enhance default: OFF · upload: `.mmd`
- **IPO contract**:
  - Input: markdown spec or raw .mmd source
  - Process: compile + repair + depth scoring
  - Output: mastered diagram (PNG/SVG) — **the run TLA+/TS build from**

## Owning Code
- Frontend: `public/js/mermaid-gpt-app.js` — `renderMermaid()` (line ~2287), depth badge, result display
- Backend: `server/routes/render.js` `POST /api/render` (lines 495–1047) — mermaid-cli (`@mermaid-js/mermaid-cli`), Python enhancer bridge (`MERMAID_ENHANCER_URL`, default localhost:8100), inference provider
- Depth scoring: `depth_score`/`depth_tier` (shallow|medium|deep), surfaced in response and reported to Opseeq
- Artifacts: `flows/` (rendered output), `archs/` (archived sources), `runs/` (lineage JSON with `run_id`)

## Stage Invariants
1. **The mastered run is the anchor**: `run_id` returned here is the input contract for `/api/render/tla` and `/api/render/ts`. Never regenerate a diagram implicitly in a later stage.
2. Success payload carries `paths`, `diagram_name`, `run_id`, `metrics`, and `progressionUpdate` unlocking `['idea','md','mmd','tsx','tla']` with `nextRecommended` set.
3. Compile failure emits `render_failed` stage event and a structured error — never a fabricated diagram.
4. Opseeq events `render_start`/`render_complete`/`render_failed` are fire-and-forget; render succeeds with Opseeq down.

## Anti-Patterns (Reject)
- Bypassing mermaid-cli with a hand-rolled renderer or "fixing" diagrams client-side.
- Losing `run_id` lineage (e.g. rendering without persisting to `runs/`).
- Duplicating depth-score semantics outside the single scoring path in the render route.

## Verification
- `node --test test/test-compiler.js`; render regression → `npm run test:regression`
- Live: render from each input_mode and confirm `flows/` + `runs/` artifacts and `progressionUpdate` payload

Attribution

DylanCkawalecDylanCkawalec
View sourceMore from DylanCkawalec →
SSkills DirectorySkills Directory

Ship a skill? Prove it's safe.

Free 120-pattern security scan, letter grade, and an embeddable README badge.

Submit a skill

Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.

Comments (0)

No comments yet. Be the first to comment!

SSkills DirectorySkills Directory

Ship a skill? Prove it's safe.

Free 120-pattern security scan, letter grade, and an embeddable README badge.

Submit a skill

Related Skills

Browser Extension Developer

Use this skill when developing or maintaining browser extension code in the `browser/` directory, including Chrome/Firefox/Edge compatibility, content scripts, background scripts, or i18n updates.

281612 votes

Seo Optimizer

SEO optimization with keyword analysis, readability assessment, technical validation, content quality. Use for search rankings, blog posts, content audits, or encountering keyword density, readability scores, meta tags, schema markup errors.

2132 votes

Google Official Seo Guide

Official Google SEO guide covering search optimization, best practices, Search Console, crawling, indexing, and improving website search visibility based on official Google documentation

1862 votes

Tanstack Start

Build a full-stack TanStack Start app on Cloudflare Workers from scratch — SSR, file-based routing, server functions, D1+Drizzle, better-auth, Tailwind v4+shadcn/ui. Use whenever the user mentions TanStack Start, asks to scaffold a full-stack Cloudflare app with SSR, wants an SSR dashboard, or asks for a React 19 + Cloudflare Workers app with file-based routing and server functions — even if they don't name TanStack Start specifically. No template repo — Claude generates every file fresh per ...

9881 votes

Pentest

PTES-aligned adversarial security audit for backend, frontend, and mobile applications. Produces a CVSS-scored Hacker Report with verified PoCs and phased remediation.

5491 votes
View all in development →