skills.rest
RaNDoM6913
RaNDoM6913COMMUNITY
Explore all skills by this author →
GitHub

ui-reviewer

Audit frontend UI for accessibility, semantic HTML, z-index, and animation issues.

1|Updated Mar 23, 2026
Search Tags:#accessibility#animations#responsive-design#semantic-html#design-tokens#ui-review#z-index
One-click install
npx skills add https://github.com/RaNDoM6913/claude-code-superkit --skill ui-reviewer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-reviewer
Source: https://github.com/RaNDoM6913/claude-code-superkit/tree/main/packages/codex/skills/ui-reviewer
Command: npx skills add https://github.com/RaNDoM6913/claude-code-superkit --skill ui-reviewer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

UI/UX review helps teams ensure frontend interfaces meet accessibility, semantic HTML, z-index discipline, animation performance, and responsive design standards, reducing defects and rework.

Core Features & Use Cases

  • Accessibility auditing: verify ARIA roles, keyboard navigation, and color contrast.
  • Semantic HTML validation: ensure proper headings, lists, and form labeling.
  • Z-index & animation performance: enforce layering discipline and GPU-accelerated animations.
  • Responsive design checks: validate layouts across viewports and touch targets.
  • Design token compliance: promote token-based colors, typography, and spacing.
  • Use Case: integrate into design reviews or CI to catch issues early.

Quick Start

Run an automated UI review on your project to surface accessibility, semantic HTML, z-index, and animation issues.

Frequently Asked Questions about ui-reviewer

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

FAQPage Schema
How do I audit React components for accessibility and semantic HTML issues?▼

To audit React components for accessibility and semantic HTML, the Skill systematically evaluates ARIA roles, keyboard navigation, color contrast, heading structure, and form labeling, reporting findings with severity levels and remediation steps.

How do I check z-index discipline and animation performance in a Vue project?▼

Checking z-index discipline and animation performance in a Vue project involves analyzing layering management for conflicts and verifying that animations use GPU-accelerated properties to prevent UI rendering defects and jank.

Does this UI review tool work with plain HTML and CSS or only framework projects?▼

Yes, this UI review tool works with plain HTML and CSS projects as well as React and Vue, evaluating components, pages, design tokens, and responsive behavior across breakpoints without requiring specific framework dependencies.

What is the best way to validate responsive design and design token usage across breakpoints?▼

The best way to validate responsive design and design token usage is to systematically check layouts across various viewports, verify touch target sizing, and ensure colors, typography, and spacing strictly utilize defined design tokens.

Can I integrate a frontend UI review into CI to catch accessibility issues early?▼

Yes, you can integrate a frontend UI review into CI pipelines to catch accessibility, semantic HTML, and responsive design issues early, reducing post-development defects and rework during the design review process.

Related Skills

Explore More Design & Creative Skills→
KhoiwallKhoiwall

mockup-to-code

Convert UI mockups into React, Vue, or plain HTML code.

Community
Advanced
arcasilesgrouparcasilesgroup
54

accessibility

Review frontend code for WCAG 2.1 AA compliance and report actionable findings.

Official
Advanced
murphytruemanmurphytrueman
155

cicd-integration

Generate CI/CD pipeline configurations for design system quality checks.

Community
Advanced
NVIDIANVIDIA
33

accessibility

Automate accessibility audits for web components using ESLint and axe-core.

Official
Advanced