ui-test

Name: ui-test
Availability: InStock
Author: skillvee

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

Ready to run

npx skills add https://github.com/skillvee/simulator --skill ui-test-skillvee

💬 Prompt for ChatGPT / Claude Chat▼

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.