{
  "markdown": "# visual-explainer-extension\n\n![visual-explainer-extension banner](banner.png)\n\n**Strikingly well-designed HTML diagrams and reports for the Gemini CLI.**\n\nABOUTME: `visual-explainer-extension` is a high-fidelity fork of the original `visual-explainer` project. It transforms complex terminal output into sophisticated, human-crafted HTML pages featuring advanced CSS orchestration, premium typography, and native AI image generation.\n\n## Project Overview\n\nThis extension replaces generic ASCII art and \"AI-slop\" templates with interactive HTML pages that follow a strict **Design Engineering Mandate**. It uses modern CSS techniques like `@layer` and `@container` to produce layouts that feel professional, intentional, and high-contrast.\n\n### 🚀 Next-Level Features (v1.0.0+)\n\n- **Advanced CSS Orchestration**: Uses CSS Layers (`@layer`) for robust style management and Container Queries (`@container`) for modular, adaptive components.\n- **Premium Typography**: Strictly forbids generic fonts (Inter, Roboto). Employs \"High-Character\" pairings like *Instrument Serif + JetBrains Mono* and *IBM Plex Sans + Mono*.\n- **Aesthetic Recipes**: Built-in high-fidelity modes for **Blueprint**, **Editorial**, and **Paper/Ink** aesthetics.\n- **Interactive Components**: \n  - **Intent Bridge**: Maps natural language intent directly to code implementation.\n  - **Archetype Cards**: Modular system overviews with AI-generated icons.\n  - **Enhanced Code Windows**: IDE-like blocks with file tabs and sophisticated syntax highlighting.\n- **Proactive Image Generation**: Automatically generates hero banners, module icons, and background patterns using the built-in Gemini Image tools.\n- **Anti-Slop Enforcement**: Hard rules to prevent generic AI patterns (no indigo gradients, no emoji headers, no unstructured code dumps).\n\n## Main Technologies\n\n- **HTML5 / Modern CSS**: Vanilla implementation leveraging CSS Layers and Container Queries.\n- **Mermaid.js (ESM)**: For topology-heavy diagrams with `layout: 'elk'` support.\n- **Chart.js**: For data-driven dashboards and metric visualizations.\n- **Lucide Icons**: Clean, consistent technical icons via SVG.\n- **Node.js / MCP**: Native image generation tools using the Gemini API.\n\n## Installation\n\n```bash\n# Link the extension to your Gemini CLI\ngemini extensions link .\n```\n\n## Available Commands\n\n### Visualization Commands\n| Command | Description |\n|---------|-------------|\n| `/diff-review` | Visual diff review with architecture comparison. |\n| `/fact-check` | Verify accuracy of a document against code. |\n| `/generate-slides` | Generate a magazine-quality slide deck. |\n| `/generate-visual-plan` | Generate a visual implementation plan. |\n| `/generate-web-diagram` | Generate an HTML diagram for any topic. |\n| `/plan-review` | Compare a plan against the codebase. |\n| `/project-recap` | Mental model snapshot for context-switching. |\n| `/visual-code-explain` | Explain the logic of a code file using Intent Bridges. |\n| `/code-archetype` | Generate structural cards for a module or subsystem. |\n\n### Image Generation (Nanobanana Integration)\n| Command | Description |\n|---------|-------------|\n| `/visual-generate` | Generate high-quality images from prompts. |\n| `/visual-icon` | Create app icons and UI elements. |\n| `/visual-pattern` | Generate seamless, tileable textures. |\n| `/visual-story` | Create visually consistent story sequences. |\n| `/visual-diagram` | Generate professional diagrams as images. |\n\n## Model Instructions (SKILL.md)\n\nThe core logic and design principles are located in `skills/visual-explainer/SKILL.md`. The model follows a **Design Tokens first** workflow, ensuring every output meets the \"Squint Test\" for visual hierarchy and the \"Swap Test\" for design intent.\n\n## Development\n\n- **Testing**: Use `gemini extensions link .` to test locally.\n- **Portability**: Keep HTML self-contained. All styles and logic are inlined for single-file portability.\n- **Performance**: Minimizes turns by reading reference materials in parallel.\n\n---\n*Forked from the original `visual-explainer` repository. Re-engineered for aesthetic excellence.*\n",
  "bytes": 4111,
  "sha": "18951e2ef5df1d6e036a8dc75498414e00b3177bafc5e5d340d95a7dea738685",
  "repo_slug": "jakedismo/visual-explainer-extension",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/plg_jakedismo_visual_explainer_extension_6d44b5b9/readme"
}