skills.rest
Foo-x
Foo-xCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-ux-a11y-reviewer

Analyze HTML, CSS, and JavaScript for WCAG 2.2 accessibility and UX issues.

2|1|Updated Feb 2, 2019
Search Tags:#code review#accessibility#frontend#react#vue#wcag#ux
One-click install
npx skills add https://github.com/Foo-x/dotfiles --skill frontend-ux-a11y-reviewer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ux-a11y-reviewer
Source: https://github.com/Foo-x/dotfiles/tree/main/claude/skills/frontend-ux-a11y-reviewer
Command: npx skills add https://github.com/Foo-x/dotfiles --skill frontend-ux-a11y-reviewer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill automatically analyzes frontend code to identify and suggest improvements for accessibility (WCAG 2.2 compliance) and user experience (UX) issues.

Core Features & Use Cases

  • Accessibility Review: Checks for compliance with WCAG 2.2 guidelines across four principles: Perceivable, Operable, Understandable, and Robust.
  • UX Analysis: Identifies common UX anti-patterns based on established heuristics.
  • Framework-Agnostic: Analyzes HTML, CSS, and JavaScript, with specific checks for React/Next.js and Vue/Nuxt.
  • Use Case: A developer can use this Skill to get a detailed report on potential accessibility barriers and UX flaws in their new component before it goes to QA, ensuring a better user experience for all.

Quick Start

Analyze the frontend code in the 'src/components' directory for accessibility and UX issues.

Frequently Asked Questions about frontend-ux-a11y-reviewer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I check my frontend code for WCAG 2.2 compliance?▼

Checking frontend code for WCAG 2.2 compliance involves analyzing HTML, CSS, and JavaScript to identify accessibility barriers across the four principles: Perceivable, Operable, Understandable, and Robust, generating actionable recommendations.

Can I run an accessibility review on React and Vue components?▼

Yes, you can run accessibility reviews on React and Vue components. The analysis supports framework-specific checks for React/Next.js and Vue/Nuxt, alongside standard HTML, CSS, and JavaScript codebase evaluations.

What is the best way to find UX anti-patterns in a web application codebase?▼

The best way to find UX anti-patterns in a web application codebase is to parse the frontend code against established UX heuristics, which identifies common flaws and offers prioritized, actionable recommendations for improvement.

How do I get prioritized recommendations for fixing accessibility issues?▼

To get prioritized recommendations for fixing accessibility issues, analyze your frontend codebase to parse HTML, CSS, and JavaScript, which yields a detailed report ranking actionable improvements by severity and UX impact.

When do I need to analyze frontend code for accessibility before QA?▼

You need to analyze frontend code for accessibility before QA when developing new components, ensuring potential WCAG 2.2 barriers and UX flaws are identified and resolved early to provide a better user experience for all users.

Related Skills

Explore More Software Engineering Skills→
p-potvinp-potvin
1

web-design-guidelines

Assess frontend HTML, CSS, and JavaScript against Web Interface Guidelines and accessibility rules.

Community
Intermediate
InnerScopeHearingInnerScopeHearing

wcag-audit-patterns

Audit web content for WCAG 2.2 compliance with automated testing and remediation guidance.

Official
Intermediate
GenuinehGenuineh

test-frontend-unit

Guide frontend unit testing with Vitest, React Testing Library, and Vue Test Utils.

Community
Intermediate
dachentdachent
18

frontend-design-codex

Validate frontend UI components through browser rendering and screenshot analysis.

Community
Advanced