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).