Aside Visualizer — Design skill for Claude Code
Aside account-skill port of codexclaw dev-visualizer: visual documents, SVG/HTML explainers and paged PDF reports, with a no-Chrome export path through Aside's own Chromium.
How to install Aside Visualizer
This entry records only its repository, not the path inside it, so there is no
exact command to give. Open lidge-jun/aside-visualizer and copy the folder into
~/.claude/skills/, or the file into ~/.claude/agents/.
What Aside Visualizer does
Aside account-skill port of codexclaw dev-visualizer: visual documents, SVG/HTML explainers and paged PDF reports, with a no-Chrome export path through Aside's own Chromium.
Alternatives in Design
- Canvas Design — Create beautiful visual art in PNG and PDF documents using design philosophy 94.1k ★
- Export Diagram — Export a diagram-design HTML file to .svg and .png next to the source 27.2k ★
- Doc — Read, create, and edit .docx documents with formatting and layout fidelity 14.6k ★
README
aside-visualizer
Aside account-skill port of [codexclaw](https://github.com/lidge-jun/codexclaw)'s `dev-visualizer` skill: well-composed visual documents, SVG diagrams, HTML explainers and paged PDF reports, delivered as verified artifact files.
The Aside browser is a Chromium fork, so the headline difference from the codexclaw original: **PDF export works with no system Chrome at all**.
Install
mkdir -p ~/.aside/u/0/skills/user/dev-visualizer
cp -R SKILL.md assets reference scripts ~/.aside/u/0/skills/user/dev-visualizer/
The skill loads from the next Aside session. Triggers include: visualize, 시각화, 그려줘, 문서 만들어줘, 보고서, PDF 생성.
What this port changes vs upstream
reference/reader-documents.mdbundled locally (upstream reaches it through a sibling-skill path,../dev/references/..., which blocks standalone installs; see codexclaw#183).- Routing and
reference/environment-detection.mdrewritten for Aside's delivery contract: no inline fragment renderer, deliverables are artifact files verified in the Aside browser. reference/no-chrome-pdf-export.mdadded: a validated two-pass PDF export through Aside's own Chromium (REPLpage.pdf()+ bundled poppler for TOC mapping and QA), plus a codemode batch-capture route (scripts/capture-pdf.codemode.js).- codex-only machinery dropped (
upstream/sync-check.sh); the historicalvisualize-contract.mdkept as provenance only.
Export paths, measured 2026-09-16 on the bundled template
| Path | Needs | Result |
|---|---|---|
scripts/export-paged-report.mjs |
node + local Chrome | 7 pages A4, TOC auto-filled, QA pass/fail findings |
REPL two-pass (reference/no-chrome-pdf-export.md) |
Aside only | 7 pages A4, identical layout, TOC 3/4/5/6/6/7 verified in print |
codemode browse.captureMany |
Aside only | A4 pageBox verified per page; pagination may differ (engine-default margins, no preferCSSPageSize passthrough yet, see aside-codemode#25) |
Provenance
- P
Related Skills
Document Designer
Use when creating professional documents, PDF reports, Typst templates, Pandoc conversions, or any task where
Comprehension Ladder
Claude Code skill that explains anything on Karpathy's comprehension ladder: ASD-STE100 prose (80% strictness)
Key Account Dev Skills
Agent Skills for B2B key-account & complex sales: 7 skills covering opportunity assessment, decision-chain map
Gongnangi Chart Skill
Claude Code skill: McKinsey/Bain consulting-style HTML chart generator with Chrome headless PNG export
Figloo
Chrome extension + local MCP server that lets coding agents like Claude Code and Codex read Figma designs thro
Mockup Studio
Claude Code skill: studio-quality App Store & Google Play screenshots, device and web mockups, brand boards an
Related Agents
Worksheet Exporter
내보내기 전문가. 검수 통과 개체 트리(또는 레거시 HTML manifest)를 학생용/교사용 2벌로 분기하고 Chrome 헤드리스 --print-to-pdf로 A4 PDF(및 옵션 PNG)를 산출
Dev Document
Generation of documents (PDF, DOCX, XLSX, PPTX). Use to create a document, generate a report, export to PDF/Wo
Doc Reader
Reads long documents (PDF CV, LinkedIn export, job posting, annual report, member directory, large files in th