New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

UI Design Review

by jayminwest in jayminwest/warren

Independent design review of a warren web-UI change. An agent skill from jayminwest/warren.

MITAuto-check passedFrontend & Design

Install UI Design Review

skills CLI
$ npx skills add jayminwest/warren --skill ui-design-review -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install jayminwest/warren ui-design-review --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/jayminwest/warren.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/ui-design-review .claude/skills/ui-design-review && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
ui-design-review
GitHub stars
481
Token cost
~1.9k tokens
SKILL.md length
923 words
Files
1
Skills in repo
6
Repo updated
First seen
Licence
MIT

At a glance

Independent design review of a warren web-UI change. An agent skill from jayminwest/warren.

  • Works in 6 steps: Hard rules → Inputs → Procedure → …
  • Tasks that involve UI design
  • SKILL.md covers 1. Hard rules, 2. Inputs, 3. Procedure and 4. Verdict JSON, plus 2 more sections
  • Calls git and bun

What it does

UI Design Review is an agent skill from jayminwest/warren. Independent design review of a warren web-UI change. Reads the ui-visual screenshot artifact and the PR diff, grades them against the fixed rubric in docs/design/ui-design-review.md, and writes a machine-readable verdict JSON (severity-ranked findings plus PASS/FAIL). Read-only - never edits code. Activate for prompts like "design-review this UI PR", "run the ui-design-review rubric", "grade these screenshots", or when the design-review workflow invokes it.

Its SKILL.md is about 1.9k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering UI design, Quizzes and assessments and Design review and critique. It works with Git. The repository describes itself as: Run coding agents like infrastructure, not terminal sessions. Warren manages isolation, lifecycle, spend, recovery, and Git delivery on compute you control. The licence is MIT.

When your agent uses it

  • Tasks that involve UI design
  • Tasks that involve Quizzes and assessments
  • Tasks that involve Design review and critique

Example prompts

  • “design-review this UI PR”
  • “run the ui-design-review rubric”
  • “grade these screenshots”
  • “/ui-design-review”

Workflow steps

6 steps, taken from the step headings in SKILL.md.

  1. Hard rules
  2. Inputs
  3. Procedure
  4. Verdict JSON
  5. Calibration
  6. Tools

What it can do on your machine

Read from SKILL.md and the folder at commit 9595340. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • git
    • bun

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use git, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

UI Design Review loads about 1.9k tokens when it runs. Until then it costs about 120 tokens; SKILL.md has 923 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~120
When it runs · the whole SKILL.md, loaded when a task matches
~1.9k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from jayminwest/warren at commit 9595340, republished under its MIT licence (© jayminwest). 923 words, ~1,903 tokens.

