# UI Perfection

> Enforce the "Premium" aesthetic and accessibility standards.

- Skill: `majiayu000/ui-perfection-2` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/ui-perfection-2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/ui-perfection-2/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/majiayu000/ui-perfection-2

---


# UI Perfection Protocol

## 1. "Premium" Aesthetic Rules

- **Typography**: Use defined font stacks (Inter/Roboto). No default Times New Roman.
- **Spacing**: Use standard Tailwind spacing (e.g. `p-4`, `m-6`). Avoid magic numbers.
- **Colors**: Use the project's color palette (e.g. `bg-primary-500`). Avoid raw hex codes unless absolutely necessary for specific branding.
- **Interaction**:
  - All interactive elements must have `:hover` and `:active` states.
  - Transitions should be smooth (`transition-all duration-200`).

## 2. Mobile Responsiveness

- **Mobile-First**: Design for mobile `base` styles first, then add `md:`, `lg:` modifiers.
- **Touch Targets**: Buttons must be at least 44x44px usable area.
- **No Overflow**: Check for horizontal scrollbars on mobile.

## 3. Accessibility (A11y)

- **Alt Text**: Images must have `alt` attributes.
- **Contrast**: Text color must pass WCAG AA contrast ratio against background.
- **Forms**: Inputs must have associated labels (visible or `aria-label`).
- **Keyboard**: All interactive elements must be reachable via Tab.

## 4. Perfection Checklist

- [ ] Is it responsive on mobile (320px+)?
- [ ] Are hover states present?
- [ ] Are transitions smooth?
- [ ] Do images have alt text?
- [ ] Does it look "Premium"? (Subjective check - ask yourself: "Would Apple/Linear ship this?")