ux-visualizer
Analyzes source code or requirements to generate high-fidelity screen and state transition diagrams. Specialized in SPA state mapping.
Best use case
ux-visualizer is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Analyzes source code or requirements to generate high-fidelity screen and state transition diagrams. Specialized in SPA state mapping.
Teams using ux-visualizer should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/ux-visualizer/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How ux-visualizer Compares
| Feature / Agent | ux-visualizer | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Analyzes source code or requirements to generate high-fidelity screen and state transition diagrams. Specialized in SPA state mapping.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# 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 ```
Related Skills
todo-visualizer
Read local Markdown TODO files (supports Chinese/English), analyze task completion status, and generate beautiful single-page HTML dashboards with timeline visualization, interactive task lists, and persistent progress tracking.
bgo
Automates the complete Blender build-go workflow, from building and packaging your extension/add-on to removing old versions, installing, enabling, and launching Blender for quick testing and iteration.
1k-error-handling
Error handling patterns and best practices for OneKey. Use when implementing try/catch blocks, handling async errors, showing error messages, or managing error states in UI. Triggers on error, try, catch, exception, throw, fail, failure, error handling, error boundary, useAsyncCall, toast, fallback, error state.
1k-dev-commands
Development commands for OneKey monorepo. Use when running dev servers, building apps, linting, testing, or troubleshooting build issues. Triggers on yarn, dev, build, lint, test, desktop, mobile, web, extension, ios, android, compile, bundle.
1k-date-formatting
Date and time formatting for OneKey applications. Use when displaying dates, timestamps, or formatting time in UI components. Always use OneKey utilities instead of native JS date methods. Triggers on date, time, timestamp, formatDate, formatTime, toLocaleDateString, toLocaleString, dateUtils, locale, format, display date, show time, datetime, calendar.
1k-cross-platform
Cross-platform development patterns for OneKey. Use when writing platform-specific code, handling platform differences, or working with native/web/desktop/extension platforms. Triggers on platform, native, web, desktop, extension, iOS, Android, Electron, platformEnv, .native.ts, .web.ts, .desktop.ts, .ext.ts, cross-platform, multi-platform.
1k-coding-patterns
Coding patterns and best practices for OneKey development. Use when writing React components, handling promises, error handling, or following code conventions. Triggers on react, component, hooks, promise, async, await, error, pattern, convention, typescript.
1k-architecture
OneKey monorepo architecture and code organization. Use when understanding project structure, package relationships, import rules, or component organization. Triggers on architecture, structure, packages, imports, hierarchy, dependencies, monorepo, organization.
1k-app-upgrade-test
Create test versions to verify app auto-update functionality. Use when testing update flows, version migration, or validating app upgrade mechanisms. Automates version number and build number configuration for testing the auto-update system. Triggers on auto update, app upgrade, update testing, upgrade flow, version migration, test build, 9XXX version.
1k-adding-socket-events
Adds new WebSocket event subscriptions to OneKey. Use when implementing new socket events, handling server push messages, or adding real-time data subscriptions. Socket, WebSocket, event, subscription, push, real-time.
1d-cutting-stock
When the user wants to cut 1D materials optimally, minimize waste in linear cutting, or solve one-dimensional cutting stock problems. Also use when the user mentions "1D cutting," "linear cutting optimization," "rod cutting," "pipe cutting," "beam cutting," "trim loss," "cutting stock problem," "pattern generation," or "column generation for cutting." For 2D problems, see 2d-cutting-stock. For general trim loss, see trim-loss-minimization.
1c-bsl-code-generation
Skill for generating 1C:Enterprise (BSL) code with mandatory validation through MCP tools to prevent hallucinations. Use when generating, editing, or validating 1C BSL code, working with 1C metadata, or answering questions about 1C platform API.