freemcplab / 디렉터리 / 플레이그라운드 / Visual Explainer

● 커뮤니티 nicobailon ⚡ 바로 사용

Visual Explainer

Name: Visual Explainer (Claude Skill)
Author: nicobailon

제작: nicobailon · nicobailon/visual-explainer

Skill that turns plans, diffs, audits, and tables into rich HTML pages or slide decks.

Visual Explainer is a Claude Code skill that renders structured outputs — code review summaries, planning audits, diff explanations, project recaps — as polished HTML pages or HTML slide decks. Instead of a wall of text, you get a shareable artifact.

▶ 데모 보기 📦 설치 💡 사용 사례

왜 쓰나요

핵심 기능

Auto-detects the right format (page vs deck) from input shape
Self-contained HTML — no build step, just open in a browser
Diff and plan templates with side-by-side layouts
Project-recap and data-table layouts
Works with any agent that supports SKILL.md

라이브 데모

실제 사용 모습

visual-explainer-skill.replay ▶ 준비됨

0/0

설치

작성자 저장소 · Claude Skills 공식 문서

사용 사례

실전 활용법: Visual Explainer

Generate a stakeholder-friendly recap of a code review

👤 Tech leads briefing non-engineers ⏱ ~15 min intermediate

언제 쓸까: After a big PR you want a one-page recap a PM can read.

사전 조건

Server/skill installed and authenticated — See repo README

흐름

Load the diff

Read PR #481's diff + reviews. Use the visual-explainer skill to produce a stakeholder recap.✓ 복사됨

→ A self-contained HTML file with the recap
Share

Add a slide-deck version too — 5 slides max.✓ 복사됨

→ Second HTML file in deck mode

결과: Two artifacts you can paste into a Slack thread.

함정

Don't paste full diffs — Don't paste full diffs — the skill expects pre-summarized inputs. Run a summarization pass first.

비용 및 제한

운영 비용

API 쿼터: See provider docs for rate limits
호출당 토큰: Varies by tool
금액: See repo README for pricing details
팁: Cache tool results and avoid repeated identical calls.

보안

권한, 시크릿, 파급범위

자격 증명 저장: Use environment variables; never commit secrets

데이터 외부 송신: Tool calls go to the provider's API as documented

문제 해결

자주 발생하는 오류와 해결

HTML doesn't render properly

The skill outputs self-contained HTML. Open in a browser, not a markdown previewer.

확인: Right-click → Open in browser

대안