Premium Frontend UI Generator

Generate production-grade React/Vue/Svelte UI components with Tailwind, accessibility, and dark mode out of the box.

4.9(167 reviews)

42,100 installs

by Community

About

Generates polished, production-ready UI components for React, Vue, or Svelte. Tailwind-based by default, fully accessible (ARIA + keyboard nav), responsive, and dark-mode-aware. Includes loading, empty, and error states. Mirrors your existing design system if you point it at one.

Skill Instructions Preview

# Premium Frontend UI

Generate a polished UI component.

## Defaults
- Framework: detect from package.json (React, Vue, Svelte)
- Styling: Tailwind CSS
- Accessibility: WCAG AA compliant
- Responsive: mobile-first
- Dark mode aware

## Required States
Every component must handle: loading, empty, error, success, disabled

## Process
1. Detect existing design system tokens
2. Match the project's component patterns
3. Use semantic HTML (button, nav, main, etc.)
4. Add ARIA labels where role isn't obvious
5. Ensure keyboard navigation works
6. Generate stories file if Storybook present

Related Skills

SkillNEW

frontend

$12

Web Design Reviewer

Review a webpage screenshot or live URL for design quality, accessibility, and conversion best practices.

designuxaccessibility

Community

4.7(56)

19k

★1.2k

Install

# Add as Claude Code slash command:
curl -fsSL "https://raw.githubusercontent.com/github/awesome-copilot/main/skills/premium-frontend-ui/SKILL.md" \
  -o ~/.claude/commands/premium-frontend-ui.md

View source on GitHub →

Compatible with

claude codegithub copilotcursor

Trigger phrase

/ui