Agent skill
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", "страница", "компонент", "форма".
Install this agent skill to your Project
npx add-skill https://github.com/timequity/plugins/tree/main/vibe-coder/skills/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"
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
timequity/plugins
claude-code-course
Learn Claude Code in 5 hands-on lessons. From basics to building applications. Use when: user wants to learn Claude Code, asks "how do I...", or is new. Triggers: "learn", "teach me", "how does this work", "I'm new", "course".
timequity/plugins
foundations
Claude Code basics for new users. Covers essential concepts and commands. Use when: user is new to Claude Code or routed here by learning-path assessment.
timequity/plugins
advanced
Claude Code mastery for power users. Build agents, MCP servers, publish plugins. Use when: user wants to create agents, build integrations, or publish plugins.
timequity/plugins
lessons
Lesson content for Claude Code Course. Use when: loading lesson content. Internal skill - contains lesson files.
timequity/plugins
intermediate
Claude Code customization for comfortable users. Covers skills, commands, MCP, hooks. Use when: user knows basics and wants to customize Claude Code.
timequity/plugins
course-help
Help and navigation for Claude Code Course. Use when: user asks about the course, lessons, or progress. Triggers: "help", "course help", "what lessons", "my progress".
Didn't find tool you were looking for?