# Build Premium UI Component

> Create a UI component that meets premium aesthetic standards. Use when this capability is needed.

- Skill: `tomevault-io/build-premium-ui-component` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/build-premium-ui-component`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/build-premium-ui-component/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/build-premium-ui-component

---


# Skill: Build Premium UI Component

## 1. Structure (HTML)
- Use semantic tags (`<article>`, `<section>`, `<nav>`).
- Add `data-testid` attributes for testing.
- Ensure accessibility (`aria-label`, `role`).

## 2. Styling (The "Premium" Touch)
**Every component must check these boxes:**
- [ ] **Elevation**: Does it feel detached from the background? (Shadows/Borders)
- [ ] **Interaction**: Does it react to the cursor? (Hover scale, background shift, border color change).
- [ ] **Typography**: Is the hierarchy clear? (Bold headers, muted subtext).
- [ ] **Spacing**: Is it breathable? (Minimum `p-4` or `1rem` padding).

## 3. Animation (Mandatory)
Static UIs are dead UIs.
- **Entry**: Fade in on load.
- **Hover**: `transform: scale(1.02)` or `translate-y-1`.
- **Click**: Active state `scale(0.98)`.

## 4. Code Example (Tailwind)
```html
<button class="
    group relative overflow-hidden rounded-xl bg-indigo-600 px-8 py-3 
    text-white shadow-lg transition-all duration-300 
    hover:-translate-y-1 hover:shadow-indigo-500/30 
    active:scale-95
">
    <div class="relative z-10 font-bold tracking-wide">
        Get Started
    </div>
    <div class="absolute inset-0 bg-gradient-to-r from-indigo-500 to-purple-500 opacity-0 transition-opacity duration-300 group-hover:opacity-100"></div>
</button>
```

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/tgalioautomation) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-14 -->