Download SKILL.mdSave it as .claude/skills/ui-design-review/SKILL.md (or your agent's skills folder).
name
ui-design-review
description
Independent design review of a warren web-UI change. Reads the ui-visual screenshot artifact and the PR diff, grades them against the fixed rubric in docs/design/ui-design-review.md, and writes a machine-readable verdict JSON (severity-ranked findings plus PASS/FAIL). Read-only - never edits code. Activate for prompts like "design-review this UI PR", "run the ui-design-review rubric", "grade these screenshots", or when the design-review workflow invokes it.

Protocol: UI design review

You are the independent evaluator for warren's web UI (plan pl-10db). You did not write the change, and you do not defend it. Grade what rendered against the rubric, write the verdict, and stop.

The rubric is docs/design/ui-design-review.md. Read sections 3 to 6 before you look at any screenshot. This skill tells you how to run a review. The rubric tells you what to judge. If they disagree, the rubric wins.

1. Hard rules

  • Read-only. Never edit, create, or delete a file in the repo. Never commit, push, comment on the PR, or call a write API. The only file you write is the verdict JSON at VERDICT_PATH.
  • Rubric ids only. Every finding names one criterion id from rubric section 5. Do not invent criteria. Taste that no criterion covers is not a finding.
  • Evidence or nothing. Every finding cites a screenshot file or a path:line in the diff. If you cannot point at it, drop it.
  • No credit for intent. The PR description, commit messages, and code comments are not evidence that something renders well. Only the screenshots and the code that produces them count.
  • Do not grade the mechanical gates again. The smoke checks, the Tailwind ratchet, and the GritQL bans already ran. Rubric section 2 lists what each one leaves to you.

2. Inputs

The caller supplies these values in the prompt. Defaults are in brackets.

InputMeaning
ARTIFACT_DIRThe extracted ui-screenshots-<head sha> artifact. It holds screenshots/<page>.<viewport>.<theme>.png and ci-meta.json.
DIFFThe PR diff, as a file path or a git range. [git diff origin/main...HEAD]
PAGES_IN_SCOPEComma list of page ids from scripts/ui-visual/pages.ts. [every page in PAGES]
VERDICT_PATHWhere to write the verdict JSON. [design-review.json]

If ARTIFACT_DIR or ci-meta.json is missing, do not stop. Write a FAIL verdict with one evidence-complete blocker that says what is missing. Take headSha from git rev-parse HEAD and drop --ci-meta from the validator command in step 8.

3. Procedure

  1. Load the contract. Read docs/design/ui-design-review.md sections 3 to 6. Read the Typography section of docs/ui-revamp/README.md and the "Responsive contract" section of src/ui/README.md.

  2. Check the evidence. Read ARTIFACT_DIR/ci-meta.json. Note headSha and outcome. List ARTIFACT_DIR/screenshots/. For each page in scope, confirm all four cases exist: desktop and phone, in light and dark. Record each case you open in casesReviewed. A missing case is an evidence-complete blocker for that page. An outcome other than success is a smoke-clean blocker.

  3. Read the diff. List the changed files under src/ui/. If the diff touches src/ui/src/components/ or the console shell, widen the scope to every page. For each changed page or component, note the data surfaces it adds or changes, and their empty, loading, and error branches.

  4. Review each page in scope. Open the four screenshots. Compare with one unchanged sibling page at the same viewport, for example runs against plan-runs. Walk the criteria in rubric order: hierarchy, type-scale, spacing-rhythm, primitive-consistency, operator-copy, orphaned-controls, phone-layout, and theme-parity. Judge state-coverage from the diff, because the fixture renders only populated data.

  5. Classify each finding. Choose the severity from the rubric text for that criterion. Set origin to diff when this PR introduced or changed the defect. Set it to pre-existing when the same defect shows on a page or in code that the diff does not touch. When in doubt, check the base version of the file with git show origin/main:<path>.

  6. Write one line per field. issue says what is wrong, as the operator sees it. fix names the smallest change that resolves it, with a primitive or token name where one exists. Merge duplicates: a defect that repeats in all four cases is one finding with viewport and theme set to both.

  7. Decide. Count only diff findings. PASS needs zero blockers and at most two majors. Set verdict to match.

  8. Write and validate. Write the JSON to VERDICT_PATH, then run:

    bash
    bun run scripts/design-review/verdict.ts "$VERDICT_PATH" --ci-meta "$ARTIFACT_DIR/ci-meta.json"

    Exit 0 means a valid PASS and exit 1 means a valid FAIL. Both are done. Exit 2 means the document is invalid: read errors, fix the JSON, and run it again. Do not change a finding's severity to reach a verdict.

  9. Report. Reply with the validator's JSON line and the summary string. Nothing else.

Show full SKILL.md (226 more words)Show less

4. Verdict JSON

Schema warren-ui-design-review/v1, rubric version 1. Rubric section 6 is the full contract. The validator rejects unknown fields.

json
{
  "schema": "warren-ui-design-review/v1",
  "rubric": 1,
  "headSha": "<ci-meta.json headSha>",
  "verdict": "pass",
  "pagesInScope": ["plan-run-detail"],
  "casesReviewed": [
    "plan-run-detail.desktop.light", "plan-run-detail.desktop.dark",
    "plan-run-detail.phone.light", "plan-run-detail.phone.dark"
  ],
  "findings": [
    {
      "criterion": "spacing-rhythm",
      "severity": "minor",
      "origin": "diff",
      "page": "plan-run-detail",
      "viewport": "desktop",
      "theme": "both",
      "evidence": "plan-run-detail.desktop.dark.png",
      "issue": "The Child walk card sits 20px below Source plan; other sections use 16px.",
      "fix": "Use the page's shared gap-4 stack instead of mt-5 on the card."
    }
  ],
  "summary": "Plan-run detail reads as designed in both themes; one minor gap mismatch."
}
  • page: a page id, or shell for the sidebar, topbar, and bottom nav.
  • viewport: desktop, phone, or both. theme: light, dark, or both.
  • evidence: a screenshot file name or path:line.
  • issue, fix, evidence: one line, at most 200 characters.
  • summary: one line, at most 600 characters. Lead with the verdict driver.
  • Order does not matter. The validator ranks findings: blockers, then majors, then minors.

5. Calibration

  • Most UI PRs should pass. A blocker means an operator loses information or an action in at least one case. Do not use it for "looks off".
  • Compare with siblings, not with an ideal. A page that matches the established pattern of its siblings is not a finding, even if you would design it differently.
  • One defect is one finding. Do not file the same root cause under two criteria to raise the count.
  • A screenshot that looks wrong because of fixture data, such as long seeded names, is still a finding if real data can produce the same shape.
  • Mask regions (data-visual-mask) are blank on purpose. They are not empty states.

6. Tools

You need file reads, image reads, git diff, git show, ls, and bun run scripts/design-review/verdict.ts. You need no other command. Callers should grant only these tools.

© jayminwest, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .claude/skills/ui-design-review of jayminwest/warren.

Open the folder on GitHubat commit 9595340

Compare with similar skills

UI Design Review next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

UI Design Review compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
UI Design Review this skilljayminwest/warren481—~1.9kAutomated safety check: PassMIT
UI Aesthetics Judgmentkasonye/ui-aesthetics-skill383—~3.2kAutomated safety check: PassNone
Frontend DesignYYH211/Claude-meta-skill2821 repos~2.2kAutomated safety check: PassMIT
Frontend DesignJetBrains/skills366129 repos~1.2kAutomated safety check: PassApache-2.0
Design Inventoryclosedloop-ai/claude-plugins122—~7.4kAutomated safety check: PassApache-2.0
Interface Design for Dashboards and Appsholaboss-ai/holaOS11k3 repos~6kAutomated safety check: PassMIT

Similar skills

  • UI Aesthetics Judgment

    kasonye/ui-aesthetics-skill

    Sets rules for web UI work that favor hierarchy, spacing and restrained styling, with routes for generating, reviewing and polishing interfaces.

    383 GitHub stars~3.2k tokensUpdated 5 mo ago
    Frontend & DesignAuto-check passed

  • Frontend Design

    YYH211/Claude-meta-skill

    Creates unique, production-grade frontend interfaces with exceptional design quality.

    282 GitHub starsUsed in 1 repo~2.2k tokens
    Frontend & DesignAuto-check passed

  • Frontend Design

    JetBrains/skills

    Official

    Create distinctive, production-grade frontend interfaces with high design quality.

    366 GitHub starsUsed in 129 repos~1.2k tokens
    Frontend & DesignAuto-check passed

  • Design Inventory

    closedloop-ai/claude-plugins

    A skill your agent uses to run the Claude Design to ClosedLoop pipeline against the current web-ui.

    122 GitHub stars~7.4k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Interface Design for Dashboards and Apps

    holaboss-ai/holaOS

    Pushes an agent past generic defaults when designing dashboards, admin panels, SaaS apps and tools, with attention to structure, type, navigation and how data is shown.

    11k GitHub starsUsed in 3 repos~6k tokens
    Frontend & DesignAuto-check passed

  • Senior Frontend

    Ohh-889/skyroc

    Comprehensive frontend development skill for building modern, performant web applications using ReactJS, NextJS, TypeScript, Tailwind CSS.

    795 GitHub starsUsed in 2 repos~1.1k tokens
    Frontend & DesignAuto-check: notes

More from jayminwest/warren

  • Os Eco Dep Sync

    jayminwest/warren

    Bump warren onto the latest published @os-eco/ versions across package.json + bun.lock and the Dockerfile CLI pins, then run the gates and open a PR.

    481 GitHub stars~1.9k tokensUpdated yesterday
    Auto-check passed

  • Good First Issue Batch

    jayminwest/warren

    File a batch of contributor-ready GitHub issues from the seeds backlog, re-verifying every candidate against HEAD first so no dead issue reaches a contributor.

    481 GitHub stars~2.2k tokensUpdated yesterday
    Auto-check passed

  • Release

    jayminwest/warren

    Prepare, cut, and verify a warren release — tracker audits, version bump, CHANGELOG curation, ROADMAP update, push, then watch the pipeline through to published artifacts.

    481 GitHub stars~1.3k tokensUpdated yesterday
    Auto-check passed

  • Seeds Issue Audit

    jayminwest/warren

    Audit and triage open Seeds (sd) issues — find which can be closed, auto-close high-confidence completed ones, and report borderline cases.

    481 GitHub stars~2.7k tokensUpdated yesterday
    Auto-check passed

  • Warren Dogfood Pipeline

    jayminwest/warren

    Full prioritize → dispatch → shepherd → track pipeline against the live warren instance.

    481 GitHub stars~2.9k tokensUpdated yesterday
    Auto-check passed

Works with

Categories

Questions about UI Design Review

What does UI Design Review do?

Independent design review of a warren web-UI change. An agent skill from jayminwest/warren. UI Design Review is an agent skill from jayminwest/warren. Independent design review of a warren web-UI change.

When should I use UI Design Review?

UI Design Review fits situations like: tasks that involve UI design; tasks that involve Quizzes and assessments; tasks that involve Design review and critique.

How do I install UI Design Review in Claude Code?

Run `npx skills add jayminwest/warren --skill ui-design-review -a claude-code`. Or copy the skill folder (.claude/skills/ui-design-review in jayminwest/warren) into .claude/skills/ui-design-review in your project. Claude Code loads it when a task matches its description.

How do I install UI Design Review in Codex?

Run `npx skills add jayminwest/warren --skill ui-design-review -a codex`. Or copy the skill folder (.claude/skills/ui-design-review in jayminwest/warren) into .agents/skills/ui-design-review in your project. Codex loads it when a task matches its description.

Can I use UI Design Review in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add jayminwest/warren --skill ui-design-review -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/ui-design-review, .gemini/skills/ui-design-review, .github/skills/ui-design-review and .opencode/skills/ui-design-review in your project.

What does UI Design Review need to run?

Going by SKILL.md and its folder, UI Design Review needs the command-line tools its instructions call (git and bun).

Does UI Design Review access the network?

SKILL.md contains no URLs. Its commands use git, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is UI Design Review safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does UI Design Review use?

UI Design Review is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does UI Design Review use?

About 1.9k tokens (SKILL.md is roughly 7.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to UI Design Review?

Skills that share tags, products or a category with UI Design Review: UI Aesthetics Judgment (kasonye/ui-aesthetics-skill, 383 stars), Frontend Design (YYH211/Claude-meta-skill, 282 stars), Frontend Design (JetBrains/skills, 366 stars) and Design Inventory (closedloop-ai/claude-plugins, 122 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains UI Design Review?

jayminwest (a GitHub user) maintains it in jayminwest/warren, which has 481 GitHub stars. The repository holds 6 skills in this directory. The repository was last updated on October 9, 2026.

Source: jayminwest/warren on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.