Ux Visualizer

Name: Ux Visualizer
Author: diegosouzapw

ASecurity

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

57 stars
0 votes
0 copies
0 views
Added October 17, 2026

designgobashreactnode

Works with

Security analysis

A100/100

Scanned October 17, 2026

npx -y skills add diegosouzapw/awesome-omni-skill --skill ux-visualizer --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of Ux Visualizer?

Add the live security badge to your README. It updates with every re-scan.

[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/diegosouzapw-ux-visualizer/badge)](https://www.skillsdirectory.com/skills/diegosouzapw-ux-visualizer)

More formats (shields.io, HTML) on the badges page. Keep it an A: scan every change in CI with Pro.

Download with Pro

SKILL.md

---
name: ux-visualizer
description: Analyzes source code or requirements to generate high-fidelity screen and state transition diagrams. Specialized in SPA state mapping.
status: implemented
category: UX/Design
last_updated: '2026-02-14'
tags:
  - automation
  - gemini-skill
---

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