ReddRadar
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/majiayu000/claude-skill-registry/tree/main/skills/design/ui-generator-timequity-vibe-coder
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.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?