skills.rest
HenderOrlando
HenderOrlandoCOMMUNITY
Explore all skills by this author →
GitHub

ux-ui

Generate UI specifications with states and accessibility checklists.

Updated Nov 27, 2025
Search Tags:#ui#accessibility#design system#usability#ux writing#ux#user flow
One-click install
npx skills add https://github.com/HenderOrlando/booklyapp --skill ux-ui-henderorlando
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ux-ui
Source: https://github.com/HenderOrlando/booklyapp/tree/main/.windsurf/skills/ux-ui
Command: npx skills add https://github.com/HenderOrlando/booklyapp --skill ux-ui-henderorlando

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill ensures that all digital product deliveries are highly usable, clear, consistent, accessible, and measurable, minimizing user friction and maximizing trust.

Core Features & Use Cases

  • Systematic Design: Enforces adherence to a Design System for UI consistency.
  • Accessibility: Integrates accessibility as a default requirement, not an afterthought.
  • Usability Testing: Guides the process for validating user experience through research and testing.
  • Use Case: Launching a new feature? This Skill ensures the user flow is intuitive, all interactive elements are clearly labeled, and the design is consistent with the rest of the application, leading to higher user adoption and satisfaction.

Quick Start

Use the ux-ui skill to generate a UI Spec for the user onboarding flow, including all necessary states and accessibility considerations.

Frequently Asked Questions about ux-ui

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

FAQPage Schema
What is the best way to ensure UI consistency across a new product feature?▼

To ensure UI consistency, enforce strict adherence to an established design system across all development phases. This standardizes visual elements and interaction patterns, generating UI specifications that minimize user friction and maximize trust.

How do I integrate accessibility checks into my UX/UI design process?▼

Integrate accessibility by treating it as a default requirement rather than an afterthought. Generate UI specifications and user flows that include integrated accessibility checklists, ensuring all interactive elements are clearly labeled and compliant.

How do I generate a complete UI specification for a user onboarding flow?▼

Generate a UI specification by defining required UX outputs like user flows, state models, and UI specs. The specification covers all necessary interaction states and integrates accessibility considerations for the onboarding process.

Does this systematic UX design approach apply to all phases of product development?▼

Yes, this systematic UX design approach applies to all phases of product development from brief to deploy. It focuses on user-centric design principles, adherence to design systems, and measurable usability outcomes throughout the lifecycle.

What UX outputs are required to validate user experience and usability?▼

Required UX outputs to validate user experience include defined briefs, user flows, state models, and UI specifications. These outputs guide usability testing and research, yielding measurable outcomes that validate the overall user experience.

Related Skills

Explore More Design & Creative Skills→
rafael-hcrafael-hc

frontend-blueprint

Guide UI discovery and generate atomic HTML/CSS components.

Community
Advanced
GenuinehGenuineh

product-ux

Guide UX design with usability principles, WCAG accessibility, and testing methods.

Community
Intermediate
HemanthTennetiHemanthTenneti

normalize

Normalize frontend UI components to match design system standards and tokens.

Community
Intermediate
WOOWOOYONGWOOWOOYONG

web-design-guidelines

Review UI code against the latest Web Interface Guidelines for compliance.

Community
Basic