Generates multiple UI component variants behind a URL-driven picker for comparison.
npx skills add https://github.com/AO-HyS/aohys.com --skill variant-ao-hys
Please help me install this Agent Skill. Skill: variant Source: https://github.com/AO-HyS/aohys.com/tree/main/.agents/skills/variant Command: npx skills add https://github.com/AO-HyS/aohys.com --skill variant-ao-hys
?variant= search param, arrow keys, and number keys, making every variant a shareable link. - Accessibility Floor: Requires every variant to pass escalation triggers (accessible names, keyboard reachability, visible focus, no clipping at 320px) before entering the picker. - Use Case: You are unsure whether a dashboard metric card should be quiet, editorial, or dense. The Skill builds all three into the actual dashboard page with realistic data, presents a tradeoff table, and promotes your choice while deleting the harness. ## Quick Start Ask the AI to build three variants of the metric card component on the dashboard page so you can compare them with the picker.High-intent search queries and answers about installing and using this skill.
Build each variant into the page that will actually contain the component and switch between them with a URL search param like ?variant=quiet. A fixed picker control sets the param, so every variant becomes a shareable link judged in real context.
Default to three variants and go to five only when asked or when the design space is genuinely wide. Past five variants people stop comparing and start scrolling, which defeats the purpose of the exercise.
Each variant should take a different position on one primary axis such as structure, density, emphasis, type, or voice. Variants that differ only in accent color or copy teach nothing, and varying every axis at once produces unattributable results.
No. Every variant must clear an accessibility floor before entering the picker: accessible names on controls, full keyboard reachability, visible focus, no clipping at 320px, and no meaning carried by color alone. A direction that only works by breaking the floor gets dropped.
The chosen variant is rebuilt properly where it belongs following the project's own conventions, and the other variants plus the picker harness are deleted. Until promotion, the harness never imports from production and production never imports from the harness.
kartikkabadiAudit and upgrade existing website interfaces with refined typography, color, and layout.
TarasTsavolykRun linting, testing, and type checking before code commit.
Radiants-DAOAudit and fix UI code for RadOS design conformance.
chriswesttPlan and run statistically valid A/B, A/B/n, or multivariate tests.