skills.rest
vinceh
vincehCOMMUNITY
Explore all skills by this author →
GitHub

ui-creator

Generate and evaluate React or Vue UIs with Playwright accessibility and performance checks.

1|Updated Oct 21, 2025
Search Tags:#automation#design#testing#ui#component#playwright#accessible
One-click install
npx skills add https://github.com/vinceh/recipe --skill ui-creator
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-creator
Source: https://github.com/vinceh/recipe/tree/main/.claude/skills/ui-creator
Command: npx skills add https://github.com/vinceh/recipe --skill ui-creator

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @playwright/test, @axe-core/playwright, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill helps teams create high-quality user interfaces from descriptions, evaluate existing UIs, compare design variations (A/B testing), and build component libraries. It merges visual design principles with practical code implementation and objective Playwright-based evaluation to ensure accessibility, performance, and visual consistency.

Core Features & Use Cases

  • From description to UI: generate new UI components and pages from natural language prompts.
  • UI Analysis & Improvement: assess accessibility, performance, and visual stability of existing interfaces.
  • A/B Testing & Design Systems: compare variations and scaffold a reusable component library.
  • Design-token-guided styling and component templates.

Quick Start

Use the UI Creator to scaffold a Button component:

  • Quick Start: npx tsx scripts/init-component.ts Button --type button --framework react
  • Then evaluate UI quality:
  • npx tsx scripts/evaluate-ui.ts http://localhost:3000/components/button

Frequently Asked Questions about ui-creator

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

FAQPage Schema
How do I automate accessibility testing for React and Vue components?▼

Accessibility testing automates WCAG 2.2 AA compliance checks on UI components. This Skill uses Playwright and axe-core to evaluate React 18+ and Vue 3.5+ interfaces, detecting violations and performance gaps in your component library without manual audits.

Can I generate UI components from natural language descriptions?▼

Yes. This Skill converts natural language prompts into functional UI components and pages, then evaluates them with Playwright-based testing. It bridges design descriptions and production-ready code while ensuring accessibility and visual consistency.

What's the best way to compare design variations and conduct A/B tests on UIs?▼

Design comparison combines visual regression testing, performance metrics, and accessibility audits across UI variations. This Skill automates side-by-side evaluation of design tokens and component states, surfacing performance and compliance differences.

Does this work with existing design systems and component libraries?▼

Yes. The Skill scaffolds reusable component libraries aligned with design tokens and templates. It evaluates existing interfaces for accessibility, performance, and visual stability, then improves them to meet production-grade UI standards.

What dependencies do I need to run UI automation and testing?▼

You need Playwright for browser automation and axe-core for accessibility audits. This Skill bundles both as core dependencies, eliminating manual setup. It supports React 18+, Vue 3.5+, and design-token-guided workflows.

Why use automated UI evaluation instead of manual testing?▼

Automated evaluation removes manual effort and human error from accessibility, performance, and visual regression checks. Playwright-based audits provide consistent, repeatable results across component variations and design tokens, scaling to large libraries.

Related Skills

Explore More Design & Creative Skills→
ChoreShoreChoreShore

token-keeper

Validate design token usage and accessibility patterns in React, Vue, and Svelte components.

Official
Intermediate
hopeoverturehopeoverture
6

ui-library-usage-auditor

Audit shadcn/ui component usage for accessibility and design-system conformance.

Community
Advanced
crewrigcrewrig
20

web-tester

Automate end-to-end browser testing and accessibility validation for web applications.

Official
Advanced
TheGreatLTheGreatL

ui-visual-validator

Validate UI modifications for visual regressions, design compliance, and accessibility.

Community
Advanced