Builds multiple UI variants of one component behind a URL-driven picker for comparison.
npx skills add https://github.com/falentio/cimi --skill variant-falentio
Please help me install this Agent Skill. Skill: variant Source: https://github.com/falentio/cimi/tree/main/.agents/skills/variant Command: npx skills add https://github.com/falentio/cimi --skill variant-falentio
?variant= search param, keyboard navigation, and a deliberately neutral floating control specified in picker.md. - Accessibility floor and promotion workflow: Every variant must clear accessibility escalation triggers before entering the picker, and the chosen variant is promoted into production code while the harness is deleted. - Use Case: You are redesigning a metric card on a dashboard. The Skill builds Quiet, Editorial, and Dense versions with realistic data on the actual page, presents a tradeoff table, and lets you pick one to promote. ## Quick Start Ask the assistant to build three variants of the metric card component so you can compare different layout directions and pick one.High-intent search queries and answers about installing and using this skill.
Build three variants that each take a different position on one design axis, such as structure or density, and host them on the real page behind a picker. Select variants with a URL search param like ?variant=quiet so each version is a shareable link.
Default to three variants per run. Go to five only when asked or when the design space is genuinely wide, since past five people stop comparing and start scrolling.
Varying every axis at once produces unattributable results where you learn which variant you liked but not what made it work. Pick one primary axis such as structure, density, emphasis, type, or voice, and let secondary choices follow from it.
No. Variants must render on the page that will actually contain the piece, with real chrome, neighbours, and realistic data. Lorem ipsum and three rows make every structure look good, and isolation hides spacing problems.
Every variant must clear the same accessibility floor before entering the picker: accessible names on controls, full keyboard reach, visible focus, no clipping at 320px, and no meaning carried by color alone. A direction that only works by breaking the floor is 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.
reason-machinesEnforces design system token and component compliance in AI-generated Figma designs.
squidlleeBuilds multiple UI variants of one component behind a URL-driven picker for comparison.
compozyReview and generate user-facing UI against accessibility, state, and anti-slop design rules.
Me1eIdentifies Tacigent Stage 3 solution direction and hands off to tacigent-stage-design.