Claude Code Skills

Production-grade Claude Code skills for visual documentation, knowledge management, and developer productivity.

Skills

Skill	Command	Description
Visual Explainer	/visual-explainer	Generate rich, interactive HTML pages that explain any technical concept with diagrams, animations, and code examples
Knowledge Base	/kb	Create structured knowledge base entries for bug fixes and incidents using 5 Whys root cause analysis

Installation

Via Plugin (recommended)

claude plugin add vrajasekaran/claude-skills

Manual (copy to your project)

# Project-level (committed to repo, shared with team)
cp -r skills/ .claude/skills/

# User-level (available in all your projects)
cp skills/visual-explainer/SKILL.md ~/.claude/commands/visual-explainer.md
cp skills/kb/SKILL.md ~/.claude/commands/kb.md

---

Visual Explainer

Generate a single self-contained HTML file that explains any technical concept with the depth of a senior engineering blog post and the visual quality of an award-winning infographic.

Examples (open in browser)

These were generated with a single /visual-explainer command — no manual editing:

Example	Theme	Preview
HNSW Index Explained	Dark Technical	Layered graph visualization, search path animation, skip-list analogy
Vector Embeddings & Similarity Search	Dark Technical	Embedding space visualization, cosine similarity, ANN search

Download any .html file and open it locally — zero dependencies, works offline.

Usage

/visual-explainer transformer architecture
/visual-explainer event sourcing vs CQRS
/visual-explainer how OAuth 2.1 authorization code flow works
/visual-explainer @src/services/auth explain the authentication pipeline
/visual-explainer database sharding strategies for multi-tenant SaaS

What It Produces

A single .html file — no build step, no npm install, no dependencies. Opens in any browser.

5 Design Themes

The skill automatically selects the best theme based on your topic:

Theme	Best For	Aesthetic
Textbook	Algorithms, patterns, fundamentals	Warm parchment, serif headings, chapter structure
Dark Technical	Infrastructure, databases, distributed systems	Deep navy, gradient titles, glassmorphism
Terminal	Security, data structures, DevOps, internals	Dark olive, monospace-first, hacker aesthetic
Dashboard	Architecture overviews, system flows, roadmaps	Slate background, pill badges, scroll animations
Presentation	Strategy docs, business cases, governance	Clean paper, executive-friendly, printable

Quality Standards

Every generated explainer includes:

• 9 structured content sections (hero, problem, core concept, walkthrough, interactive elements, examples, tradeoffs, summary, footer)
• At least 3 unique diagram types (flow, layer, comparison, timeline, tree, cycle, matrix)
• At least 2 interactive elements (scroll reveals, hover effects, clickable navigation, animated arrows)
• CSS-only diagrams — no images, no external SVGs
• Syntax-highlighted code blocks
• Responsive design (1440px → 375px)
• Print-friendly styles

Example Topics That Work Well

# Concepts
/visual-explainer how database indexes work (B-tree, hash, GIN, GiST)
/visual-explainer CAP theorem with real-world examples
/visual-explainer Raft consensus algorithm step by step

# Architecture
/visual-explainer microservices vs monolith tradeoffs
/visual-explainer event-driven architecture with message brokers
/visual-explainer zero-trust security architecture

# Comparisons
/visual-explainer REST vs GraphQL vs gRPC
/visual-explainer React Server Components vs Client Components
/visual-explainer SQL vs NoSQL decision framework

# Your codebase
/visual-explainer @src/middleware explain the request pipeline
/visual-explainer how our auth flow works end to end
/visual-explainer @infrastructure/ explain the deployment architecture

# Interview prep
/visual-explainer explain system design for a URL shortener
/visual-explainer how DNS resolution works visually
/visual-explainer explain the different load balancing algorithms

---

Knowledge Base

Create structured knowledge base entries for bug fixes and production incidents using 5 Whys root cause analysis.

Usage

/kb                          # Analyze current conversation, create entry
/kb update KB-0042           # Update existing entry
/kb list                     # Show KB index

What It Produces

A markdown file following a structured template:

• Symptoms — what was observed (error messages, status codes)
• Root Cause (5 Whys) — deep investigation, not surface-level
• Fix Applied — files changed, code diff, commit hash
• Prevention — actionable items to prevent recurrence

When It Triggers

The skill prompts you to create a KB entry after bug fixes when:

• Root cause was non-obvious
• Fix touches auth, messaging, multi-tenancy, or infrastructure
• The same class of bug could recur elsewhere
• A prevention action exists beyond the immediate fix

---

Contributing

Adding a New Skill

1. Create skills/your-skill/SKILL.md
2. Add the skill to .claude-plugin/plugin.json
3. Test locally: claude --plugin-dir .
4. Submit a PR

Skill Format

Skills are markdown files with:

• A clear one-line description at the top
• $ARGUMENTS placeholder for user input
• Structured instructions that guide Claude's behavior
• Quality checklists to ensure consistent output

---

License

MIT

---

Built with Claude Code by Vijay Rajasekaran