approve-design

Write per-PR design approval markers with HEAD SHA after validating Rex review.

489|254|Updated Apr 5, 2026
One-click install
npx skills add https://github.com/me2resh/apexyard --skill approve-design
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: approve-design
Source: https://github.com/me2resh/apexyard/tree/main/.claude/skills/approve-design
Command: npx skills add https://github.com/me2resh/apexyard --skill approve-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It records an explicit per-PR UI design review approval so the UI merge gate can reliably allow the correct pull request through only after the designer has actually approved the implemented diff.

Core Features & Use Cases

  • Per-PR design approval marker: Writes a .claude/session/reviews/<pr>-design.approved file containing the current HEAD SHA for the specified PR.
  • Stale-approval protection: Refuses to write the marker unless the corresponding Rex code-review approval marker exists at the current HEAD, preventing approvals on an outdated base.
  • UI gate relevance check: Detects whether the PR touches UI-triggering files (TS/JS UI, stylesheets, and design tokens) and avoids unnecessary approvals when there are no UI changes.
  • Strict intent validation: Enforces that the skill is invoked only on explicit per-PR designer approval, rejecting mockup-only approvals or planning-context statements.

Quick Start

Invoke /approve-design with the PR number when the designer has reviewed the actual PR diff for UI files and explicitly approved it.

Frequently Asked Questions about approve-design

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

FAQPage Schema
How do I record a UI design approval on a GitHub pull request to unblock the merge gate?

To record a UI design approval, you invoke the skill with the PR number, which writes a design.approved marker containing the current HEAD SHA to unblock the UI merge gate for that pull request.

What is a design review merge gate guardrail for pull requests?

A design review merge gate guardrail is a merge protection mechanism that ensures a pull request can only merge after a designer explicitly approves the implemented UI diff at a specific commit state.

Does the design approval marker work with Vue, Svelte, and React UI files?

Yes, the design approval marker detects UI-triggering files including .tsx, .jsx, Vue, Svelte, stylesheets, and design-tokens files to determine if a PR requires a design review stamp before writing the approval marker.

Why does my UI design approval fail when there is no existing code review marker?

Your UI design approval fails because the stale-approval protection refuses to write the design marker unless an existing Rex code-review approval marker exists at the current HEAD, preventing approvals on an outdated base.

Can I approve UI design mockups during the planning phase before the PR diff is implemented?

No, you cannot approve mockups during planning because the skill enforces strict intent validation, rejecting mockup-only approvals and requiring explicit approval of the actual PR diff for UI files.

What's the best way to ensure design approvals don't apply to outdated pull request commits?

The best way to prevent outdated approvals is using SHA markers, which bind the design approval to the exact HEAD commit state and require a matching code review marker before the UI merge gate unblocks.