skills.rest
rmethodm
rmethodmCOMMUNITY
Explore all skills by this author →
GitHub

ss-review

Review UI code for design token compliance, accessibility, and visual coherence.

Updated May 26, 2026
Search Tags:#accessibility#react#design system#design tokens#ui review#wcag#tailwind
One-click install
npx skills add https://github.com/rmethodm/resumegen --skill ss-review-rmethodm
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ss-review
Source: https://github.com/rmethodm/resumegen/tree/main/.agents/skills/ss-review
Command: npx skills add https://github.com/rmethodm/resumegen --skill ss-review-rmethodm

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? UI code often drifts from the design system through hardcoded colors, inconsistent spacing, missing accessibility attributes, and mixed visual styles that make interfaces look unpolished. This Skill provides a structured checklist-based review that catches these violations before they ship. ## Core Features & Use Cases - Design Token Compliance: Detects hardcoded hex colors, arbitrary pixel spacing, and off-scale values that bypass semantic tokens and recipes. - Accessibility Auditing: Checks touch target sizes, focus-visible styles, ARIA attributes, color contrast, and reduced-motion support against WCAG AA. - Visual Coherence Laws: Enforces one radius personality, one shadow language, one icon family, and consistent control heights across a file. - Use Case: Before merging a new React/Tailwind component, run the review to get a Pass/Needs Improvement/Fail score with file:line references and concrete fixes for each violation. ## Quick Start Ask the AI to review a specific UI component file for design system compliance and accessibility using the ss-review checklist.

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?▼

Run the review against the component file path to check for hardcoded hex colors, arbitrary pixel spacing, and missing semantic tokens. The output lists each violation with a file:line reference and a concrete code fix.

What accessibility checks does a UI code review cover?▼

The checklist covers touch targets of at least 44x44px, focus-visible styles, ARIA attributes, WCAG AA color contrast, prefers-reduced-motion support, image alt text, and labeled form inputs.

When should I use ss-review instead of ss-a11y or ss-lint?▼

Use ss-review for full design system and best-practice review of UI code. Use ss-a11y for accessibility-only issues, ss-audit for Nielsen UX heuristics, and ss-lint for a quick automated check.

Can this review non-web UI code like mobile or desktop?▼

Yes. For non-web artifacts, the React and Tailwind-specific checks are replaced with the active adapter's render and export checks, including safe area insets and platform-specific density rules.

Why does my UI look inconsistent even with a design system?▼

Mixed visual choices are the usual cause: multiple radius values, competing accent colors, or different shadow styles in one file. The coherence checklist flags any axis that uses more than one value system-wide.

Related Skills

Explore More Design & Creative Skills→
AvihusittonAvihusitton

ui-setup

Guide StyleSeed UI setup through step-by-step design decisions and scaffold generation.

Community
Intermediate
adamaltmejdadamaltmejd
2

reg-webapp-design-reviewer

Capture and inspect rendered screenshots for visual and accessibility regression testing.

Community
Advanced
VirtoCommerceVirtoCommerce
2

qa-design

Evaluate design system consistency and UX usability issues across web interfaces.

Official
Advanced
cloudflarecloudflare
5.2k

review-validation

Validates pull request review findings against actual repository file content to suppress false positives.

Official
Intermediate