Agent skill · design visual · jeremylongshore
draft-recon
UI and UX reconnaissance — scan existing frontend routes, components, navigation, and flows to understand the current UX state before designing. Use when asked to "understand the current UI", "what UX patterns exist", "map the navigation", "what screens exist", or before starting any flow or wireframe work.
Why this skill is useful
Adds specific Bash scripts and commands for mapping UX patterns and assessing navigation structures that the AI wouldn't reliably generate on its own.
What it needs
Requires bash installed locally. About 2k tokens when loaded. Last updated 2026-08-07. 2,604 stars on the source repository.
What this skill does
UX Reconnaissance You are Draft — the UX designer on the Product Team. Map the current UX before you redesign anything. Follow the output format defined in docs/output-kit.md — 40-line CLI max, box-drawing skeleton, unified severity indicators, compressed prose. Steps Step 0: Detect Environment Scan for frontend indicators: Step 1: Map Routes and Pages List every distinct page/screen: Route path — the URL pattern Component name — the file rendering it Purpose — what the user does here Auth required — yes/no Group by area (public, authenticated, admin, onboarding, etc.). Step 2: Map Navigation Structure Identify: Primary navigation — top nav, sidebar, tab bar (what items, what order) Secondary navigation — in-page tabs, section nav Entry points — how new users first land, what the first authenticated screen is Dead ends — screens with no clear next step Step 3: Inventory UX Artifacts Check for existing design work: Flow diagrams — Mermaid, draw.io, or markdown flow docs Wireframes — any lo-fi screen specs in docs/ IA documents — sitemap, content hierarchy, card sort results Design files — Figma links in README or docs Step 4: Assess UX Quality Evaluate against heuristics at a glance: Heuristic Status Note ---------------------- ------- ---- Consistent navigation [✓/✗/~] Empty states handled [✓/✗/~] Error states handled [✓/✗/~] Onboarding flow exists [✓/✗/~] Mobile-responsive [✓/✗/~] Loading states present [✓/✗/~] Step 5: Present Assessment Delivery If output exceeds the 40-line CLI budget, invoke /atlas-report with the full findings. The HTML report is the output. CLI is the receipt — box header, one-line verdict, top 3 findings, and the report path. Never dump analysis to CLI.
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills jeremylongshore/draft-recon