skills.rest
rakibulism
rakibulismCOMMUNITY
Explore all skills by this author →
Website𝕏@rakibulismGitHub

ux-ui-designer

Design and critique user interfaces and interaction flows with implementation-ready guidance.

2|1|Updated May 17, 2026
Search Tags:#ui#accessibility#user flows#information architecture#interaction design#ux#interface critique
One-click install
npx skills add https://github.com/rakibulism/agent-skills-os --skill ux-ui-designer-rakibulism
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ux-ui-designer
Source: https://github.com/rakibulism/agent-skills-os/tree/main/skills/ux-ui-designer
Command: npx skills add https://github.com/rakibulism/agent-skills-os --skill ux-ui-designer-rakibulism

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you design and critique screens and flows so users can complete tasks with less confusion, fewer decisions, and stronger visual clarity. It turns vague UI feedback like "make it nicer" into concrete, buildable guidance based on user goals, hierarchy, and usability principles.

Core Features & Use Cases

  • Flow Design: Map the steps from entry to completion for onboarding, checkout, settings, dashboards, forms, and other product experiences.
  • UI Critique: Review existing interfaces for hierarchy, clarity, consistency, accessibility, and edge cases, then turn issues into actionable fixes.
  • State Planning: Specify empty, loading, error, success, and edge states so the design works beyond the happy path.
  • Accessibility-Aware Guidance: Incorporate contrast, keyboard support, semantic structure, labels, focus states, and target size into interface decisions.
  • Use Case: A team is redesigning a signup flow and wants to reduce drop-off; this Skill helps define the user job, simplify the steps, choose familiar patterns, and document the layout and states in a way engineers can implement.

Quick Start

Design a clear mobile onboarding flow for first-time freelancers that helps them create an account, set up a profile, and reach the first successful action.

Frequently Asked Questions about ux-ui-designer

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

FAQPage Schema
How do I design a user flow that reduces drop-off during onboarding?▼

Designing a user flow that reduces drop-off requires mapping steps from entry to completion while simplifying decisions and documenting empty, loading, error, and success states. This approach ensures users reach their first successful action with less confusion.

What is the best way to critique an existing interface for usability and accessibility?▼

Critiquing an existing interface for usability involves reviewing hierarchy, clarity, consistency, and edge cases, then translating issues into actionable fixes. It incorporates accessibility checks like contrast, keyboard support, semantic structure, and focus states.

How do I plan UI states beyond the happy path for web and mobile screens?▼

Planning UI states beyond the happy path involves specifying empty, loading, error, success, and edge states for screens. This state planning ensures dashboards, forms, and modals function reliably across all user interactions and data conditions.

Can I use this approach for both mobile app and desktop dashboard design?▼

Yes, this interaction design approach applies to web, mobile, desktop, dashboards, forms, onboarding, checkout, navigation, modals, and settings. It provides structured output covering screen breakdowns, rationale, and implementation-ready guidance across platforms.

Why does my checkout interface confuse users and how can I fix the hierarchy?▼

A checkout interface confuses users when visual hierarchy and information architecture lack clarity. Fix it by applying familiar patterns, simplifying steps, documenting layout states, and ensuring target sizes and labels meet accessibility standards.

What accessibility guidelines should I follow when designing interaction flows?▼

Designing interaction flows requires accessibility-aware guidance including contrast ratios, keyboard support, semantic structure, labels, focus states, and target size. Integrating these into interface decisions ensures usable task-oriented experiences.

Related Skills

Explore More Design & Creative Skills→
RollandcodesRollandcodes

product-marketing-context

Create a product marketing context document at .claude/product-marketing-context.md.

Community
Advanced
Athena-Git-GroupAthena-Git-Group

athena-audit-requirement-frontend

Analyzes product requirement documents for missing frontend interaction, screen state, and navigation details.

Official
Intermediate
waqarahmed-designwaqarahmed-design
13

ux-design

Provide UX design guidance for accessible, usable, and scalable web and mobile experiences.

Community
Advanced
MajesteitBartMajesteitBart
7

impeccable

Design, critique, and refine frontend UI for clarity, hierarchy, and accessibility.

Community
Advanced