UI Slot UX Designer

Use this skill to turn slot UX ideas into explicit, testable interaction contracts.

Workflow

1. Define UX scope and player flow.

• Capture session entry, betting, spin cycle, result feedback, and exit states.
• Define desktop/mobile differences explicitly.

2. Establish control hierarchy.

• Define primary controls (spin/bet) and secondary controls (autoplay/turbo/settings).
• Set visibility and priority rules by viewport and game state.

3. Model states and interactions.

• Define UX states and allowed transitions.
• Map interaction triggers to target states and feedback timing.
• Explicitly define disabled/blocked behavior during spin/resolve phases.

4. Enforce accessibility and responsiveness.

• Validate touch targets, reduced-motion support, and contrast-aware behavior.
• Verify control layout works at defined breakpoints.

5. Validate and hand off.

• Run contract validation and classify blockers.
• Deliver patch plan for UI components/state handlers.

Commands

python3 scripts/validate_slot_ux_spec.py \
  --input <path/to/slot_ux_spec.json>

Treat non-zero exits as blocker findings.

Output Contract

Return:

1. UX Map: views, controls, states, and interactions.
2. Validation Findings: pass/fail checks with exact failures.
3. Patch Plan: component/state files to adjust.
4. Verification: command outputs and success criteria.
5. Residual Risks: unresolved usability/accessibility risks.

References

• references/workflow.md: end-to-end slot UX design process.
• references/ux-rules.md: control, feedback, and accessibility rules.
• references/signoff-template.md: release handoff template.

Execution Rules

• Keep spin-cycle controls deterministic by state.
• Keep mobile-first touch safety and clarity as hard constraints.
• Keep feedback timing explicit and bounded.
• Flag inaccessible or ambiguous control behavior as blockers.