uiux-engineer

Draft a UI/UX design document covering goals, personas, user flows, and states.

Updated Jan 26, 2026
One-click install
npx skills add https://github.com/hoonzinope/skills --skill uiux-engineer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: uiux-engineer
Source: https://github.com/hoonzinope/skills/tree/main/uiux-engineer
Command: npx skills add https://github.com/hoonzinope/skills --skill uiux-engineer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

Designers and product teams often struggle with inconsistent or missing UI/UX documentation, leading to misaligned expectations and implementation gaps. This Skill provides a clear, standardized design document and a proven structure for teams to reference.

Core Features & Use Cases

  • Create a structured UI/UX design document containing Goals, Personas, User Flows, IA/Sitemap, Screen Specs, States, and Accessibility Notes.
  • Enable writing to .documents/uiux/UIUX.md to centralize design artifacts and support collaboration.
  • Use across features or products to rapidly generate consistent documentation workflows for design reviews and handoffs.

Quick Start

Draft a UI/UX design document for a product or feature and save it to .documents/uiux/UIUX.md.

Frequently Asked Questions about uiux-engineer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a UI/UX design document for a new feature?▼

To generate a UI/UX design document, provide the product or feature details and the system drafts goals, personas, user flows, IA, screen specs, states, and accessibility notes, saving the output to .documents/uiux/UIUX.md.

What should be included in cross-platform UI/UX screen specs and states?▼

Cross-platform UI/UX screen specs and states should include framework-agnostic behaviors, specific state transitions, accessibility notes, and clearly called out unknowns and assumptions rather than visual styling details.

Can I use this UI/UX documentation workflow without any specific UI framework dependencies?▼

Yes, you can use this UI/UX documentation workflow without framework dependencies because the output specifies behaviors and states rather than visuals, remaining completely framework-agnostic across cross-platform scenarios.

What is the best way to structure design documentation for team handoffs?▼

The best way to structure design documentation for handoffs is to use a standardized format covering goals, personas, user flows, IA/sitemap, screen specs, states, and accessibility notes to align expectations and reduce implementation gaps.

How does this approach handle unknowns and assumptions in product design?▼

This approach handles unknowns and assumptions by explicitly calling them out within the generated design document, ensuring cross-platform scenarios, state behaviors, and framework-agnostic specifications remain clear for implementation.

Why specify behaviors and states instead of visuals in UI/UX documentation?▼

Specifying behaviors and states instead of visuals in UI/UX documentation ensures the design remains framework-agnostic, preventing visual implementation gaps while standardizing cross-platform user flows and accessibility notes.