ui-ux-designer

Design responsive, accessible interfaces and translate UX requirements into layouts and implementation guidance.

1|Updated Aug 7, 2025
One-click install
npx skills add https://github.com/zzafergok/arktos --skill ui-ux-designer-zzafergok
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-designer
Source: https://github.com/zzafergok/arktos/tree/main/.agent/skills/ui-ux-designer
Command: npx skills add https://github.com/zzafergok/arktos --skill ui-ux-designer-zzafergok

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? It turns vague UX requirements into coherent, accessible interface designs and implementation guidance that fit an existing product's visual language, reducing guesswork and inconsistent UI decisions. ## Core Features & Use Cases - Context-Driven Design: Inspects the existing product, design system, tokens, and components before proposing layouts, ensuring consistency with established patterns. - Full-State Coverage: Specifies loading, empty, error, success, disabled, and permission states rather than only polished happy paths. - Accessibility & Responsiveness: Designs keyboard, touch, pointer, and assistive-technology behavior together, with meaningful responsive changes and reduced-motion support. - Use Case: When adding a new settings page to a web app, use this Skill to define the information hierarchy, reuse existing components, and deliver an implementation-ready specification covering all interaction states. ## Quick Start Ask the AI to design a responsive, accessible interface for a specific page or flow in your product, mentioning the target users and any existing design system.

Frequently Asked Questions about ui-ux-designer

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

FAQPage Schema
How do I design an accessible user interface for a web app?▼

Design keyboard, touch, pointer, and assistive-technology behavior together from the start. Ensure sufficient contrast, perceivable focus states, labels, and error messages, and respect reduced-motion preferences while validating with zoom and text scaling.

How to create a responsive layout that works on mobile and desktop?▼

Specify meaningful responsive changes rather than shrinking the desktop layout. Arrange content in the order users need it, preserve readable line lengths, and validate with narrow screens, long labels, and realistic content.

When should I use a UI designer skill versus a UX researcher?▼

Use this Skill for ordinary web or app UI design work such as layouts, components, and states. Use a UX researcher skill for research activities and an audit specialist for audit-only requests, as this Skill does not present untested assumptions as research findings.

Does this approach work with an existing design system?▼

Yes, it reuses existing tokens and components before introducing new variants. It inspects the product's design system, routes, and content first, and builds reusable abstractions only when repetition justifies them.

What UI states should a design specification include?▼

A complete specification covers loading, empty, error, success, disabled, and permission states. Avoid mock data or happy paths that conceal missing states, and validate against failure conditions and realistic content.