skills.rest
kamp-us
kamp-usOFFICIAL
Explore all skills by this author →
GitHub

review-design

Render PR previews with Playwright and check UI design against the four-pillars design law.

25|5|Updated May 9, 2026
Search Tags:#automation#code review#pull request#ui design#design verification
One-click install
npx skills add https://github.com/kamp-us/phoenix --skill review-design-kamp-us
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: review-design
Source: https://github.com/kamp-us/phoenix/tree/main/claude-plugins/kampus-pipeline/skills/review-design
Command: npx skills add https://github.com/kamp-us/phoenix --skill review-design-kamp-us

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill automates the verification of UI design quality for Pull Requests, ensuring that UI changes comply with the four-pillars design law and do not contain objective design violations.

Core Features & Use Cases

  • Automated UI Design Verification: Verifies UI changes against the four-pillars design law without manual review.
  • Objective Failures: Hard-Fails on six enumerable, objective design violations.
  • Advisory Notes: Provides advisory notes for holistic or taste-based issues.
  • Integration: Designed to be part of a larger pipeline, triggering on specific commands like "review the design of PR #N".

Quick Start

Use the review-design skill to verify the design of PR #123.

Frequently Asked Questions about review-design

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

FAQPage Schema
How do I automate UI design verification for pull requests?▼

Automate UI design verification for pull requests by driving Playwright to render the PR preview and comparing the rendered UI against the four-pillars design law to block merges on objective violations.

What is the four-pillars design law in code review pipelines?▼

The four-pillars design law is the standard used to verify UI changes in a code review pipeline, checking rendered Playwright output against six enumerable objective violations to produce merge-blocking hard-failures.

Does this automated design check block merges for subjective UI issues?▼

Automated design checks do not block merges for subjective issues. The pipeline issues hard-failures only for six objective design violations, while providing advisory notes for holistic or taste-based problems.

How do I trigger automated design verification within a pull request?▼

Trigger automated design verification within a pull request by using specific commands like "review the design of PR #N" to initiate the Playwright rendering and four-pillars design law comparison.

Can I use Playwright to render PR previews for code review automation?▼

You can use Playwright to render PR previews for code review automation by integrating it into a pipeline that captures the rendered UI and compares it against the four-pillars design law for objective design violations.

Related Skills

Explore More Software Engineering Skills→
usepowershellusepowershell
9

pr-screenshots

Capture Playwright screenshots and embed them into GitHub pull request descriptions.

Community
Intermediate
tsunami28tsunami28

create-run-gates

Runs local CI validation gates to detect code analysis and repository compliance failures before pull requests.

Community
Intermediate
jmmLjmmL

requesting-code-review

Review code changes against requirements, tests, and documentation before merging.

Community
Basic
511avolo-dot511avolo-dot

frontend-design-review

Evaluate frontend UI implementations for design system compliance and accessibility.

Community
Advanced