report-uxui

Goal

Build a UX/UI report for an app or website from the context the user gives, presenting layout, tabs, components, and user flow as ANSI box-drawing wireframes (uniform width, right borders aligned) in a ```text codeblock

Scope

For UX/UI sketches before implementing, or summarizing the UI of an existing project
Supports mobile apps, web apps, desktop apps
Shows tab/session/screen layouts, navigation, list items, buttons
No images — ANSI/Unicode box-drawing in a ```text block only

Execute

1. Gather Context

Goal: Understand the app/website to sketch

Read the prompt, context, AGENTS.md, or related references
Identify the platform (iOS, Android, Web, Desktop), framework, and screen size
Identify the tabs, screens, main features, and target users
If source code exists → scan the real routes/pages/components before sketching
If context is insufficient → use /ask-me

2. Define Screens And Flow

Goal: Split the app into clear screens/tabs

List all tab/screen names
Define the main flow: open app → which tab → what is pressed
Define the transitions between screens
Group screens by bottom/tab navigation

3. Sketch Each Screen As ANSI

Goal: Draw each screen's wireframe as an ANSI box

Use box-drawing characters (┌─┐│└─┘├┤) inside a ```text codeblock
Every screen must have an outer box of equal width on every line, with the right border │ aligned
Show the status bar, navigation bar, and tab bar for mobile
Include labels, placeholders, list items, and buttons
Mark working "presses" or taps: [Tap], [Press]
No line wider than 80 characters
If a box is distorted or content needs wrapping → use the /draw-ansi script (--fix, --width, --title) to even out sizes

4. Add UX Annotations

Goal: Explain each element's behavior

Use bullets/numbered lists to describe interactions
State loading, empty, and error states
State gestures (swipe, pull-to-refresh) if any
State accessibility labels

5. Format As ANSI Report

Goal: Summarize the report for easy reading

Summarize key findings at the top
Use /report for the screen/tab summary table
Use /report-architecture-diagram for the user flow
Use symbols ✅ ⚠️ for status
Run /suggest-next-action at the end of the report

Rules

ANSI-Only Sketch

Do not create images or binary files
Use ANSI/Unicode box-drawing in a ```text codeblock only (no ```ansi blocks)
Every box must be uniform width — right borders aligned, undistorted, per /draw-ansi rules
One screen per sketch section
If a route table is needed before sketching, use /report-uxui-all-routes

Mobile Layout

Show the top status bar, middle content, and bottom tab bar for mobile
Use Tab 1 | Tab 2 | Tab 3 for the tab bar
State safe areas and the navigation header when needed

Web/Desktop Layout

Show the sidebar/top nav and main content area
State breakpoints if there is responsive design
Separate global nav from local nav

Interactions

Mark tap/click targets clearly, e.g. [Tap], [Press], [Toggle]
Mark disabled states with [Disabled]
Mark transitions, e.g. → Screen B

Formatting

Use backticks for tools, commands, paths, screen-name
Never use ** bold markers
Lines no longer than 80 characters
Use headings to separate each screen

Consistency

Use the same terminology throughout the report
Order tabs/screens by navigation sequence
Every screen must carry its name and purpose
Use /report-uxui-all-routes if needed
Use /draw-ansi if needed
Use /follow-design-system if needed
Use /review-by-all-stakeholder if needed
Use /open-files-in-web if needed
Use /run-dev if needed
Final report via /report-review — one chat table (No./Action/Evidence/Severity/Risk/Priority/Owner skill/Status), no report files

Expected Outcome

An ANSI UX/UI report covering every screen/tab with all boxes equal-sized and undistorted
A screen summary table via /report
A user flow or navigation diagram via /report-architecture-diagram
Clear interactions, loading/empty/error states, and accessibility notes
A clear next action at the end of the report