skills.rest
yerzong
yerzongCOMMUNITY
Explore all skills by this author →
GitHub

design-review

Reviews UI/UX proposals against design tokens, product rules, and accessibility checklists.

Updated Aug 28, 2026
Search Tags:#checklist#accessibility#design system#figma#design tokens#design review#ui ux
One-click install
npx skills add https://github.com/yerzong/TEMP-LEAGUE --skill design-review-yerzong
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/yerzong/TEMP-LEAGUE/tree/main/.claude/skills/design-review
Command: npx skills add https://github.com/yerzong/TEMP-LEAGUE --skill design-review-yerzong

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Design proposals for Temp League can drift from the project's design system, product rules, and platform conventions. This Skill provides a structured review process that validates screens, components, and flows against the design brain, tokens, and product documentation before they are finalized. ## Core Features & Use Cases - Token Consistency Check: Verifies that proposals use defined color, typography, and spacing tokens instead of ad-hoc values. - Product Rule Validation: Confirms designs respect feature gating, roles, and business rules documented in /docs. - State & Accessibility Coverage: Ensures empty, loading, error, blocked, and success states are covered, with sufficient contrast and touch targets of at least 44px. - Use Case: Before shipping a new match-day screen for the mobile app, run a design review to get a prioritized list of blockers and fixes aligned with the Temp League esports identity. ## Quick Start Ask the assistant to review this screen design against the Temp League design system and product rules.

Frequently Asked Questions about design-review

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

FAQPage Schema
How do I review a UI design against a design system?▼

Read the design brain, tokens, and component documentation first, then evaluate the proposal against a checklist covering token consistency, states, hierarchy, and accessibility. Deliver findings prioritized from blockers to minor issues with concrete corrections.

What should a design review checklist include?▼

A design review checklist should cover token consistency, product scope and rules, state coverage (empty, loading, error, success), visual hierarchy, platform conventions, accessibility contrast, and brand identity. Each finding should include a specific actionable fix.

Does this design review work with Figma files?▼

Yes, if a Figma project exists in the design folder, it is treated as the visual source of truth and the proposal is contrasted against it. Without Figma, the review relies on the design brain and token documentation.

What accessibility standards does the review check?▼

The review checks contrast sufficiency in dark theme, text legibility, and minimum touch target sizes of 44px for mobile. It also verifies mobile-first layout for the app and data-dense layouts for the admin console.

When should I run a design review in the workflow?▼

Run it when someone asks to validate a screen or component, or before marking a visual proposal as finished. Early review catches token drift and missing states before implementation begins.

Related Skills

Explore More Design & Creative Skills→
dadafingerdadafinger

planning-figma

Creates new three-section Figma frames from product spec HTML or markdown documents.

Community
Advanced
aurorie-coaurorie-co
12

Code Review Skill (Frontend)

Analyze frontend pull requests for accessibility, correctness, and performance issues.

Official
Advanced
alirezarezvanialirezarezvani
25.3k

apple-hig-expert

Audits and designs Apple-platform interfaces against the Human Interface Guidelines with quantitative compliance checks.

Community
Intermediate
bovinphangbovinphang
21

fec-storybook-component-doc

Validate Storybook component documentation with MDX and frontmatter checks.

Community
Intermediate