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", "страница", "компонент", "форма".

View SKILL.md on GitHub Repository
Stars 0
Forks 0

Install this agent skill to your Project

npx add-skill https://github.com/timequity/vibe-coder/tree/main/skills/ui-generator

SKILL.md

UI Generator

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

Process

  1. Understand request

    • "Login page" → form with email/password
    • "Dashboard" → stats cards, charts, tables
    • "Settings" → form sections, toggles

  2. Apply theme

    • Load current theme from theme-factory
    • Use theme colors and fonts
    • Follow frontend-design principles

  3. Generate code

    • React/Next.js components
    • Tailwind CSS styling
    • Responsive by default

  4. 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"

  1. Generate PricingPage component
  2. Create PricingTier subcomponent
  3. Apply current theme
  4. Add to routes
  5. Show preview: "Here's your pricing page"

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

timequity/vibe-coder

mvp-help

Help and documentation for Idea to MVP plugin. Use when: user asks about building MVPs, vibe coding, or available commands. Triggers: "help", "what can you do", "mvp help", "how to build".

0 0
Explore
timequity/vibe-coder

verification-gate

Hidden quality gate that runs before showing "Done!" to user - ensures all tests pass, build succeeds, and requirements met before claiming completion

0 0
Explore
timequity/vibe-coder

brainstorming

Refine ideas into detailed designs through Socratic dialogue. Use when: user has rough idea, needs to clarify requirements, explore approaches. Triggers: "brainstorm", "discuss idea", "I'm thinking about", "what if", "help me think through", "explore options", "/brainstorm".

0 0
Explore
timequity/vibe-coder

subagent-creator

Guide for creating effective subagents (custom agents). Use when users want to create a new subagent that can be dispatched via Task tool for autonomous work. Covers frontmatter fields (name, description, tools, model, permissionMode, skills), prompt design, and when to use subagents vs skills.

0 0
Explore
timequity/vibe-coder

backend-rust

Modern Rust backend with Axum, SQLx, tokio + CI/CD automation. Use when: building Rust APIs, high-performance services, or needing build/test/lint/audit automation. Triggers: "axum", "rust backend", "rust api", "sqlx", "tokio", "cargo build", "cargo test", "clippy", "rustfmt", "cargo-audit", "cross-compile", "rust ci", "release build", "rust security", "shuttle", "actix".

0 0
Explore
timequity/vibe-coder

test-driven-development

Write failing test first, then minimal code to pass. Red-Green-Refactor cycle. Use when: implementing features, fixing bugs, refactoring code. Triggers: "implement", "add feature", "fix bug", "tdd", "test first", "write tests", "test-driven".

0 0
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results