skills.rest
cleanunicorn
cleanunicornCOMMUNITY
Explore all skills by this author →
Website𝕏@CleanUnicornGitHub

review-design

Review UI components against UI/UX principles and project design systems.

2|Updated Jun 5, 2026
Search Tags:#design system#visual design#design analysis#UI/UX review#UI/UX principles
One-click install
npx skills add https://github.com/cleanunicorn/agents-library --skill review-design-cleanunicorn
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: review-design
Source: https://github.com/cleanunicorn/agents-library/tree/main/skills/review-design
Command: npx skills add https://github.com/cleanunicorn/agents-library --skill review-design-cleanunicorn

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides in-depth visual design reviews for UI components, ensuring adherence to UI/UX principles and project design systems.

Core Features & Use Cases

  • Targeted Reviews: Review specific UI components or diffs against UI/UX principles.
  • Multi-Lens Analysis: Analyze design elements through five lenses: hierarchy & spacing, typography, color & dark mode, depth/icons/buttons, and interaction/states/motion.
  • Autonomous Improvements: Apply fixes to UI components using project design tokens and gated on project lint and build.

Quick Start

Run the review-design skill on the 'dashboard-component.tsx' file to assess its design quality.

Frequently Asked Questions about review-design

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

FAQPage Schema
How do I review UI components against UI/UX principles and a project design system?▼

You can review UI components against UI/UX principles by running targeted design analysis on specific files or diffs, checking adherence to your project's design system through multi-lens visual inspection.

What does multi-lens design analysis cover when evaluating visual design?▼

Multi-lens design analysis evaluates visual design through five perspectives: hierarchy and spacing, typography, color and dark mode, depth and icons, and interaction and states motion.

Can I automatically apply fixes to UI components based on design tokens?▼

Yes, you can autonomously apply fixes to UI components using project design tokens, with improvements gated on your project's lint and build tools passing successfully.

Do I need a project design system and linting tools to perform a UI/UX review?▼

Yes, performing a targeted UI/UX review requires access to your project design system to evaluate adherence, and linting or building tools to gate autonomous improvements.

What is the best way to check if my UI component diff violates design system rules?▼

The best way to check UI component diffs for design system violations is to run a targeted visual design review that analyzes the changes against established UI/UX principles and design tokens.

When should I avoid using autonomous design improvements for UI/UX issues?▼

You should avoid autonomous design improvements when your project lacks established design tokens, or when lint and build tools are not configured to validate the applied UI/UX fixes.

Related Skills

Explore More Design & Creative Skills→
amit397amit397

tailwind-design-system

Build design systems with Tailwind CSS v4 using CSS-first configuration.

Community
Advanced
RaNDoM6913RaNDoM6913
1

visual-reviewer

Compare before/after screenshots against design tokens and output a 0-100 score.

Community
Advanced
iankikuiankiku
18

design

Review UI/UX designs against anti-slop standards for color, typography, layout, and components.

Community
Intermediate
venom9833venom9833

design-audit

Audit UI/UX design and generate phased implementation plans.

Community
Advanced