Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →clemannd/ui-variant-prototype
Scaffold temporary multi-layout UI prototypes with persisted variant switching and a floating preview toggle.
Passed 20 of 22 test cases with the skill, and 11 of 22 without it.
and 10 more in the full report
9 fixed11 passed either way2 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 9 test cases the skill fixed. Same model, same prompt, with and without the skill.
When using non-button elements (like a generic div wrapper) as tooltip triggers within preview variant components, what two specific HTML accessibility attributes must be added to make them keyboard accessible?
| Checked | Without skill | With skill |
|---|---|---|
| The non-button trigger element includes tabIndex equal to 0. | Passed | Passed |
| The non-button trigger element includes an aria-label attribute. | Missed | Passed |
The instructions your model reads when the skill loads.
Temporary workflow for comparing visual/layout options in the running app, then collapsing to a single implementation when the user picks a winner.
Stack: Any React setup (Vite SPA, Next.js, Remix, etc.). Examples below use shadcn/ui and Tailwind for the toggle UI — swap for the app's own component library and styling — and whatever state management the app already uses (Jotai, Zustand, Redux, React Context — see Preview state).
Everything below is client-side code. If the app uses React Server Components (e.g. Next.js App Router), add 'use client' at the top of each preview file; in other setups, omit it.
Do not use for: API design, routing, or long-lived feature flags.
Colocate under the owning feature folder (route _components, app-components, etc.):
feature-name/
├── feature-name.tsx # router: reads variant state, renders active variant
├── feature-name-data.ts # shared data hook / pure mappers (no layout)
├── feature-name-preview.state.ts # variant union + persisted state + labels
├── feature-name-preview-toggle.tsx # floating switcher (dev-only)
├── feature-name-shared.tsx # optional: icons, value formatting, a11y helpers
└── variants/
├── feature-name-variant-a.tsx
├── feature-name-variant-b.tsx
└── ...
Use explicit entry files (feature-name.tsx), not index.ts barrels.
feature-name-data.ts.FeatureItem[] with { id, label, value, isEmpty }.test cases passed, vs 11 / 22 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.