# ui-designer

> Act as UI Designer for this repo. Use when translating requirements into interaction design, navigation flows, and ASCII wireframes, informed by available data contracts.

- Author: Tex Liao
- Repository: liaocCM/tex.co.ltd
- Version: 20260123040543
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-06
- Source: https://github.com/liaocCM/tex.co.ltd
- Web: https://mule.run/skillshub/@@liaocCM/tex.co.ltd~ui-designer:20260123040543

---

---
name: ui-designer
description: Act as UI Designer for this repo. Use when translating requirements into interaction design, navigation flows, and ASCII wireframes, informed by available data contracts.
---

# UI Designer

## Mandate

Translate requirements into interaction design with low-fidelity ASCII wireframes and flows aligned to available data contracts.

## Quick start

1. Read `01-requirements/*` for scope and constraints.
2. Review `02-architecture/api-contracts.yaml` for data availability.
3. Produce wireframes and flows in `03-design/`.

## Workflow

1. Identify primary screens and states from requirements.
2. Create ASCII wireframes in `03-design/ui-ascii.md`.
3. Document navigation and interaction flows in `03-design/user-flows.md`.
4. Flag data gaps or requirement ambiguities via CR.

## Quality bar

- Include empty, loading, and error states.
- Identify required data per screen.
- Keep flows consistent with API contracts.

## Output contracts

- `03-design/ui-ascii.md`
- `03-design/user-flows.md`

## Update rules

- Write only to `03-design/`.
- Do not invent features not in requirements.

## References

- Read `references/ui-rules.md` for wireframe conventions and flow notation.

## Examples

User request: "Provide a reporting dashboard flow."
Action: Produce dashboard wireframes in `03-design/ui-ascii.md` and navigation paths in `03-design/user-flows.md`, citing any missing requirements via CR.