Claude With Skills is a progressive course that teaches developers to create reusable, portable Agent Skills for Claude Code, from basic SKILL.md files to advanced automation and plugin packaging. It is intended for developers who want repeatable instructions and workflows instead of repeatedly pasting the same guidance. The catalogue contains the course's skills, agents, and instruction.
Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add davila7/claude-with-skills --skill codebase-visualizergit clone --depth 1 https://github.com/davila7/claude-with-skillsWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/davila7/claude-with-skills/codebase-visualizer)<a href="https://agentmods.dev/skills/davila7/claude-with-skills/codebase-visualizer"><img src="https://agentmods.dev/badge/skills/davila7/claude-with-skills/codebase-visualizer/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/davila7/claude-with-skills/codebase-visualizer"><img src="https://agentmods.dev/badge/skills/davila7/claude-with-skills/codebase-visualizer.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00057 | $0.00374 |
| Opus 5.5 | $0.00023 | $0.00150 |
| Sonnet 5.5 | $0.00011 | $0.00075 |
| Haiku 4.5 | $0.00006 | $0.00037 |
Grade A, and why
codebase-visualizer scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 2mo ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
What it actually says
Generate an interactive collapsible HTML tree of the project.
Usage
Run the visualizer script from the project root:
python3 ${CLAUDE_SKILL_DIR}/scripts/visualize.py .
This creates codebase-map.html in the current directory and opens it in the default browser.
What it shows
- Collapsible directory tree — click any folder to expand or collapse it
- File sizes displayed next to each file name
- Color-coded dots for file types (.js, .ts, .py, .go, .rs, and more)
- Directory size totals (sum of all files within)
- Sidebar summary: total file count, directory count, total size, number of unique file types
- Bar chart of the top 8 file types by total size
Ignored automatically: .git, node_modules, __pycache__, .venv, venv, dist, build, and any directory or file whose name starts with ..
Instructions
- Run the command above from the root of the project you want to visualize.
- Report the absolute path of the generated file.
- The script opens the file in the default browser automatically. If it does not open, tell the user to open the reported path manually.
- If Python 3 is not available, report the error from the command and stop.
What ships with it
1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 2mo ago First seen · 37 lines · 57 tokens per session scan A f8ff59e54dbe
codebase-visualizer is a skill published in the GitHub repository davila7/claude-with-skills (13 stars, last pushed 5mo ago), licensed MIT. It adds 57 tokens to every session and 374 once invoked, about $0.0002 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
Art
Static visual content in 20+ formats (diagrams, infographics, comics, icons, wallpaper) via Nano Banana Pro by default, Nano Banana, and Flux, plus technical diagrams and a few essay illustrations that draw themselves as looping GIFs. USE WHEN art, illustration, diagram, flowchart, animated diagram, diagram GIF…
RichFormat
The rich-answer rendering mod, a Claude Code function-hooks plugin that draws assistant replies in the terminal with boxed flow diagrams, bar charts, sparklines, trees and timelines, coloured section labels, insight and caution callout bars, red and green diffs, and green and red VERIFY marks, leaving the stored text…
Excalidraw
Sketches ideas as hand-drawn Excalidraw diagrams on a live local canvas via the pinned mcp-excalidraw-server CLI, with mermaid conversion, file I/O, and share links. USE WHEN excalidraw, whiteboard, canvas, sketch a diagram, draw this on a canvas, hand-drawn diagram, draw my idea, architecture sketch, live canvas, put…
Webdesign
Designs and integrates web interfaces via DirectDesign (inline, Anthropic frontend-design philosophy, the default) or NativeDesign (/design artboards plus /design-sync design-system sync). USE WHEN web design, UI design, artboards, design variants, create prototype, design system, design sync, redesign site, mockup…
Visualize
Visualizes anything at all and never declines — a codebase, a physical setup, a timeline, a process, finances, a comparison, a concept, a URL, a dataset — as a short console summary plus a designed HTML page, every fact labelled with where it came from (a file quote, a URL, the principal's words, or general…
ApertureOscillation
3-pass scope oscillation that holds a question constant while shifting zoom — narrow/tactical, wide/strategic, then synthesis — to surface design tensions, scope recommendations, and coherence assessments invisible at any single zoom level. USE WHEN aperture oscillation, oscillate scope, zoom in and out, tactical vs…