skills.rest
Async-IO
Async-IOOFFICIAL
Explore all skills by this author →
GitHub

design-review

Analyze React components and CSS against design system checklists.

Updated Aug 27, 2026
Search Tags:#accessibility#design system#visual consistency#design review#frontend development#ui components
One-click install
npx skills add https://github.com/Async-IO/pierre_mcp_server --skill design-review-async-io
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/Async-IO/pierre_mcp_server/tree/main/.claude/skills/design-review
Command: npx skills add https://github.com/Async-IO/pierre_mcp_server --skill design-review-async-io

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill automates the tedious process of manually checking frontend code against design system guidelines, ensuring visual consistency, accessibility, and adherence to best practices.

Core Features & Use Cases

  • Design System Compliance: Automatically checks for correct component usage, color tokens, and spacing.
  • Accessibility Audit: Verifies focus states, ARIA labels, and color contrast ratios.
  • Visual Consistency: Ensures typography, gradients, and loading states match the established design.
  • Use Case: Before merging a new feature, run this skill to catch any design inconsistencies or accessibility issues, preventing costly rework later.

Quick Start

Run the design-review skill to analyze the frontend components for compliance.

Frequently Asked Questions about design-review

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

FAQPage Schema
How do I check React components for design system compliance and visual consistency?▼

To check React components for design system compliance, you can run an automated review that analyzes component usage and CSS definitions within specified directories, validating against checklists for anti-patterns, missing styles, and visual alignment.

What is the best way to automate an accessibility audit for frontend UI components?▼

Automating an accessibility audit for frontend UI components involves programmatically verifying focus states, ARIA labels, and color contrast ratios against predefined standards, ensuring that React components meet accessibility requirements before merging.

How does a design review validate CSS completeness and spacing in UI components?▼

A design review validates CSS completeness by analyzing CSS definitions in specified directories to check for missing styles, incorrect color tokens, and spacing inconsistencies, ensuring UI components adhere to established design guidelines.

Can I review UI components for visual consistency before merging a new feature?▼

Yes, you can review UI components for visual consistency before merging by analyzing React components and CSS definitions to catch typography, gradient, and loading state mismatches, preventing costly rework and ensuring design system adherence.

Does automated design review work with predefined checklists for anti-patterns and missing styles?▼

Automated design review works with predefined checklists by validating React components and CSS definitions against specific criteria for anti-patterns, missing styles, accessibility requirements, and visual alignment to ensure UI quality.

Related Skills

Explore More Design & Creative Skills→
GrupoUSGrupoUS
1

theme-factory

Apply predefined themes from markdown files to slides, documents, and web pages.

Community
Basic
blackgirlbytesblackgirlbytes

audit-a11y

Audit React/Next.js components for WCAG 2.1 AA accessibility violations.

Community
Intermediate
pavegpaveg
2

ui-design-standards

Enforce UI design standards across frontend projects with theme tokens and component architecture.

Community
Advanced
tan-yong-shengtan-yong-sheng
4

ui-visual-validator

Analyze screenshots for visual regressions, design system compliance, and accessibility.

Community
Advanced