ui-generator

Generate UI components from natural language descriptions. Use when: user asks for a page, component, or UI element. Triggers: "create page", "add component", "show form", "make button", "страница", "компонент", "форма".

Stars 163

Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/ui-generator

SKILL.md

UI Generator

Create beautiful UI from descriptions. Integrates with theme-factory.

Process

Understand request
- "Login page" → form with email/password
- "Dashboard" → stats cards, charts, tables
- "Settings" → form sections, toggles
Apply theme
- Load current theme from theme-factory
- Use theme colors and fonts
- Follow frontend-design principles
Generate code
- React/Next.js components
- Tailwind CSS styling
- Responsive by default
Preview
- Hot reload in browser
- User sees result immediately

Component Patterns

Request	Components
"login page"	Form, inputs, button, link
"dashboard"	Stats cards, chart, table
"settings"	Sections, toggles, form
"landing page"	Hero, features, CTA, footer
"pricing"	Tier cards, comparison table
"profile"	Avatar, info, edit form

Design Rules

From frontend-design skill:

No Inter, Roboto, Arial
No purple gradients on white
Distinctive, memorable aesthetics
Motion and micro-interactions

Usage

User says: "Add a pricing page with 3 tiers"

Generate PricingPage component
Create PricingTier subcomponent
Apply current theme
Add to routes
Show preview: "Here's your pricing page"