Ztgc Prototype Variant Picker Interaction

---
name: ztgc-prototype-variant-picker-interaction
description: "Focused Perfect_AI Emil Prototype Variants specialist: variant picker interaction"
---

# Variant Picker Interaction

## Responsibility
Implement keyboard-accessible picker and persist choice only with explicit user action; capture variant metadata.

## Entry conditions
- Load the parent `$ztgc-emil-prototype-variants` only when Emil Prototype Variants is relevant to this task.
- Collect concrete routes/files, user objective, dependency versions and current behavior.
- Do not rename or delete old skills or overwrite existing project content.

## Method
1. Get component goal, brand direction, accessibility constraints and target platform before exploration.
2. Produce three variants with different information architecture and interaction grammar, not merely different colors.
3. Place all prototypes behind a switcher in one local demo; ensure each has real keyboard, hover, focus and mobile states.
4. Ask a human to select; save decision rationale and export only the chosen variant to production.
5. Remove prototype-only CSS and controls from production integration; preserve originals and include rollback.

## Specialized verification
- [ ] All variants functional and visually distinguishable
- [ ] No variant silently replaced by automated subjective scoring
- [ ] No external images or CDN required for demo

## Tool usage and artifacts
- Tools: React or vanilla CSS/HTML; local visual picker; no MCP.
- Evidence: baseline, exact reproduction command, before/after details, screenshot or console logs when relevant.
- Minimum outcome: separate PASS/FAIL/NOT_RUN records, with a description of any unavailable runtime or device.
- Reference: `https://github.com/emilkowalski/skills/blob/main/skills/prototype/SKILL.md`. This locally authored guidance is not a copied GitHub Skill.