skills.rest
skillvee
skillveeCOMMUNITY
Explore all skills by this author →
GitHub

ui-test

Generate 10 UI variations for a given app route using shadcn components.

Updated Aug 27, 2026
Search Tags:#design#ui#review#shadcn#mock-data#route#variations
One-click install
npx skills add https://github.com/skillvee/simulator --skill ui-test-skillvee
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-test
Source: https://github.com/skillvee/simulator/tree/main/.claude/skills/ui-test
Command: npx skills add https://github.com/skillvee/simulator --skill ui-test-skillvee

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Quickly explore multiple UI designs for a given route by generating variations without implementing them.

Core Features & Use Cases

  • Generates 10 UI variations for a provided route to compare layout, typography, and component choices.
  • Reads the route's code to understand data flow and component structure; uses mock data to render variations.
  • Writes variation files into src/app/ui-tester/current-test/ and provides an accessible test harness at /ui-tester.

Quick Start

Provide a route URL and the system will generate 10 UI variations for review.

Frequently Asked Questions about ui-test

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

FAQPage Schema
How do I generate UI design variations for a route?▼

To generate UI design variations, provide a route URL and the system creates 10 distinct styling approaches using your project's shadcn components and mock data for rapid comparison.

What is the best way to compare multiple UI layouts without implementing them?▼

The best way to compare UI layouts is generating multiple design variations in a built-in test harness, allowing you to review layout, typography, and component choices side-by-side without final implementation.

Does the UI variation generator work with my existing shadcn components?▼

Yes, the UI variation generator works with shadcn components by reading your route's code, inferring data shapes, and rendering styling approaches using your existing project components.

How do I test different UI variations within my app?▼

You can test different UI variations by accessing the test harness at /ui-tester, where the generated files are written under src/app/ui-tester/current-test/ for direct review.

Can I generate mock data automatically for UI design testing?▼

Yes, mock data is generated automatically by reading the route's code to infer the data shape and component structure, ensuring the 10 UI variations render with realistic content.

Related Skills

Explore More Design & Creative Skills→
adbertramadbertram

prowler-ui

Enforce Prowler UI component structure and styling with shadcn/ui and Tailwind.

Community
Intermediate
Insik-HanInsik-Han
16

prototype

Create throwaway logic or UI prototypes and capture findings in NOTES.md.

Community
Intermediate
Kevin-Liu-01Kevin-Liu-01
16

shadcn

Automate shadcn UI project setup and preset switching via CLI.

Community
Intermediate
ramybarsoumramybarsoum

napkin-sketch

Generate annotated ASCII wireframes and capture browser screenshots for design matching.

Community
Intermediate