explainer-skill

Generate beautiful, self-contained HTML explainer documents from any agentic coding tool — then publish to explainers.fyi for an instant shareable public URL.

Works with Claude Code, Cursor, GitHub Copilot (Agent Mode), OpenAI Codex, Cline, OpenCode, and any agentic coding tool that supports skills or custom instructions.

What it does

Run /explainer <topic> (or the equivalent in your tool) and the skill will:

1. Scan your codebase — reads source files, routes, services, and schemas to understand how your system actually works
2. Generate a premium HTML explainer — 3-column dark-themed document with color-coded sections, stat chips, and beautiful typography. Fully self-contained, no dependencies.
3. Publish to explainers.fyi (optional) — if EXPLAINERS_FYI_API_KEY is set, uploads the file and returns a public URL immediately

The output is designed for non-technical stakeholders — managers, clients, investors, designers — who need to understand a system without reading code.

Install

Claude Code (one command)

/plugin marketplace add heysarver/explainer-skill
/plugin install explainer@explainer-skill

Then invoke with:

/explainer auth flow
/explainer checkout pipeline
/explainer file upload service

Cursor / other tools

Copy skills/explainer/SKILL.md into your tool's custom instructions or skills directory. The skill uses standard markdown instructions compatible with any LLM-based coding agent.

For tools that support .claude/skills/:

mkdir -p .claude/skills/explainer
cp skills/explainer/SKILL.md .claude/skills/explainer/SKILL.md

Publishing to explainers.fyi (optional)

The skill works fully offline — it always saves an HTML file locally. Publishing is opt-in.

To enable publishing:

1. Get a free API key at explainers.fyi (20 explainers/month, 30-day public URLs)
2. Add to your environment:

export EXPLAINERS_FYI_API_KEY=xp_live_your_key_here
# or add to your project's .env file

When the key is set, the skill automatically uploads after generating and returns a public URL:

Explainer published!

  Public URL:  https://explainers.fyi/e/k9xm3p4q2r
  Expires:     2026-04-21 (30 days · free tier)
  Local copy:  docs/diagrams/checkout-pipeline.html

Share the URL directly — recipients don't need an account to view.

Example output

The skill generates a 3-column dark explainer like this:

Column	Role	Example
Receive	Ingestion / entry point	"Accept the Request" — what triggers the flow
Validate	Processing / decisions	"9 Checks, No Exceptions" — rules from the actual code
Deliver	Output / storage	"Store and Notify" — what the system does with the result

Each column includes step-by-step breakdowns, check rows (pass/fail/warn), stat chips (e.g. "< 2s · upload time"), and optional live-process indicators.

Supported topics

Works on any codebase or concept:

• API flows (auth, payments, upload, search)
• Background jobs and queues
• Data pipelines and transformations
• CI/CD systems
• Deployment workflows
• Any feature or service you want to explain

License

MIT