# Tools

> Every listed resource, editors’ picks first. The filters below can be combined.

- Search: append `?q=<keywords>` to the URL. Separate several keywords with spaces; all of them must match. Matches name, repository, tags, professions, description and README.
- Filter by type: append `?type=<cli|skill|plugin|mcp>` to the URL.
- Filter by profession: append `?profession=<profession id>` to the URL. Separate several ids with commas; a resource matches when it suits any of them. Ids are listed at https://hebbmind.com/api/v1/professions
- Filter by tag: append `?tag=<tag>` to the URL. Separate several tags with commas; a resource must carry all of them. Tags are listed at https://hebbmind.com/api/v1/tags

Resources for Full-stack / Indie or DevOps / SRE or ML / AI or Admin / Office, Tagged `html`: 8 items.

> - Full-stack / Indie: General software work: coding-agent workflows, code review, debugging and Git collaboration.
> - DevOps / SRE: Deployment, monitoring, cloud resources and reliability.
> - ML / AI: Model training, evaluation and LLM application development.
> - Admin / Office: Docs, spreadsheets and slides, reports, email and calendars, meeting notes and daily admin.

- [Archify](https://hebbmind.com/skill/archify.md): [Skill] Turns natural-language descriptions, Mermaid or a real code repo into interactive single-file HTML diagrams: architecture, flowcharts, sequence diagrams, data flows and state machines. Validates output automatically and exports PNG or SVG.
- [Diagram Design](https://hebbmind.com/skill/diagram-design.md): [Skill] Generates self-contained HTML+SVG diagrams in an editorial style: architecture, flowcharts, sequence, swimlane, Gantt and dozens more types. Can match brand colors from a website and redraw imported Mermaid, draw.io and Excalidraw sources.
- [Playground](https://hebbmind.com/plugin/playground.md): [Plugin] Has the agent build single-file HTML interactive playgrounds: visual controls on one side, live preview on the other, and a prompt to copy back into Claude. Templates for design tuning, data exploration, concept maps, doc annotation, code review and architecture diagrams. By Anthropic.
- [Frontend Slides](https://hebbmind.com/skill/frontend-slides.md): [Skill] Generates zero-dependency, animated HTML slide decks: previews several visual styles to choose from first, and can convert PowerPoint decks to web slides. Made for non-designers who don't write CSS.
- [Guizang PPT Skill](https://hebbmind.com/skill/guizang-ppt-skill.md): [Skill] Generates single-file HTML slide decks with horizontal paging and two built-in visual systems (editorial magazine and Swiss International style), plus presenter mode with speaker notes. Can also make slide illustrations and covers for various platforms. By Guizang.
- [visual-explainer](https://hebbmind.com/skill/visual-explainer.md): [Skill] Turns architecture explanations, diff reviews, plan reviews and data comparisons into self-contained HTML pages or slides with Mermaid diagrams and light and dark themes, replacing ASCII diagrams in the terminal.
- [WeasyPrint](https://hebbmind.com/cli/weasyprint.md): [CLI] Rendering engine that lays out HTML and CSS and exports PDF, supporting paged media and other print style standards, ideal for generating reports, invoices and receipts in bulk. Written in Python; depends on the system Pango library.
- [Slide Wright](https://hebbmind.com/skill/slide-wright.md): [Skill] Turns a topic, rough notes or an outline into an animated web slide deck. Invents a custom theme, shows a two-slide preview and builds the full single-file HTML deck with speaker notes only after you approve. Also edits existing reveal.js decks and can export PDF or deploy.