ui-creator
CommunityAutomate UI design, testing, and audits.
Authorvinceh
Version1.0.0
Installs0
System Documentation
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
Dependency Matrix
Required Modules
@playwright/test@axe-core/playwright
Components
scriptsreferencesassets
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: ui-creator Download link: https://github.com/vinceh/recipe/archive/main.zip#ui-creator Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.