skills.rest
mojwang
mojwangCOMMUNITY
Explore all skills by this author →
𝕏@MarvinIsHimGitHub

design-review

Audit UI code changes for design-system token and layout compliance.

Updated Aug 23, 2026
Search Tags:#responsive-design#design-review#visual-hierarchy#ui-audit#token-compliance#aesthetic-detection
One-click install
npx skills add https://github.com/mojwang/macbook-dev-setup --skill design-review-mojwang
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/mojwang/macbook-dev-setup/tree/main/config/skills/design-review
Command: npx skills add https://github.com/mojwang/macbook-dev-setup --skill design-review-mojwang

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps developers and designers ensure design-system compliance across UI changes by detecting token misuse, poor visual hierarchy, and inconsistent responsive behavior.

Core Features & Use Cases

  • Token compliance checks enforce the use of design tokens for colors, typography, spacing, and elevation instead of hardcoded values.
  • Hierarchy & responsive validation verify correct heading structure, contrast, and layout behavior across breakpoints.
  • Anti-pattern detection reference AI-ANTIPATTERNS.md to surface patterns that degrade trust or usability, with actionable remediation guidance.

Quick Start

Run a design-review pass on the latest changes to surface token and layout issues.

Frequently Asked Questions about design-review

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

FAQPage Schema
How do I check for hardcoded design tokens in my Tailwind config and UI components?▼

A UI audit identifies hardcoded design tokens by scanning src/components/, globals.css, and Tailwind config files during code reviews. It flags non-token values for colors, spacing, and typography, providing remediation guidance to enforce design-system adherence.

How does visual hierarchy validation work for responsive layouts?▼

Visual hierarchy validation verifies correct heading structure, contrast, and layout behavior across breakpoints. It flags insufficient contrast and layout misalignment, ensuring responsive UI changes maintain proper visual hierarchy and usability standards.

What are common UI anti-patterns detected during a design-system review?▼

A design-system review detects anti-patterns such as hardcoded tokens, inconsistent hierarchy, insufficient contrast, and layout misalignment by referencing AI-ANTIPATTERNS.md. It surfaces usability-degrading patterns and provides actionable remediation guidance.

Can I run design-system compliance checks in CI for UI codebases?▼

Yes, you can run design-system compliance checks in CI. The audit evaluates token usage, typography, spacing, and color across src/components/ and layout structures, flagging hardcoded tokens and anti-patterns during continuous integration.

Does design review work without external dependencies or component libraries?▼

Yes, design review works without external dependencies or component libraries. It operates as a standalone advanced skill, auditing token compliance and visual hierarchy directly against your codebase files and Tailwind configuration.

Related Skills

Explore More Design & Creative Skills→
somachaksomachak

modern-css-architecture

Standardize design tokens and component styling patterns for Tailwind-based React projects.

Community
Intermediate
ToXMonToXMon

uiux-layout-advisor

Provide layout, spacing, hierarchy, and WCAG 2.1 AA accessibility recommendations for UI/UX designs.

Community
Intermediate
srivtxsrivtx

code-review

Automate code review for local changes and GitHub pull requests.

Community
Advanced
robit-manrobit-man

regression-visual

Compare screenshots and analyze pixel differences across browsers and viewports.

Community
Advanced