How do I install the Web UI Analysis skill?

Run npx skillmds@latest add majiayu000/web-ui-analysis in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Web UI Analysis safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Web UI Analysis?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Web UI Analysis free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Web UI Analysis?

majiayu000 (@majiayu000) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Web UI Analysis by majiayu000 — Agent Skill

Name: Web UI Analysis
Rating: 4.5 (4 reviews)
Author: majiayu000

File contents

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

---name: web-ui-analysisdescription: 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 ```markdown ## 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 ```

Frequently asked questions

Web UI Analysis