skills.rest
hpsgd
hpsgdOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design-review

Inspect UI implementations for design system and accessibility conformance.

Updated Apr 1, 2026
Search Tags:#frontend#tailwind#design-system#responsive-design#design-review#component-patterns#ui-accessibility
One-click install
npx skills add https://github.com/hpsgd/claude-marketplace --skill design-review-hpsgd
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/hpsgd/claude-marketplace/tree/main/plugins/product/ui-designer/skills/design-review
Command: npx skills add https://github.com/hpsgd/claude-marketplace --skill design-review-hpsgd

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

UI implementations often drift from the design system, accessibility guidelines, and component patterns, making them inconsistent and harder to maintain across products.

Core Features & Use Cases

  • Ensure design system token usage, color, typography, spacing, and dark mode support are consistent across components.
  • Detect accessibility gaps (contrast, keyboard navigation, aria-labels) and responsive behavior across breakpoints.
  • Provide actionable recommendations to align implementations with design tokens and UI primitives.

Quick Start

Inspect the target UI artifacts (files, components, or pages) and request a review of their conformance against the design system and accessibility standards.

Frequently Asked Questions about design-review

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

FAQPage Schema
How do I check if my frontend UI matches the design system?▼

To check if your frontend UI matches the design system, inspect your target UI artifacts and request a review to identify deviations in token usage, color, typography, spacing, and dark mode support.

Can I detect accessibility gaps like contrast and keyboard navigation in my components?▼

You can detect accessibility gaps by applying checks across contrast, keyboard navigation, and aria-labels to determine conformance with accessibility guidelines and ensure quality.

What is the best way to verify responsive design behavior across breakpoints?▼

The best way to verify responsive design behavior is to apply checks across breakpoints to determine conformance in code and design artifacts, ensuring consistent responsive behavior.

Does this design review process work with Tailwind and frontend component patterns?▼

Yes, the design review process works with Tailwind and frontend component patterns by applying checks to codify alignment with design system rules and UI primitives.

How do I fix UI inconsistencies and get actionable remediation steps?▼

To fix UI inconsistencies, the review outputs actionable remediation steps and guardrails that codify alignment with design system rules and accessibility best practices.

Related Skills

Explore More Design & Creative Skills→
hulusi-tunchulusi-tunc
3

naming-convention

Establish naming conventions for design elements, components, and tokens.

Community
Intermediate
gtpgg1013gtpgg1013

design-taste-frontend

Enforce premium frontend design standards for React/Next.js projects.

Community
Advanced
ekremmkasapekremmkasap

tailwind-design-system

Automates Tailwind CSS v4 design system creation with tokens and themes.

Community
Advanced
agentik-osagentik-os
10

uiuxaudit

Audit UI/UX design inconsistencies across pages and components.

Community
Advanced