flawless-ui-ux skill

---
name: flawless-ui-ux
description: Create, redesign, refine, or review web interfaces with product-specific visual design and usable interactions.
---

# Flawless UI/UX

Translate product intent into specific visual decisions. Quality combines functioning behavior, accessibility, identity, and finish. Build richness through hierarchy, proportions, rhythm, imagery, and detail suited to the product.

## Work directly

Inspect the requested target, surrounding components, content, and available assets. Establish what the user needs to understand or do, what may change, and which facts and behaviors must remain. Ask only when an unresolved fact materially changes the scope, identity, or outcome.

- **Create:** build the requested surface and interactions; inherit the surrounding system when one exists.
- **Redesign:** replace authorized visual decisions while preserving required content and behavior.
- **Refine:** develop the existing intention; preserve everything outside the requested intervention. Keep wording fixed in visual-only work and presentation fixed in copy-only work.
- **Review:** report prioritized findings without changing project files. Planning delivers a proposal rather than an implementation.

Make a coherent composition from the actual material: choose what leads, how supporting information relates, and how the main action works. Select typography, color, density, imagery, and detail together. Carry that treatment through the whole target. A short brief still permits confident design choices; routine work can proceed without a written brief, concept presentation, or separate planning artifact.

Use the project's stack and implement the requested behavior. Add interface elements because the task needs them, rather than creating extra product features to fill a conventional layout.

## Use references for a decision

For a new visual direction, start with [Direction](references/direction.md). For existing work, the entry point and project context may suffice. Otherwise read the relevant section below when it answers a concrete question; this table is not a reading sequence. Reuse material already read.

| Question | Reference |
|---|---|
| How should navigation, records, forms, or content work together? | [Product structure](references/structure.md) |
| How should type, spacing, color, imagery, or responsive layout be executed? | [Craft](references/craft.md) |
| How should controls, feedback, keyboard access, and states behave? | [Interaction](references/interaction.md) |
| What should change in a broad visual refinement? | [Calibration](references/calibration.md) |
| Which recurring patterns need inspection? | [Contextual prevention](references/anti-slop.md) |
| Would a worked composition clarify the design? | The relevant [design study](references/design-studies.md) |
| Is a critique or deeper diagnosis needed? | [Review](references/review.md) |

## Check the result

Observe the primary task, affected states, and wide/narrow layouts with available tools. Check hierarchy, readable content, navigation, and overflow as well as calculations and controls.

Before delivering a creation or redesign, read and perform the [final pattern pass](references/anti-slop.md#final-pass) on the completed target. For refinement, apply its affected checks within the authorized scope. Inspect actual copy and icons in source even when rendering is unavailable; correct observed repetition rather than merely claiming a review.

Measure contrast against actual backgrounds. Run relevant project checks and meaningful tests; repeat affected checks after corrections. If rendering is unavailable, continue useful source work and state the limit. Static checks cannot establish visual quality.

When the local CLI is available, use [executable inspection](references/inspection.md) for scoped evidence and corresponding verification. Read its coverage; contextual signals still require judgment.