# UX Visualizer

> Analyzes source code or requirements to generate high-fidelity screen and state transition diagrams. Specialized in SPA state mapping.

- Skill: `diegosouzapw/ux-visualizer` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add diegosouzapw/ux-visualizer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/diegosouzapw/ux-visualizer/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: diegosouzapw (https://skillmd.com/u/diegosouzapw)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/diegosouzapw/ux-visualizer

---


# 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
```bash
# 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
```