web-ui-analysis
Analyze web interfaces for UX issues, accessibility compliance (WCAG 2.1), color contrast, typography hierarchy, responsive design, and Core Web Vitals. Returns actionable improvements with code examples.
When & Why to Use This Skill
The Web UI Analysis skill is a comprehensive diagnostic tool designed to audit web interfaces for UX excellence, accessibility compliance, and technical performance. It evaluates critical design elements including WCAG 2.1 standards, typography hierarchy, and responsive layouts while measuring Core Web Vitals. By providing actionable improvements and specific code examples, it empowers developers and designers to optimize user experiences and ensure high-quality web standards.
Use Cases
- Accessibility Auditing: Ensure web interfaces meet WCAG 2.1 AA/AAA compliance by checking color contrast, touch targets, and ARIA roles.
- Design System Validation: Verify typography scales, 8px grid systems, and color palettes against Material Design or Apple HIG standards.
- Performance Optimization: Measure and improve Core Web Vitals (LCP, FID, CLS) to enhance page speed and SEO rankings.
- Responsive Design Review: Identify layout issues and breakpoint inconsistencies across mobile, tablet, and desktop views.
- UX Issue Identification: Detect and fix usability bottlenecks with actionable code-based recommendations.
| name | web-ui-analysis |
|---|---|
| description | Analyze web interfaces for UX issues, accessibility compliance (WCAG 2.1), color contrast, typography hierarchy, responsive design, and Core Web Vitals. Returns actionable improvements with code examples. |
Web UI Analysis Skill
When to Use
Use this skill when:
- Evaluating a web interface for UX issues
- Checking accessibility compliance (WCAG 2.1 AA/AAA)
- Analyzing color contrast ratios
- Reviewing typography and font hierarchy
- Checking responsive design breakpoints
- Measuring Core Web Vitals (LCP, FID, CLS)
- Comparing against Material Design or Apple HIG standards
Analysis Framework
1. Accessibility (WCAG 2.1)
✅ Checklist:
- [ ] Color contrast ratio ≥ 4.5:1 (text), ≥ 3:1 (large text)
- [ ] Touch targets ≥ 44x44px
- [ ] Keyboard navigation works
- [ ] Screen reader labels present
- [ ] Focus states visible
- [ ] Alt text on images
- [ ] ARIA roles correct
2. Typography Hierarchy
Heading Scale (1.250 ratio):
- h1: 2.441rem (39px)
- h2: 1.953rem (31px)
- h3: 1.563rem (25px)
- h4: 1.25rem (20px)
- body: 1rem (16px)
- small: 0.8rem (13px)
3. Color Palette Analysis
Primary Colors:
- Main: #hex (contrast ratio)
- Light variant: #hex
- Dark variant: #hex
Semantic Colors:
- Success: #22c55e (green-500)
- Warning: #f59e0b (amber-500)
- Error: #ef4444 (red-500)
- Info: #3b82f6 (blue-500)
4. Layout & Spacing
8px Grid System:
- xs: 4px (0.25rem)
- sm: 8px (0.5rem)
- md: 16px (1rem)
- lg: 24px (1.5rem)
- xl: 32px (2rem)
- 2xl: 48px (3rem)
Breakpoints:
- mobile: 0-639px
- tablet: 640-1023px
- desktop: 1024-1279px
- wide: 1280px+
5. Core Web Vitals
Targets:
- LCP (Largest Contentful Paint): < 2.5s
- FID (First Input Delay): < 100ms
- CLS (Cumulative Layout Shift): < 0.1
- FCP (First Contentful Paint): < 1.8s
- TTFB (Time to First Byte): < 0.8s
Output Format
## UI Analysis Report
### Summary
- Overall Score: X/100
- Accessibility: ✅/⚠️/❌
- Performance: ✅/⚠️/❌
- Responsive: ✅/⚠️/❌
### Critical Issues
1. [Issue] - [Impact] - [Fix]
### Recommendations
1. [Improvement] - [Code example]
### Resources
- [Link to relevant docs]
Example Usage
@webui Analyze the login page for accessibility issues
@webui Check color contrast on the dashboard
@webui Review typography hierarchy on landing page
@webui Measure Core Web Vitals for homepage