# UX UI

> UX/UI discovery, implementation, options, and review.

- Skill: `muhammedalkhudiry/ux-ui` (Agent Skill)
- Install (CLI): `npx skillmds@latest add muhammedalkhudiry/ux-ui`
- Raw SKILL.md: https://api.skillmd.com/api/skills/muhammedalkhudiry/ux-ui/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Product & Planning
- Author: MuhammedAlkhudiry (https://skillmd.com/u/muhammedalkhudiry)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/muhammedalkhudiry/ux-ui

---


## Routing

- For a new interface, redesign, or meaningful flow change, inspect the existing experience and use $interview for material product or design
  decisions that evidence cannot resolve.
- For a review, audit, or small scoped change, inspect the existing interface and proceed directly.
- Use $workshop when abstract product framing or strategic options remain unresolved.

## Design workflow

1. Inspect the user's job, complete journey, platform conventions, design system, realistic content, and relevant states.
2. When options are requested, make them meaningfully different in workflow, hierarchy, density, states, responsiveness, or interaction; cosmetic
   variations do not count. Keep content and states consistent so the experience is comparable, then recommend one direction with its trade-offs.
3. Settle the UX before refining UI styling and polish unless new evidence changes an earlier decision. Implement the requested or selected direction
   only when an editable site, artifact, or code environment is available; otherwise deliver the requested review, design direction, mockup, or
   implementation brief without claiming the product changed.
4. After each material revision, summarize the change and any remaining decision.

## Design-system boundary

- Follow the established design system. Before adding a component, token, pattern, or visual language, explain the unmet need and get approval.
- When the system cannot support needed behavior, propose a system-level extension instead of a poor interaction or one-off substitute.

## Review protocol

Report concrete issues in descending user impact:

1. Blocked, unsafe, destructive, or unrecoverable flows
2. Missing states, broken responsiveness, or inaccessible interaction
3. Unclear hierarchy, navigation, wording, or action priority
4. Missing, delayed, misleading, or excessive feedback
5. Inconsistent visual or interaction language
6. Polish opportunities that improve trust, personality, or delight

For each issue, identify the affected user goal, current behavior, recommended behavior, and reason. Distinguish evidence, inference, and aesthetic
preference.

## Completion standard

After implementation, inspect the rendered UX and UI and improve it until optimal. Do not call implemented work complete until the primary task,
relevant failure and recovery paths, accessibility behavior, realistic content, and relevant viewport and input modes work as one coherent experience.
For advisory work, complete the requested review, option set, mockup, or implementation brief and identify any behavior that still needs validation in
a rendered product.

## User preferences

- Begin with the user's job and complete journey. Prefer one clear primary path, immediate common actions, and progressively disclosed capability.
- Favor calm, rich, professional, distinctive minimalism: hierarchy, balanced spacing, restrained color, and subtle depth instead of visual excess.
- Keep controls contextual and interactions consistent; make motion smooth, symmetric, and purposeful. Iterate from rendered evidence and finish an
  approved direction faithfully.
- Prefer icons paired with text labels.