Awesome-omni-skill ux-visualizer
Analyzes source code or requirements to generate high-fidelity screen and state transition diagrams. Specialized in SPA state mapping.
install
source · Clone the upstream repo
git clone https://github.com/diegosouzapw/awesome-omni-skill
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/diegosouzapw/awesome-omni-skill "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/design/ux-visualizer" ~/.claude/skills/diegosouzapw-awesome-omni-skill-ux-visualizer && rm -rf "$T"
manifest:
skills/design/ux-visualizer/SKILL.mdsource content
ux-visualizer
Capabilities
- High-Fidelity SPA Mapping: Generates full-screen representations using Mermaid HTML-labels, capturing layout, colors, and component positioning.
- State-Based Transitioning: Visualizes transitions triggered by user actions (hover, scroll, click) rather than just URL changes.
- Style Extraction: Maps CSS themes and MUI properties directly into diagram styles.
- Image Integration: Renders diagrams to SVG/PNG via
.diagram-renderer
Arguments
| Name | Type | Description |
|---|---|---|
| --input | string | Path to source code directory or requirements file. |
| --type | string | 'screen' (journey), 'state' (logic), or 'component' (structure). |
| --fidelity | string | 'low' (box-and-line) or 'high' (HTML layout). Default: 'high'. |
| --output | string | Path to save the Mermaid text file. |
| --render | boolean | If true, renders to SVG using diagram-renderer. |
Usage
# Generate a high-fidelity screen flow from a React SPA node scripts/cli.cjs run ux-visualizer --input src/App.jsx --type screen --fidelity high --render