skills.rest
MetalHexx
MetalHexxCOMMUNITY
Explore all skills by this author →
GitHub

rad-visual-docs

Generates self-contained HTML wireframes, content visuals, and architecture diagrams for project documentation.

Updated May 24, 2026
Search Tags:#html#visualization#svg#brainstorm#diagram#wireframe#mockup
One-click install
npx skills add https://github.com/MetalHexx/rad-orc-marketplace --skill rad-visual-docs-metalhexx
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: rad-visual-docs
Source: https://github.com/MetalHexx/rad-orc-marketplace/tree/main/claude-plugin/skills/rad-visual-docs
Command: npx skills add https://github.com/MetalHexx/rad-orc-marketplace --skill rad-visual-docs-metalhexx

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Turning conversations, brainstorms, tickets, and technical discussions into shareable visual artifacts is slow and inconsistent. This Skill produces self-contained HTML visuals — content summaries, UI wireframes, and technical diagrams — saved directly into a project folder and viewable in the Rad Orchestration dashboard. ## Core Features & Use Cases - Content Visuals: Convert brainstorms, meeting notes, tickets, or sprint metrics into polished dark- or light-mode HTML summary cards with a defined design-token system. - UI Mockups & Wireframes: Generate grayscale wireframes at low, medium, or high fidelity from a description, ticket key, or screenshot, one HTML file per screen. - Technical Diagrams: Produce code-grounded architecture, sequence, data-flow, and state diagrams as inline SVG in HTML, with legends and a grounded-in-code footnote. - Use Case: After a brainstorming session about a new feature, ask for a visual summary and a low-fidelity wireframe of the main screen; both land in ~/.radorc/projects/{PROJECT}/ and open in the dashboard. ## Quick Start Ask the assistant to turn the current brainstorm into a visual summary or to wireframe a specific screen, and confirm the project name when prompted.

Frequently Asked Questions about rad-visual-docs

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a UI wireframe from a description or ticket?▼

Describe the screen or provide a ticket key, and the skill generates a grayscale HTML wireframe saved as {PROJECT}-WIREFRAME-{SLUG}.html in the project folder. Fidelity defaults to low (dark paper-napkin style) unless you request medium or high.

How do I turn a brainstorm or meeting notes into a visual summary?▼

Ask for a visual of the current brainstorm or document. The skill produces a fixed-width 1200px self-contained HTML summary using a dark purple design-token system, saved as {PROJECT}-BRAINSTORM.html in the project root.

Can I use a screenshot as the basis for a mockup?▼

Yes. Provide a screenshot and the skill analyzes its structure, describes the interpretation back for confirmation, then generates a clean grayscale wireframe. It keeps layout structure but strips colors, fonts, and brand assets.

Does the skill support architecture and sequence diagrams?▼

Yes. It creates component, sequence, data-flow, state machine, ER, and deployment diagrams as inline SVG inside HTML. Diagrams are grounded in the actual codebase, with labeled connectors, swimlanes, and a legend.

Where are the generated visual files saved?▼

All artifacts save to ~/.radorc/projects/{PROJECT-NAME}/ with SCREAMING-CASE names. There is no project-less output path; if no project exists, the skill asks for or offers to create one before saving.

What are the limitations of the generated HTML visuals?▼

Outputs use inline CSS and SVG only, with no JavaScript for layout or primary content, and no real images or lorem ipsum. Wireframes are intentionally lo-fi for developer communication, not pixel-perfect design handoff replacements.

Related Skills

Explore More Design & Creative Skills→
wpsnotewpsnote
162

class-note-builder

Organize raw learning materials into structured study notes with WPS.

Official
Intermediate
EmasoftEmasoft

amw-ascii-sketch

Generates three validated ASCII wireframe variants and iterates on feedback before HTML handoff.

Community
Advanced
ouzayrouzayr

branding-generator

Generate brand identity kits with color palettes, typography, and logo concepts.

Community
Advanced
junainfinityjunainfinity

wireframe-sketch

Generate a hand-drawn wireframe HTML page from a design brief.

Community
Intermediate