skills.rest
prapanch
prapanchCOMMUNITY
Explore all skills by this author →
GitHub

design-review

Identify UI visual bugs and design-system drift during frontend PR reviews.

Updated Aug 23, 2026
Search Tags:#accessibility#frontend#design-review#design-systems#ui-review#visual-quality
One-click install
npx skills add https://github.com/prapanch/agent-forma --skill design-review-prapanch
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/prapanch/agent-forma/tree/main/design-review
Command: npx skills add https://github.com/prapanch/agent-forma --skill design-review-prapanch

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

UI review often focuses on logic; this skill provides a structured lens to catch visual bugs, design-system drift, and quality gaps during frontend PR reviews.

Core Features & Use Cases

  • Visual quality checklist aligned to design contracts and tokens
  • Design-system drift detection and suggested fixes
  • Templates for PR review comments and accessibility checks

Quick Start

Review a PR by applying the UI design-review checklist and templates to identify visual gaps.

Frequently Asked Questions about design-review

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

FAQPage Schema
How do I catch UI visual bugs during frontend PR reviews?▼

You can catch UI visual bugs during frontend PR reviews by applying a structured visual quality checklist aligned to design contracts. This process validates design tokens, checks accessibility, and mitigates design-system drift before merging code.

What is design-system drift detection and how does it work?▼

Design-system drift detection identifies unauthorized deviations from established UI tokens and visual specs. It works by applying a checklist to frontend code to validate component consistency and suggest fixes for non-compliant visuals.

How do I check accessibility and visual quality in a UI review?▼

To check accessibility and visual quality in a UI review, apply structured templates and guardrails to your frontend PR workflow. This validates visual specs against design tokens to ensure compliance and consistency across components.

Can I use a checklist to validate design tokens across frontend components?▼

Yes, you can validate design tokens across frontend components by applying a visual quality checklist during PR reviews. This enforces consistency validation and detects design-system drift to ensure visual quality before merging.

Does this UI review approach work without external dependencies?▼

Yes, this UI review approach works without external dependencies because it operates using checklist-driven templates and guardrails. It applies a structured lens to frontend PR reviews to catch visual bugs and design-system drift independently.

Related Skills

Explore More Design & Creative Skills→
LowyShinLowyShin
33

phase-5-design-system

Automate creation and orchestration of platform-independent design systems with reusable tokens.

Community
Advanced
luyangliuableluyangliuable

fetch-unresolved-comments

Fetch unresolved pull request review comments from GitHub via GraphQL.

Community
Intermediate
TarasTsavolykTarasTsavolyk
1

install

Installs Claude Code frontend kit with automatic framework detection and adaptation into a repository.

Community
Basic
shin0720shin0720

auto-verify

Automate visual regression testing by capturing and comparing UI screenshots with Playwright.

Community
Basic