skills.rest
goerll
goerllCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

varium

Generate multiple UI design variants for React, Vue, or Svelte components.

1|Updated Apr 10, 2026
Search Tags:#generate#design-system#framework-detection#ui-variants#in-browser-review#variant-picker
One-click install
npx skills add https://github.com/goerll/varium --skill varium
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: varium
Source: https://github.com/goerll/varium/tree/main/skill
Command: npx skills add https://github.com/goerll/varium --skill varium

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) components.

What problem does it solve?

Generating design variants for a UI component is time-consuming and requires design expertise to explore layout, typography, and tone. Varium automates the production of multiple high-quality variants so teams can review directions quickly and make informed choices.

Core Features & Use Cases

  • Framework-aware detection and asset selection to produce variants aligned with the target stack.
  • In-browser review with a Varium picker to compare 4+ variants and select a winner.
  • Use Case: Design or redesign a UI section; Varium generates 4+ variants for rapid evaluation and iteration.

Quick Start

Ask your agent to design a section and let Varium generate 4+ variants for review.

Frequently Asked Questions about varium

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate multiple UI variants for a component?▼

Generating multiple UI design variants involves analyzing your target repository's framework and producing distinct layout strategies. Varium automates this by creating four or more options, allowing you to compare directions and consolidate a winning choice quickly.

Does UI variant generation work with React, Vue, and Svelte projects?▼

Yes, UI variant generation works with React, Vue, and Svelte projects. Varium uses framework-aware detection to analyze your repository and automatically copies the appropriate assets to produce variants aligned with your specific tech stack.

What is the best way to compare UI design variants in the browser?▼

The best way to compare UI design variants in the browser is by using a variant picker. Varium provides an in-browser review interface, enabling rapid evaluation of four or more variants so teams can iterate and select a winning direction.

How do I ensure generated UI variants meet accessibility and responsive standards?▼

Ensuring generated UI variants meet accessibility and responsive standards requires input validation. Varium validates your inputs to guarantee accessible contrast and responsive behavior across all generated layout strategies, ensuring the output is usable across different devices.

Do I need design expertise to redesign a UI section with multiple variants?▼

You do not need design expertise to redesign a UI section with multiple variants. Varium automates the production of high-quality options, exploring layout, typography, and tone for you, so teams can review directions quickly and make informed choices without manual design work.

Related Skills

Explore More Design & Creative Skills→
BrunoSantanaDeveloperBrunoSantanaDeveloper

atomic-design

Generate stack-agnostic Atomic Design components with design tokens, types, tests, and quality gates.

Community
Advanced
I2olanDI2olanD

prototype

Generate multiple UI component variants with an in-browser picker.

Community
Advanced
AshesOfTheUndeadAshesOfTheUndead

enterprise

Define semantic design tokens for Roblox UI systems.

Community
Intermediate
MartinoPoloMartinoPolo

gk-mockup

Generate HTML UI mockup variants from Grovekeeper design briefs.

Community
Intermediate