What problem does it solve? Designing or reviewing a UI screen often produces inconsistent, incomplete documentation that misses interaction states, accessibility requirements, or mobile behavior. This Skill provides a repeatable template that captures every critical dimension of a screen in one structured pass. ## Core Features & Use Cases - Structured Screen Documentation: Captures purpose, entry points, layout regions, primary and secondary actions, and keyboard shortcuts for any screen or view. - State & Accessibility Coverage: Documents loading, empty, error, and success states plus ARIA landmarks, focus order, and screen reader announcements. - Dynamic Context Injection: Automatically scans the project for existing React or Vue screens (.tsx, .jsx, .vue) to ground the documentation in the actual codebase. - Use Case: When reviewing a new checkout page, invoke this Skill to produce a complete UX spec covering its layout, error recovery flow, and mobile layout differences before handoff to engineering. ## Quick Start Use the ux_template skill to document the UX of the dashboard screen, including its states, accessibility, and mobile behavior.
