forge-chartlisted

Create a quick self-contained single-file HTML visual — native fgraph diagram (hub-and-spoke, gantt, pie, ER, sequence, state, dep-graph), architecture layout, CSS Grid explainer, or inline-SVG data-chart (scatter, bubble, radar, funnel). No server needed, works with file://. Triggers: "draw" | "diagram" | "visualize" | "sketch" | "map" | "show the flow" | "quick visual".
Roxabi/roxabi-forge · ★ 2 · Web & Frontend · score 71

Install: claude install-skill Roxabi/roxabi-forge

# Chart — Single-File Quick Visual Create a self-contained HTML file. All CSS/JS inline — no fetch, no external files, works with `file://`. Use for: native fgraph topologies (hub-and-spoke, linear pipeline, layered), gantt timelines, pie proportions, ER schemas, sequence diagrams, state machines, issue-dependency graphs, or simple CSS explainer layouts. Output: `~/.roxabi/forge/<project>/visuals/{slug}.html` or `~/.roxabi/forge/_shared/diagrams/{slug}.html`. **Read before generating:** ``` ${CLAUDE_PLUGIN_ROOT}/references/forge-ops.md — brand detection, output paths, deploy commands ${CLAUDE_PLUGIN_ROOT}/references/base/reset.css — concatenate first ${CLAUDE_PLUGIN_ROOT}/references/base/layout.css — concatenate second ${CLAUDE_PLUGIN_ROOT}/references/base/typography.css — concatenate third ${CLAUDE_PLUGIN_ROOT}/references/base/components.css — concatenate fourth ${CLAUDE_PLUGIN_ROOT}/references/base/explainer-base.css — concatenate fifth (visual explainer components) ${CLAUDE_PLUGIN_ROOT}/references/aesthetics/ — select one based on detection logic ${CLAUDE_PLUGIN_ROOT}/references/shells/single.html — HTML template with placeholders ${CLAUDE_PLUGIN_ROOT}/references/base/theme-toggle.js — substitute {NAME}, then inline via {THEME_TOGGLE_JS} ${CLAUDE_PLUGIN_ROOT}/references/diagram-meta.md — meta tag format + categories ${CLAUDE_PLUGIN_ROOT}/references/graph-templates/README.md — graph/topo