Elite Frontend Ux

---
name: elite-frontend-ux
description: 'Create distinctive, production-grade frontend interfaces with expert-level
  UX design. Use when building SaaS dashboards, landing pages, marketing sites, React/Vue
  components, HTML/CSS layouts, or any web UI. Combines bold aesthetic direction with
  systematic design tokens, WCAG accessibility, conversion optimization, and Tailwind/React
  best practices. Produces polished, memorable interfaces that avoid generic AI aesthetics
  while meeting professional standards. type: reference

  '
version: 1.0.0
category: development
last_updated: 2026-02-28
tools:
- Read
- Write
- Edit
- Bash
related_skills:
- html-report-verify
- webapp-testing
tags:
- frontend
- ux
- ui
- tailwind
- react
- accessibility
- wcag
- dashboard
- landing-page
- design-tokens
platforms:
- linux
- macos
- windows
type: reference
---

# Elite Frontend Ux

## Sub-Skills

- [Trigger](trigger/SKILL.md)
- [Phase 0 — Context Analysis (Answer Before Writing Any Code)](phase-0-context-analysis-answer-before-writing-any/SKILL.md)
- [1. Aesthetic Commitment (Choose ONE, COMMIT)](1-aesthetic-commitment-choose-one-commit/SKILL.md)
- [2. Design Token System](2-design-token-system/SKILL.md)
- [Contrast (WCAG 2.1 AA) (+4)](contrast-wcag-21-aa/SKILL.md)
- [Layout (+3)](layout/SKILL.md)
- [Above-the-Fold Essentials (+4)](above-the-fold-essentials/SKILL.md)
- [Required: cn() Helper (+3)](required-cn-helper/SKILL.md)
- [Compound Components (prefer over prop soup) (+3)](compound-components-prefer-over-prop-soup/SKILL.md)
- [8. Anti-Patterns (Never Do)](8-anti-patterns-never-do/SKILL.md)
- [9. Pre-Delivery Checklist](9-pre-delivery-checklist/SKILL.md)
- [10. Implementation Order](10-implementation-order/SKILL.md)