skills.rest
ebenfc
ebenfcCOMMUNITY
Explore all skills by this author →
GitHub

design-review

Reviews UI components and pages for visual hierarchy, spacing, layout, theme compliance, consistency, and interaction design.

Updated Aug 27, 2026
Search Tags:#design system#visual consistency#design review#component analysis#ux audit#ui critique
One-click install
npx skills add https://github.com/ebenfc/bird-photo-gallery --skill design-review-ebenfc
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/ebenfc/bird-photo-gallery/tree/main/.claude/skills/design-review
Command: npx skills add https://github.com/ebenfc/bird-photo-gallery --skill design-review-ebenfc

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a structured and comprehensive review of user interface designs, ensuring visual quality, consistency, and adherence to established design systems.

Core Features & Use Cases

  • Visual Hierarchy Assessment: Evaluates the clarity and effectiveness of element prioritization.
  • Spacing and Layout Analysis: Checks for consistent spacing, proper grouping, and clean layouts.
  • Theme Compliance: Verifies adherence to design tokens, CSS variables, and dark mode standards.
  • Consistency Check: Ensures uniformity across components, pages, and interactive elements.
  • State Handling: Reviews empty, loading, and error states for usability.
  • Interaction Design: Assesses the clarity of interactive elements and feedback mechanisms.
  • Use Case: A designer can submit a new component or page for review to ensure it aligns with the project's design system before implementation.

Quick Start

Use the design-review skill to review the layout and spacing of the new user profile page.

Frequently Asked Questions about design-review

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

FAQPage Schema
How do I audit my UI for design system compliance and visual consistency?▼

To audit UI for design system compliance, review components against defined theme variables and CSS variables. This ensures visual consistency, proper spacing, and adherence to dark mode standards across all interactive elements.

What is included in a comprehensive UX audit for a new page or component?▼

A comprehensive UX audit evaluates visual hierarchy, spacing, layout, and state handling for empty, loading, and error screens. It also assesses interaction design to verify feedback mechanisms and element clarity.

How do I check if my layout follows proper visual hierarchy and spacing rules?▼

Checking visual hierarchy and spacing rules involves analyzing element prioritization and clean layouts. The review verifies consistent spacing, proper grouping, and uniformity across components to ensure effective visual structure.

Can I review empty, loading, and error states for usability issues?▼

Yes, you can review empty, loading, and error states for usability issues. The design critique process verifies state handling to ensure all user interface conditions provide clear feedback and maintain visual quality.

Does this UI critique process require specific CSS variables and theme tokens?▼

Yes, this UI critique process requires specific CSS variables, theme tokens, and UI primitive usage. Adherence to these defined design system variables is necessary to accurately verify theme compliance and dark mode standards.

What is the best way to assess interaction design and feedback mechanisms in a component?▼

The best way to assess interaction design is by evaluating the clarity of interactive elements and their feedback mechanisms. A UI critique analyzes how effectively components communicate user actions and system responses.

Related Skills

Explore More Design & Creative Skills→
TimeKastTimeKast

kb-design-tokens

Converts hardcoded UI styles to reusable tokens via Tailwind's @apply.

Official
Advanced
stoodderstoodder
1

curator

Check a running application against visual and UI component standards.

Community
Advanced
deomiarndeomiarn

design-system-creator

Generate design tokens, CSS variables, and Tailwind extensions for web design systems.

Community
Advanced
georgekhananaevgeorgekhananaev
27

uiux-toolkit

Evaluate UX quality across design systems with structured audit frameworks.

Community
Advanced