visual-explainerGenerate beautiful, self-contained HTML pages that visually explain systems, code changes, plans, and data. Use when the user asks for a diagram, architectur...
Install via ClawdBot CLI:
clawdbot install bengii/visual-explainerGrade Fair — based on market validation, documentation quality, package completeness, maintenance status, and authenticity signals.
Calls external URL not in known-safe list
https://github.com/nicobailon/surf-cliUses known external API (expected, informational)
googleapis.comAudited Apr 16, 2026 · audit v1.0
Generated Mar 21, 2026
A development team needs to visualize a microservices architecture for a new project. The skill generates an HTML page with Mermaid diagrams showing service connections and CSS Grid cards detailing each component's responsibilities and tech stack, aiding in team alignment and documentation.
A project manager requires a visual overview of a product launch plan with timelines and task dependencies. The skill creates an HTML page using a timeline or flowchart layout, styled with an Editorial aesthetic for clear communication to stakeholders during meetings.
During a code review, a developer wants to compare changes between branches. The skill proactively generates an HTML data table with a Blueprint aesthetic, displaying diffs and metrics in a structured format instead of ASCII, making it easier to spot issues.
A data analyst needs to present quarterly performance metrics. The skill builds an HTML dashboard with tables and charts using a Data-dense aesthetic, incorporating responsive navigation for multiple sections, enabling interactive exploration of key insights.
An educator designs visual explanations for complex technical concepts like state machines or ER diagrams. The skill uses Mermaid diagrams in a Paper/ink aesthetic to create engaging, self-contained HTML pages for students, enhancing learning materials.
Offer the skill as a cloud-based service where users pay a monthly fee to generate and host visual HTML pages. Include features like collaboration tools, version history, and premium templates, targeting teams in tech and consulting industries.
Sell annual licenses to large organizations for internal use, integrating the skill into their development workflows. Provide custom support, security audits, and API access for seamless adoption in corporate environments like finance or healthcare.
Release a free version with basic features to attract individual developers and small teams, then upsell to a paid tier with advanced aesthetics, larger file exports, and priority support. Monetize through upgrades and optional add-ons like AI image generation.
💬 Integration Tip
Integrate the skill into CI/CD pipelines to automatically generate visual reports for code reviews, or use it in documentation tools to enhance technical guides with interactive diagrams.
Scored May 5, 2026
Use when building UI with shadcn/ui components, Tailwind CSS layouts, form patterns with react-hook-form and zod, theming, dark mode, sidebar layouts, mobile navigation, or any shadcn component question.
Tailwind reference tool. Use when working with tailwind in frontend contexts.
A product creation skill based on the "Bee Website Builder" Open API. It is used to create a new product under a specified site language and product group, w...
A product update skill based on the "Bee Website Builder" Open API. It is used to update an existing product under a specified site language and supports upd...
Build WCAG 2.1 AA compliant websites with semantic HTML, proper ARIA, focus management, and screen reader support. Includes color contrast (4.5:1 text), keyboard navigation, form labels, and live regions. Use when implementing accessible interfaces, fixing screen reader issues, keyboard navigation, or troubleshooting "focus outline missing", "aria-label required", "insufficient contrast".
Use when building Vue 3 applications with Composition API, Nuxt 3, or Quasar. Invoke for Pinia, TypeScript, PWA, Capacitor mobile apps, Vite configuration.