claude-skills

⭐ If you find these skills useful, star this repo — it helps others discover them!

Practical Claude Code skills born from real production projects, not templates.

Skills

project-onboarding

The fastest way to understand an unfamiliar codebase with Claude Code.

npx skills add Wubabalala/claude-skills@project-onboarding

Then in Claude Code:

/onboard

The Problem

You join a new project. You spend hours reading scattered docs, guessing build commands, figuring out which configs matter. Existing "onboarding" tools dump a directory listing and call it done.

What This Skill Actually Does

Phase 0: Detect & Scan
  ├── Finds existing AI files (CLAUDE.md, .cursorrules, AGENTS.md, .windsurfrules...)
  ├── Scans project structure coarse-to-fine (type → scale → key info)
  ├── Cross-checks docs against code — surfaces stale commands, wrong ports, outdated claims
  └── You decide: keep / patch / rebuild / skip each file

Phase 1: Generate Core Docs
  ├── CLAUDE.md — every claim backed by a source file path
  ├── Per-module CLAUDE.md (monorepo auto-detected)
  ├── docs/OVERVIEW.md — one-page project navigator
  └── Security scan blocks writes if credentials detected

Phase 2: Deep Dive (optional)
  ├── Recommends dimensions based on what it found (deploy scripts → ask about deployment)
  ├── Asks "WHY was it designed this way?" — captures what code can't tell you
  └── Writes memory files with clear fact vs user-knowledge separation

Why Not Just Read the Code?

Code tells you what exists. It doesn't tell you:

• Why there are two auth systems (legal required SSO for one, JWT for the other)
• Why deploys must run macOS before Windows
• Which config change broke prod last month
• That the test script in package.json hasn't worked since the migration

This skill extracts facts from code, then asks you the questions that matter.

How It's Different from Other Onboarding Skills

	project-onboarding (this)	agent-studio	goodvibes
Detects existing AI files	8 tools (.cursorrules, AGENTS.md, .windsurfrules...)	memory dir only	no
Finds stale/wrong docs	yes, cross-checks against code	no	no
Fixes stale docs	Patch mode (targeted before/after diffs)	no	no
Captures domain knowledge	Phase 2: asks "why", separates facts from context	no	no
Security scan	blocks writes if passwords/keys/IPs found	no	no
Monorepo support	auto-detected, per-module CLAUDE.md	no	partial
Source code safety	Source Zone / Doc Zone model, never touches code	not defined	not defined

Example Output

After running /onboard on a microservices project:

Scan Results

Project type: Java (Spring Cloud) + Next.js + Python (FastAPI)
Scale: 1,247 files, 7 modules
Build tools: Maven, pnpm, uv

Existing AI files:
  CLAUDE.md (root) — Covers: build commands | Missing: service topology, deployment
  .cursorrules — Covers: code style | Conflict: claims React, project uses Vue

Conflicts: 1 found
  .cursorrules says "React", package.json has "vue": "^3.4" → Which is correct? [Code] / [Doc]

Recommended actions:
  1. CLAUDE.md — [Keep & enhance] / [Patch conflicts] / [Rebuild] / [Skip]?
  2. .cursorrules — [Merge into CLAUDE.md] / [Ignore]?
  3. docs/OVERVIEW.md — [Generate] / [Skip]?

Design Principles

• Code is fact, documentation is claim — conflicts surfaced, user decides
• Source-safe — never modifies source code or configs; only writes doc files
• User confirms all writes — nothing touches disk without approval
• Template is maximum, not minimum — sections skipped if not applicable
• Ask "why", not "what" — code scanning is commodity; asking the right questions is the value

---

playwright-web-automation

Browser automation that goes beyond recording — render diagrams, automate interactions, export screenshots.

npx skills add Wubabalala/claude-skills@playwright-web-automation

Two Modes

Mode	When to use	How it works
A: Record	Unknown page, need to explore	npx playwright codegen <URL> → paste recorded code → parameterize
B: Direct	Known workflow or render-to-image	Write script directly, skip recording

What It Handles

• Web interaction — fill forms, click buttons, navigate multi-step flows, handle login state
• Diagram rendering — Mermaid, custom HTML/SVG → high-res PNG export
• Canvas export — extract rendered content from Canvas elements (even inside iframes)
• Screenshot automation — full page, element-level, or high-DPI (2x) capture

Progressive Disclosure

SKILL.md (decide which path → skeleton steps)
  ├── references/render-to-image.md    (setContent + CDN rendering patterns)
  ├── references/export-strategies.md  (screenshot / Canvas / download)
  ├── references/iframe-and-canvas.md  (cross-origin iframe, contentFrame)
  ├── references/wait-strategies.md    (condition-based waiting, avoid sleep)
  ├── references/troubleshooting.md    (common errors + fixes)
  ├── templates/skeleton.mjs           (starter script with both paths)
  └── examples/
      ├── diagramgpt.mjs              (full: iframe + follow-up forms + Canvas)
      └── mermaid-render.mjs           (full: CDN Mermaid → batch PNG)

Design Principles

• Two paths, one skeleton — recording is optional, not mandatory
• Headless by default — headless: true for batch/render tasks, false for debugging
• Reference on demand — main doc stays under 120 lines; details loaded when needed
• Real examples — both examples are production-tested, not toy code

---

All Skills

Skill	One-liner	Install
project-onboarding	Scan codebase, generate docs, capture domain knowledge	npx skills add Wubabalala/claude-skills@project-onboarding
playwright-web-automation	Browser automation + diagram rendering with Playwright	npx skills add Wubabalala/claude-skills@playwright-web-automation

More skills coming. Each one is built from real production workflows.

Feedback

⭐ Star this repo if it saved you time · 💬 Issues & ideas welcome

License

MIT