gabrielmoreira Overview
Frontend code touches every user. Poor UI engineering causes accessibility barriers, performance degradation, and broken experiences on non-standard devices. This skill enforces the discipline of building UI that works for everyone.
When to Use
- Building any user-facing UI component
- Reviewing frontend PRs
- Before any UI ships to production
Process
Step 1: Accessibility First
- Every interactive element has a visible focus state.
- All images have meaningful alt text (or
alt=""for decorative). - Color contrast ratio ≥ 4.5:1 for normal text.
- All functionality operable by keyboard alone.
- Use semantic HTML:
<button>not<div onclick>,<nav>not<div class="nav">.
Verify: Run axe DevTools or Lighthouse accessibility audit. Score ≥ 90.
Step 2: Performance (Core Web Vitals)
- LCP (Largest Contentful Paint) < 2.5s: Optimize images, preload critical resources.
- FID/INP < 100ms: Avoid long tasks on the main thread.
- CLS (Cumulative Layout Shift) < 0.1: Reserve space for dynamic content.
- Lazy load below-the-fold images and non-critical JS.
- Bundle size: measure before and after. No unneeded dependencies.
Verify: Lighthouse performance score ≥ 80. CWV within targets.
Step 3: Responsive Design
- Test at 320px, 768px, 1024px, 1440px viewports.
- No horizontal scrolling at any standard viewport.
- Touch targets ≥ 44px × 44px.
Step 4: State Management Discipline
- Server state vs. client state are separate concerns — don't mix.
- No prop drilling more than 2 levels — use context or state management.
- Loading, error, and empty states handled for every async operation.
Verify: Loading, error, and empty states all visible in Storybook/dev environment.
Common Rationalizations (and Rebuttals)
| Excuse | Rebuttal |
|---|---|
| "Accessibility is for edge cases" | 1 in 4 adults has a disability. It's not an edge case. |
| "We'll optimize performance later" | Users leave after 3 seconds. "Later" is too late. |
Verification
- Accessibility audit score ≥ 90
- Core Web Vitals within targets
- Responsive at 320px/768px/1024px/1440px
- Loading, error, empty states handled
- All interactive elements keyboard-operable