warframe-bilder/wireframe-system/.agents/skills/ux-constructor/SKILL.md

name, description

name	description
ux-constructor	Create UX architecture, information architecture, user flows, screen inventory, UX decisions, research citations, acceptance criteria, and screen blueprints from a normalized product model. Use when Codex needs evidence-based UX planning before Figma wireframe generation, including citation-backed UX rationale and editable screen_blueprints.

UX Constructor

Convert normalized_project.json into ux_spec.json, ux_spec.summary.md, and screen_blueprints.json.

Load First

• .agents/skills/_shared/references/artifact-contracts.md
• .agents/skills/_shared/references/ux-research-policy.md
• .agents/skills/_shared/references/ux-research-registry.json
• .agents/skills/_shared/references/quality-gates.md

Workflow

1. Read workspace/artifacts/wireframe-gen/normalized_project.json and normalized_project.summary.md.
2. Run the pre-UX open question gate: powershell -File scripts/wireframe/validate-artifacts.ps1 -ArtifactDir workspace/artifacts/wireframe-gen -Stage pre-ux
3. Stop and return unresolved blocking questions to the coordinator if the gate fails.
4. Identify primary audiences, actors, jobs, goals, constraints, risks, and open questions.
5. Create information architecture and user flows that cover the core functional modules.
6. Create screen_inventory with stable screen_id values.
7. For each screen, define purpose, main user intent, content priorities, states, and acceptance criteria.
8. Use the curated UX registry first. If it lacks a relevant source, do live web research from authoritative sources, then update the registry with scripts/wireframe/update-research-registry.ps1.
9. Write ux_spec.json using the shared contract and citations.
10. Write screen_blueprints.json as an array of build-ready screen plans.
11. Write ux_spec.summary.md in Russian, including unresolved user decisions.
12. Validate: powershell -File scripts/wireframe/validate-artifacts.ps1 -ArtifactDir workspace/artifacts/wireframe-gen

UX Decision Rules

• Ground each screen in a requirement, user goal, or explicit assumption.
• Prefer proven, boring UX patterns for operational tools: clear navigation, dense but readable layouts, visible status, good empty/error/loading states.
• Do not turn UX research into generic decoration. Cite only claims that directly support the decision.
• Keep flows implementation-ready: actor, trigger, steps, success outcome, failure/edge states.
• Put unresolved product choices into open_questions or decision_log.md; do not decide business policy without evidence.

Blueprint Rules

• Use mid-fi fidelity: real information architecture, realistic content labels, clear components, and states without final visual polish.
• Include content_type in every blueprint: screen for full screens and element for bounded UI elements.
• Include desktop viewport by default for screens: { "width": 1440, "height": 800 }.
• Increase screen height above 800 only when the content requires more vertical space.
• For element blueprints, include element_id, parent_screen_id, and bounds.
• Add mobile blueprint variants only when source docs or user request require mobile UX decisions.
• Include empty_error_loading_states for data-heavy screens, forms, and async flows.

Output Quality Gate

• Every screen maps to at least one normalized requirement or assumption.
• Every major UX decision has research_citations, source_refs, or an explicit assumption.
• screen_blueprints.json has no placeholder-only screens.
• Acceptance criteria are observable in the future Figma output.