design-review-checklist

Automate UI design reviews with structured color, typography, motion, and accessibility checks.

Updated Mar 29, 2026
One-click install
npx skills add https://github.com/Burburton/amazing-specialist-face --skill design-review-checklist
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-review-checklist
Source: https://github.com/Burburton/amazing-specialist-face/tree/main/.opencode/plugins/frontend-design-system/skills/design-review-checklist
Command: npx skills add https://github.com/Burburton/amazing-specialist-face --skill design-review-checklist

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Helps reviewers enforce consistent design quality by providing a structured rubric and actionable checks for UI reviews across components, ensuring alignment with design system standards.

Core Features & Use Cases

  • Standardized color, typography, spacing, motion, and accessibility checks across components.
  • Guided evaluation during design audits, PR reviews, and design system updates.
  • Example: a developer submits a new Button component; use this checklist to verify contrast, typography scale, hover/focus states, and brand alignment.

Quick Start

Assess a new UI component by running this checklist to generate a design_review_report for reviewer feedback.

Frequently Asked Questions about design-review-checklist

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

FAQPage Schema
How do I standardize UI design reviews for consistency and accessibility?

Standardize UI design reviews by applying a structured checklist rubric that verifies color, typography, motion, state, and accessibility criteria. It generates a design_review_report to provide actionable feedback for component development and PR reviews.

What checks should a frontend design review include for new components?

A frontend design review should include checks for visual quality, contrast, typography scale, hover and focus states, and brand alignment. This checklist enforces specific criteria across these dimensions to ensure UI quality and design system compliance.

Can I use a design review checklist for design system updates and audits?

Yes, you can use this design review checklist for design system updates and audits. It provides guided evaluation criteria to verify component consistency and accessibility, outputting a scored report for reviewer feedback.

What is the best way to automate design audits for component development?

Automate design audits by running a structured evaluation rubric that scores UI components against color, typography, spacing, and motion criteria. This enforces design system standards and produces a clear reporting format for developers.

Does this UI review checklist cover accessibility and state checks?

Yes, this UI review checklist covers accessibility and state checks. It enforces specific criteria across color contrast, motion, state interactions, and accessibility to ensure comprehensive visual quality verification during PR reviews.

How do I verify brand alignment and visual quality during a PR review?

Verify brand alignment and visual quality during a PR review by running this structured checklist to evaluate component consistency. It checks typography, spacing, and color standards, generating a design_review_report for actionable reviewer feedback.