jlaws

J Explain — Design skill for Claude Code

Design community

Generate a self-contained HTML document or information report that explains a topic — inline CSS/JS/SVG, visual hierarchy, spatial diagrams, no external dependencies.

How to install J Explain

Installs to ~/.claude/commands/jlaws-dotfiles-j-explain.md

Terminal

mkdir -p ~/.claude/commands && curl -fsSL https://raw.githubusercontent.com/jlaws/dotfiles/HEAD/.claude/commands/j-explain.md -o ~/.claude/commands/jlaws-dotfiles-j-explain.md

Restart Claude Code, or start a new session, for it to be picked up.

What J Explain does

name: j-explain description: "Generate a self-contained HTML document or information report that explains a topic — inline CSS/JS/SVG, visual hierarchy, spatial diagrams, no external dependencies. Use when you want a shareable, scannable explainer or findings report instead of a wall of markdown. Do NOT use for quick answers or inline comments (respond directly) or markdown project docs (use /j-docs)." argument-hint: "" model

Alternatives in Design

Export Diagram — Export a diagram-design HTML file to .svg and .png next to the source 27.2k ★
Weather Orchestrator Command — Fetch the current temperature for Dubai, UAE and create a visual SVG weather card 20.2k ★
Grade — Generate a shareable HTML "Design Report Card" — letter grade, 8 dimensions, evidence (palette, type, rhythm) 3.6k ★