🔎 Diagrams, browser & research

beautiful-mermaid is a skill that takes Mermaid code (flowchart, sequence, class, ER…) and renders it as SVG or PNG using the mermaid.js library in an intermediate HTML file.

Text-generated diagrams are versionable and editable — no dragging boxes around in visual tools. You describe it, Claude draws it.

Mermaid DSL, programmatic rendering, vector SVG, raster PNG.

The skill supports all Mermaid types: flowchart (LR/TD), sequence, class, ER, Gantt, gitGraph, mindmap, and quadrantChart.

Each type solves a different problem — choosing the right one communicates better and saves revisions.

flowchart LR/TD, sequenceDiagram, classDiagram, erDiagram, gantt, mindmap.

Mermaid offers ready-made themes (default, dark, forest, neutral, base), and beautiful-mermaid selects the best one for the context or accepts direct instructions.

A diagram with the correct theme can be published directly in the documentation or a slide — no post-production needed.

%%{init: {"theme": "dark"}}%%, themeVariables, contrast, presentation vs. development.

The skill follows 5 steps: (1) generate/validate Mermaid code, (2) render SVG via CLI, (3) create an HTML wrapper, (4) capture a high-resolution PNG with agent-browser, (5) clean up intermediate files.

Understanding the pipeline lets you debug failures and know which step to customize.

mmdc CLI, HTML wrapper, viewport, screenshot, cleanup.

SVG is vector-based (scales without loss, editable) and ideal for the web; PNG is rasterized at high resolution (2×–3×) and ready for documents and slides.

Choosing the wrong format results in blurry diagrams in PDFs or files that are too large for the repository.

Vector SVG, raster PNG, DPI, 2×/3× resolution, compatibility.

The most common errors: theme not applied (init block misplaced), diagram cut off (viewport too small), and empty SVG (invalid Mermaid syntax).

Recognizing the symptom saves debugging time — every error has a predictable cause and solution.

init block, viewport, Mermaid syntax, pre-validation.

The excalidraw skill converts text descriptions (e.g., "login flow with 3 steps") into valid Excalidraw JSON, ready to open in the visual editor and continue editing by hand.

Starting from a generated draft is much faster than building from scratch — you refine it instead of creating from nothing.

Excalidraw JSON, natural language → structure, .excalidraw file, collaborative editing.

The skill recognizes 9 types: flowchart, relationship diagram, mind map, architecture, DFD, swimlane (business flow), class diagram, sequence diagram, and ER diagram.

Each type has its own layout and semantics — describing the right context produces a much more useful diagram.

User intent → diagram type; swimlane, ER, sequence, mind map.

The skill positions elements with horizontal spacing of 200–300px and vertical spacing of 100–150px, centering important elements and avoiding overlaps.

Well-calculated coordinates produce readable diagrams without having to rearrange everything in the visual editor.

x/y coordinates, horizontal/vertical gap, radial layout (mind map), grid layout (relationship).

All elements use fontFamily: 5 (Excalifont) and a consistent palette: light blue for primary, light green for secondary, yellow for central, light red for alerts.

Visual consistency makes the diagram look intentional — not like a random collage of shapes.

fontFamily: 5, strokeColor, backgroundColor, fontSize 16–24px, 4-color palette.

The output is a file .excalidraw (JSON with type, version, elements, and appState) saved in the current directory and directly openable in the Excalidraw app or VS Code.

Understanding the format lets you inspect and manually fix anything that came out wrong.

elements array, appState, unique IDs, type: "excalidraw".

The skill supports icons from external libraries (AWS, Azure, GCP, Kubernetes) installed in Excalidraw—when available, they enrich architecture diagrams with official icons.

Architecture diagrams with official icons communicate technology instantly and unambiguously.

Excalidraw libraries, .excalidrawlib, imageElement, fallback without an icon.

agent-browser is a skill that controls a real browser (via Playwright) with text commands — opening URLs, interacting with elements, taking screenshots, and extracting page data.

Browser automation is essential for validating built pages, testing forms, and confirming visual behavior before delivery.

Playwright, headless browser, automation, visual validation.

The basic cycle is always: (1) agent-browser open URL, (2) agent-browser snapshot -i to get refs for interactive elements, (3) interact using the returned refs.

The snapshot returns refs (@e1, @e2…) that are stable identifiers for interaction—without them, commands don't know where to click.

open, snapshot -i, refs @eN, click, type, fill.

The skill captures screenshots (agent-browser screenshot arquivo.png) and can record a full video of the session to document workflows or report bugs visually.

Screenshots are definitive proof that a page is correct — more reliable than inspecting HTML.

PNG screenshot, video recording, viewport 1920×1080, fullPage.

The skill fills in fields (fill @ref "valor"), selects options, clicks buttons, and checks the result — perfect for testing signup, login, and checkout flows.

Manually testing each form after every change is impractical — automation ensures fast regression testing.

fill, select, check, submit, assert-text, assert-visible.

The skill extracts text (get-text), attributes (get-attr), cookies, localStorage, and even intercepts network requests to inspect APIs in real time.

Extracting data from the DOM or network is a shortcut to validate that the page displays what the backend sent.

get-text, get-attr, cookies, localStorage, network intercept.

The skill supports multiple browser sessions in parallel, headed mode (visible) for debugging, and saving authentication state to reuse logged-in sessions.

Parallel sessions let you test multi-user flows; headed mode lets you see exactly what the browser sees.

session, headed mode, storage state, parallel browsers, auth reuse.

website-intelligence is a 6-phase skill: client brand extraction → niche analysis → competitive report → build brief → site build → quality audit.

Instead of guessing what the client needs, you start with real market data — the resulting website is grounded in evidence, not opinion.

Firecrawl MCP, web scraping, competitive analysis, data-driven design.

Phase 1 uses Firecrawl to extract the client's visual identity, tone of voice, and site structure. Phase 2 finds the 10 biggest competitors and deeply scrapes the 5 best.

Without understanding the market, the site feels generic. With real data, every design decision has a rationale.

mcp__firecrawl__scrape, mcp__firecrawl__search, visual identity, top 10%, market patterns.

The skill generates a polished HTML report (with @media print) that includes profiles of the 5 competitors, a comparison table, an SEO landscape, and recommended design direction.

A visual report delivered to the client justifies creative decisions and builds trust before the build.

competitive-analysis.html, @media print, Instrument Serif, DM Sans, swatches, comparison table.

Before building, the skill stops and presents a brief with design direction, site architecture, content framework, and conversion playbook—requiring explicit approval.

The hard stop prevents building in the wrong direction — reworking a complete site is 10× more expensive than reviewing a brief.

Hard stop, approval, build brief, design direction, site architecture.

With the brief approved, the skill builds the complete site: scroll-triggered animations for every transition, parallax, premium micro-interactions, and a dark/light visual rhythm — Apple/Stripe quality.

Seeing the complete "research → website" process demystifies how premium websites are built using real data.

Scroll-triggered, parallax, micro-interactions, dark/light, 3D placeholder, cinematic feel.

The final phase audits SEO (H1, meta, schema), accessibility (alt text, contrast, ARIA), performance (cache, lazy loading), and checks the client-ready checklist before declaring the build complete.

A beautiful site that doesn't pass the audit isn't deliverable — phase 6 ensures form and function are aligned.

SEO audit, WCAG accessibility, performance, checklist, preview deploy.