🎛️ claude-skills

A personal collection of Claude Code skills battle-tested from real work · or just nice enough to keep around

---

✨ What's inside

Each top-level directory is a self-contained skill. Drop it into ~/.claude/skills/ or bundle it as a plugin — no build step, no dependencies, nothing to install.

📦 Skills

🧱 tech-diagram/ Polished dark-themed architecture & flowchart diagrams rendered as a single self-contained HTML file. CSS Grid layouts — no SVG, no framework Anthropic brand palette · semantic color tokens Built-in PNG / PDF export toolbar Two layouts: architecture (tiered) · flowchart (sequential)

Trigger phrases "draw a system / architecture diagram" "show me the request flow" "make a flowchart of …" "diagram the deployment pipeline"

🗂️ Skill layout

Every skill in this repo follows the same shape:

<skill-name>/
├── SKILL.md          # frontmatter + invocation rules
│                     # ↑ the harness reads ONLY this to decide when to trigger
└── resources/        # templates, reference docs, anything the skill loads at runtime

The description field in SKILL.md's frontmatter is what gets matched against user intent. Make it specific and pack it with trigger phrases — not marketing copy.

🧭 Conventions

• 🎨 Semantic over decorative — colors map to roles (frontend / backend / storage / API / boundary), not aesthetics
• 🔒 Self-contained outputs — generated artifacts should render from file:// with no dev server
• ⚠️ Honesty rules — diagrams and outputs flag illustrative vs. confirmed detail; never fabricate to look complete
• 📐 One source of truth per spec — when tokens are duplicated across files for self-containment, keep them in sync

Full authoring notes live in CLAUDE.md.

---

_{Curated by @Oliver · Quality bar: would I use this on a Monday morning?}