diagram
Diagram — Visual Rendering via Snip
Generate a visual diagram or HTML preview from the current conversation context and render it with Snip.
Step 1: Analyze context and choose format
Review the conversation to determine what to visualize.
Choose Mermaid for: architecture diagrams, sequence diagrams, flowcharts, ER diagrams, class diagrams, state diagrams, Gantt charts, git graphs, mind maps, timelines, or any structural/relational/flow visualization.
Choose HTML for: UI mockups, component previews, landing pages, dashboards, styled cards, data tables, or anything where visual design (colors, typography, layout) is the point.
Step 2: Pick the right Mermaid diagram type
When using Mermaid, select the most appropriate type:
More from juparave/dotfiles
flutter-riverpod-expert
Expert knowledge in Flutter Riverpod state management (2025 best practices). Use when working with Riverpod, Flutter state management, AsyncNotifier, provider types, code generation with riverpod_generator, state synchronization, or when the user mentions data fetching, mutations, reactive state, performance optimization, or testing in Flutter apps. Covers AsyncNotifierProvider patterns, repository architecture, autoDispose, family providers, and common anti-patterns to avoid.
691frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
1gh-issue-view
Read GitHub issues and PRs using the gh CLI. Use this skill whenever the user asks to read, view, check, or look at a GitHub issue or pull request — even if they just say "look at issue 18" or "what does #42 say". Always use this skill instead of bare `gh issue view` or `gh pr view` commands to avoid the GitHub Projects (classic) deprecation error that causes exit code 1.
1skill-creator
Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.
1stripe-integration
Implement Stripe payment processing for robust, PCI-compliant payment flows including checkout, subscriptions, and webhooks. Use when integrating Stripe payments, building subscription systems, or implementing secure checkout flows.
1karpathy-guidelines
Behavioral guidelines to reduce common LLM coding mistakes. Use when writing, reviewing, or refactoring code to avoid overcomplication, make surgical changes, surface assumptions, and define verifiable success criteria.
1