// Build premium SaaS interfaces that avoid vibe-coded anti-patterns. Use when creating UI components, forms, dashboards, hero sections, pricing pages, or any user-facing templates. Enforces consistent spacing, typography, color discipline, and accessibility standards.
| name | premium-saas-ui |
| description | Build premium SaaS interfaces that avoid vibe-coded anti-patterns. Use when creating UI components, forms, dashboards, hero sections, pricing pages, or any user-facing templates. Enforces consistent spacing, typography, color discipline, and accessibility standards. |
| allowed-tools | Read, Grep, Glob, Edit, Write |
This skill ensures all UI work produces polished, intentional interfaces that signal quality and professionalism. It actively prevents the "vibe coded" aesthetic that undermines user trust.
Use a strict 4px or 8px spacing scale. Never introduce random values.
<!-- WRONG: Random spacing -->
<div class="p-5 m-7 gap-3">
<!-- CORRECT: Consistent 4px scale -->
<div class="p-4 m-8 gap-4"> <!-- 16px, 32px, 16px -->
Tailwind spacing classes to prefer:
p-2, p-4, p-6, p-8 (8, 16, 24, 32px)m-2, m-4, m-6, m-8gap-2, gap-4, gap-6, gap-8space-y-4, space-x-4Define a clear type ramp and apply consistently:
<!-- Heading hierarchy -->
<h1 class="text-3xl font-bold text-gray-900">Page Title</h1>
<h2 class="text-2xl font-semibold text-gray-800">Section</h2>
<h3 class="text-xl font-medium text-gray-700">Subsection</h3>
<!-- Body text -->
<p class="text-base text-gray-600 leading-relaxed">Content</p>
<p class="text-sm text-gray-500">Secondary text</p>
Never:
Use a constrained palette. For PaymentReminder:
<!-- Primary actions -->
<button class="bg-blue-600 hover:bg-blue-700 text-white">
<!-- Secondary actions -->
<button class="bg-gray-100 hover:bg-gray-200 text-gray-700">
<!-- Destructive actions -->
<button class="bg-red-600 hover:bg-red-700 text-white">
<!-- Success states -->
<div class="bg-green-50 text-green-800 border border-green-200">
NEVER use:
Pick ONE radius and use everywhere:
<!-- Standard radius for all components -->
<div class="rounded-lg"> <!-- Use this everywhere -->
<button class="rounded-lg">
<input class="rounded-lg">
<div class="rounded-lg">
<!-- Exception: Pills/badges -->
<span class="rounded-full px-3 py-1">Badge</span>
<!-- Exception: Avatars -->
<img class="rounded-full">
Never mix rounded-sm, rounded-md, rounded-lg, rounded-xl on the same page.
One elevation system:
<!-- Cards, modals, dropdowns -->
<div class="shadow-sm"> <!-- Subtle lift -->
<div class="shadow-md"> <!-- Prominent cards -->
<div class="shadow-lg"> <!-- Modals only -->
Never use glow shadows or colored shadows.
Purple Gradients
<!-- BANNED -->
<div class="bg-gradient-to-r from-purple-500 to-pink-500">
Sparkle Overload
<!-- BANNED: Sparkles as decoration -->
<h1>Launch your idea today ✨</h1>
<button>Get Started ✨</button>
Aggressive Hover Animations
<!-- BANNED -->
<div class="hover:-translate-y-2 hover:rotate-1 hover:scale-105">
<!-- ALLOWED: Subtle feedback -->
<div class="hover:bg-gray-50 transition-colors">
Emoji as UI Elements
<!-- BANNED -->
<li>🚀 Feature one</li>
<li>💎 Feature two</li>
<!-- USE proper icons instead -->
<li><svg class="w-5 h-5 text-blue-500">...</svg> Feature one</li>
Fake Testimonials
Broken Social Links
<!-- BANNED: Placeholder links -->
<a href="#">Twitter</a>
<a href="https://twitter.com">Follow us</a>
<!-- Only include if real -->
<a href="https://twitter.com/actualhandle">@actualhandle</a>
Missing Loading States
<!-- Every async action needs feedback -->
<button x-data="{ loading: false }"
@click="loading = true"
:disabled="loading">
<span x-show="!loading">Save</span>
<span x-show="loading">Saving...</span>
</button>
Inconsistent Component Sizing
<!-- All buttons same size in context -->
<button class="px-4 py-2">Cancel</button>
<button class="px-4 py-2">Save</button> <!-- Match padding -->
Misaligned Grids
<!-- Use consistent grid gaps -->
<div class="grid grid-cols-3 gap-6">
<!-- All cards identical structure -->
</div>
Before any UI is complete, verify:
Every page should follow:
<!-- Consistent page structure -->
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<!-- Page header -->
<div class="mb-8">
<h1 class="text-2xl font-bold text-gray-900">Page Title</h1>
<p class="mt-2 text-gray-600">Description</p>
</div>
<!-- Content -->
<div class="space-y-6">
<!-- Sections with consistent spacing -->
</div>
</main>
When in doubt, remove it. Premium design is about restraint, not addition. Every element must earn its place. If something feels decorative rather than functional, delete it.