Toolverse
All skills
Frontend

mermaid-gen

by vladm3105

Generate syntactically correct Mermaid diagrams for technical documentation

Installation

Pick a client and clone the repository into its skills directory.

Installation

Quick info

Author
vladm3105
Category
Frontend
Views
124
GitHub repo

About this skill

Generate syntactically correct Mermaid diagrams for technical documentation

How to use

  1. Zainstaluj umiejętność mermaid-gen w swoim środowisku Claude lub kompatybilnym asystencie AI, dodając ją do konfiguracji skills.

  2. Użyj mermaid-gen gdy chcesz utworzyć nowy diagram Mermaid — opisz w języku naturalnym strukturę, którą chcesz przedstawić (np. przepływ procesu, interakcje między komponentami, przejścia stanów).

  3. Asystent zastosuje wiedzę z umiejętności, aby wygenerować składniowo poprawny kod Mermaid, unikając typowych błędów takich jak nieprawidłowe cudzysłowy, znaki specjalne czy malformed syntax.

  4. Jeśli masz istniejący diagram z błędami renderowania, podaj jego kod i komunikat błędu — umiejętność pomoże zdiagnozować problem i zaproponować poprawkę.

  5. Przed zatwierdzeniem diagramu w dokumentacji, poproś o walidację składni — umiejętność sprawdzi go względem sprawdzonych szablonów i konwencji nazewnictwa.

  6. Dla złożonych diagramów (schematy blokowe, diagramy sekwencji, maszyny stanów) skonsultuj się z umiejętności w sprawie best practices dotyczących struktury, stylizacji i organizacji węzłów.

Related skills

zustand

by lobehub

Zustand state management guide. Use when working with store code (src/store/**), implementing actions, managing state, or creating slices. Triggers on Zustand store development, state management questions, or action implementation.

Frontend
36126

tailwind-design-system

by wshobson

Build scalable design systems with Tailwind CSS, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.

Frontend
2676

screenshot-to-code

by OneWave-AI

Convert UI screenshots into working HTML/CSS/React/Vue code. Detects design patterns, components, and generates responsive layouts. Use this when users provide screenshots of websites, apps, or UI designs and want code implementation.

Frontend
94209

shadcn-ui-setup

by maneeshanif

Install and configure Shadcn/ui component library with Radix UI primitives, Aceternity UI effects, set up components, and manage the component registry. Use when adding Shadcn/ui to a Next.js project or installing specific UI components for Phase 2.

Frontend
23167

frontend-slides

by sickn33

Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual

Frontend
65135

browser-automation

by browserbase

Automate web browser interactions using natural language via CLI commands. Use when the user asks to browse websites, navigate web pages, extract data from websites, take screenshots, fill forms, click buttons, or interact with web applications. Triggers include \

Frontend
21175