skills.rest
izzoa
izzoaCOMMUNITY
Explore all skills by this author →
GitHub

ss-review

Review React UI code for design-system, accessibility, and best-practice violations.

22|1|Updated Jul 17, 2026
Search Tags:#accessibility#react#design system#ui review#tailwind#component conventions
One-click install
npx skills add https://github.com/izzoa/polyrouter --skill ss-review
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ss-review
Source: https://github.com/izzoa/polyrouter/tree/main/.agents/skills/ss-review
Command: npx skills add https://github.com/izzoa/polyrouter --skill ss-review

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps review UI code for consistency, accessibility, and design-system alignment so interfaces look polished and behave predictably across screens and components.

Core Features & Use Cases

  • Design token compliance: Flags hardcoded colors, spacing, shadows, and radius values that break the visual system.
  • Component convention review: Checks for expected patterns like data-slot, cn() usage, typed props, and className overrides.
  • Accessibility and mobile quality: Identifies missing labels, weak contrast, poor touch targets, overflow problems, and motion issues.
  • Best fit use case: Use it when reviewing a React or UI component file before merge to catch visual, accessibility, and coherence regressions early.

Quick Start

Review the provided UI file for design-system, accessibility, and mobile best-practice violations and return issues with concrete fixes.

Frequently Asked Questions about ss-review

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

FAQPage Schema
How do I review React components for design system compliance and accessibility?▼

Review React components for design system compliance by inspecting UI tokens, component conventions, and accessibility attributes to catch visual inconsistencies and usability violations before merging code.

What is the best way to check Tailwind UI code for hardcoded design tokens?▼

Checking Tailwind UI code for hardcoded design tokens involves flagging raw colors, spacing, shadows, and radius values that break the visual system, ensuring components rely on standardized tokens instead.

Does this UI review tool work with React component files and design-system primitives?▼

Yes, this UI review tool works directly with React component files and design-system primitives, inspecting typed props, cn() usage, data-slot patterns, and className overrides to enforce coherence rules.

How do I catch missing accessibility labels and poor contrast in UI code?▼

Catch missing accessibility labels and poor contrast in UI code by reviewing interface files for accessibility attributes, motion issues, weak contrast, overflow problems, and inadequate touch targets.

When should I run a UI code review for component conventions?▼

Run a UI code review for component conventions before merging React or interface files to catch visual, accessibility, and coherence regressions early, ensuring interfaces behave predictably across screens.

What are common limitations of automated design system compliance checks?▼

Automated design system compliance checks focus on tokens, accessibility attributes, and spacing, but may miss complex visual context or nuanced motion issues requiring manual human verification.

Related Skills

Explore More Software Engineering Skills→
staruhubstaruhub
662

ui-analyzer

Analyze UI design screenshots to generate React TypeScript components with Tailwind CSS.

Community
Intermediate
no-problem-devno-problem-dev
5

design-audit

Audit SwiftUI Views for Design System token compliance and accessibility.

Official
Intermediate
bluebricks-nlbluebricks-nl

shadcn-code-review

Review React components using shadcn/ui, Radix primitives, and Tailwind CSS for best practices.

Official
Intermediate
hungthinh04hungthinh04

design-md

Author and validate DESIGN.md token spec files with YAML front matter.

Community
Advanced