Menu
Create Mermaid diagrams following hyperfrontend standards. Use when adding diagrams to documentation, creating flowcharts, sequence diagrams, or architecture visualizations. Enforces theme configuration and bans hardcoded colors.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Write conventional commits for the hyperfrontend monorepo — types, scopes (Nx project names), one-line subjects, atomic commits, versioning-harness boundaries. Use when committing, splitting work into commits, choosing a commit scope/type, or asked about commit format.
Register friction found while building hyperfrontend demos into the showcase findings registry. Use when a demo consuming @hyperfrontend/features surfaces an unclear API, confusing error, missing feature, docs gap, packaging snag, or DX papercut — file the finding before writing the workaround.
Write README.md files for hyperfrontend libraries and sub-modules. Use when creating library documentation, writing sub-module READMEs, documenting API tables, adding quick start guides, or reviewing README structure compliance.
Write ARCHITECTURE.md files for hyperfrontend libraries. Use when creating architecture documentation, documenting design decisions, adding system overview diagrams, or explaining module composition and data flow.
Coding conventions for the hyperfrontend Nx monorepo. Use when refactoring, adding features, fixing bugs, or writing any new code across libs/, apps/, tools/, or plugins/.
Achieve 100% code coverage for custom ESLint rules. Use when reviewing ESLint rules for coverage gaps, adding missing tests, or applying istanbul ignore comments.
| name | mermaid-diagrams |
| version | 1.0.0 |
| description | Create Mermaid diagrams following hyperfrontend standards. Use when adding diagrams to documentation, creating flowcharts, sequence diagrams, or architecture visualizations. Enforces theme configuration and bans hardcoded colors. |
All diagrams MUST include theme config. No hardcoded colors. No ASCII art.
---
config:
theme: base
themeVariables:
fontSize: 12px
---
flowchart TD
A[Component] --> B[Component]
Banned: style A fill:#hex or any inline color styling.
Exception: classDef for layout only (no colors):
classDef cleanWide fill:none,stroke:none,text-align:left
ESLint rule no-ascii-art-diagrams bans box-drawing: ┌┐└┘│─├┤┬┴┼
Use Mermaid instead of ASCII diagrams.
style X fill:#hex statementsclassDef only for layout (no colors)