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

Fix PR Design Notes

by different-ai in different-ai/openwork

Reads the advisory design review attached to a pull request's screenshots, fixes the flagged UI problems in product code, and proves each note is gone.

Custom licenceAuto-check passedFrontend & Design

Install Fix PR Design Notes

skills CLI
$ npx skills add different-ai/openwork --skill fix-design-notes -a claude-code

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

GitHub CLI
$ gh skill install different-ai/openwork fix-design-notes --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/different-ai/openwork.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.opencode/skills/fix-design-notes .claude/skills/fix-design-notes && 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
fix-design-notes
GitHub stars
24k
Token cost
~824 tokens
SKILL.md length
433 words
Files
1
Skills in repo
33
Repo updated
First seen
Licence
Custom licence

At a glance

Reads the advisory design review attached to a pull request's screenshots, fixes the flagged UI problems in product code, and proves each note is gone.

  • Works in 5 steps: Run the note's reproduce command. Read… → Find the component from the hook or… → Fix it in the product code, never in the… → …
  • A PR check lists design notes marked worth fixing
  • SKILL.md covers Read the notes, Reproduce, fix, verify, When the screen is right and Rules
  • Calls pnpm and gh; needs OPENAI_API_KEY and ANTHROPIC_API_KEY

What it does

Each PR that records evidence screenshots gets an advisory design review, delivered inside the Evidence preview check. The notes never change the evidence verdict, but one marked worth fixing is treated as a defect to fix or to explain in the PR. The agent reads the check's summary and text with the gh CLI, and every note gives its rule, the screenshot and spec that produced it, a hook for finding the component and a reproduce command.

Rules starting with layout. are measured from the DOM and are exact, while others are judged from pixels and may vary between runs. The agent reruns the reproduce command (pnpm evals:e2e, then design:review with --json), reads DESIGN.md and the rubric first, fixes the product code rather than the spec or rubric, and reruns until the note is gone and no new worth-fixing note appears, looking at the screenshot itself. If a judged note is wrong, the code stays and one line goes in the PR body under Evidence.

When your agent uses it

  • A PR check lists design notes marked worth fixing
  • A reviewer says the UI looks off on a PR with screenshots
  • Reproducing a layout.split-row or OW-LIST note locally
  • Documenting why a flagged screen is correct as it is

Example prompts

  • “Read the design notes on this PR and fix the ones marked worth fixing.”
  • “Reproduce the layout.split-row note locally and show me the screenshot before and after.”
  • “The judged note about spacing is wrong for this screen, so write the line for the PR body.”

Requirements

  • GitHub CLI (gh) to read PR checks
  • pnpm for the evals commands
  • An OpenAI or Anthropic API key for judged notes

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

  1. Run the note's reproduce command. Read --json output, not prose
  2. Find the component from the hook or class list. Read DESIGN.md and the rule
  3. Fix it in the product code, never in the spec or the rubric.
  4. Re-run the same command. The note must be gone and no new Worth fixing
  5. Push. CI re-runs the review; the evidence check's summary says

What it can do on your machine

Read from SKILL.md and the folder at commit 9ce20f8. 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:

    • pnpm
    • gh

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

  • Network

    No URLs in SKILL.md. Its commands use pnpm and gh, 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 these keys or tokens, usually read from environment variables:

    • OPENAI_API_KEY
    • ANTHROPIC_API_KEY

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

Context cost

Fix PR Design Notes loads about 824 tokens when it runs. Until then it costs about 68 tokens; SKILL.md has 433 words of instructions outside code blocks.

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

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

Its licence (Custom licence) doesn't allow us to republish the file, so here is its outline and opening line. It has 433 words (~824 tokens).

“Every PR that records evidence screenshots gets an advisory design review. Its notes ride in the Evidence preview check, next to the evidence they are about: one summary line, and the notes as the check's text. They never change the…”

— opening of SKILL.md by different-ai, Custom licence
name
fix-design-notes

Read the full SKILL.md on GitHub

Files

Just SKILL.md in .opencode/skills/fix-design-notes of different-ai/openwork.

Open the folder on GitHubat commit 9ce20f8

Compare with similar skills

Fix PR Design Notes 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.

Fix PR Design Notes compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Fix PR Design Notes this skilldifferent-ai/openwork24k—~824Automated safety check: PassCustom licence
Liteyuki Webui FrontendLiteyukiStudio/LiteyukiBot157—~2.5kAutomated safety check: PassCustom licence
Live UX PolishEveryInc/compound-engineering-plugin25k—~777Automated safety check: PassMIT
CLI Hub Matrix Image DesignHKUDS/CLI-Anything52k—~2.4kAutomated safety check: PassApache-2.0
Interface Design for Dashboards and Appsholaboss-ai/holaOS11k3 repos~6kAutomated safety check: PassMIT
Tastemaker UI Designcodeswithroh/tastemaker439—~16kAutomated safety check: PassMIT

Similar skills

  • Liteyuki Webui Frontend

    LiteyukiStudio/LiteyukiBot

    Build, review, or test LiteyukiBot v7's React/Vite WebUI under webui/ and its packaged static delivery in packages/webui/.

    157 GitHub stars~2.5k tokensUpdated 1 mo ago
    Frontend & DesignAuto-check passed

  • Live UX Polish

    EveryInc/compound-engineering-plugin

    Collects your feedback on a running feature, typed or spoken and drawn in the browser, and turns it into focused UX fixes saved as local commits.

    25k GitHub stars~777 tokensUpdated today
    Frontend & DesignAuto-check passed

  • CLI Hub Matrix Image Design

    HKUDS/CLI-Anything

    Capability-based multi-tool matrix for image and graphic design: AI generation, raster/vector editing, UI mockups, diagrams, upscaling, photo library, and publishing.

    52k GitHub stars~2.4k tokensUpdated 16 days ago
    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

  • Tastemaker UI Design

    codeswithroh/tastemaker

    Grounds AI-built interfaces in real reference images and a saved personal taste profile, so UI work avoids the generic defaults of typical generated apps.

    439 GitHub stars~16k tokensUpdated 9 days ago
    Frontend & DesignAuto-check passed

  • 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.

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

More from different-ai/openwork

All 33 skills in this repo

  • OpenWork Desktop CDP Driver

    different-ai/openwork

    Drives a running OpenWork desktop window over CDP from the shell to evaluate JS, take screenshots, start sessions and send prompts for hand checks.

    24k GitHub stars~465 tokensUpdated today
    Auto-check passed

  • Fake Model Provider Faults

    different-ai/openwork

    Makes the desktop app's model provider fail on demand, with refused connections, resets, stalls and HTTP 4xx and 5xx errors, so error and retry states can be reproduced.

    24k GitHub stars~642 tokensUpdated today
    Auto-check passed

  • OpenWork Model Alias Manager

    different-ai/openwork

    Manages OpenWork's inference model aliases, discounts and overlays over the upstream OpenRouter catalog, and triggers the GitHub workflow that refreshes base models.

    24k GitHub stars~1.1k tokensUpdated today
    Auto-check passed

  • Reproduce Chat States

    different-ai/openwork

    Fires known chat states in the running OpenWork desktop app, such as provider errors, retries and tool steps, so you can check how each renders.

    24k GitHub stars~673 tokensUpdated today
    Auto-check passed

  • OpenWork Electron Browser Automation

    different-ai/openwork

    Attaches OpenCode browser tools to the OpenWork Electron dev app through CDP to explore its UI, send a composer task and debug, not to give test verdicts.

    24k GitHub stars~780 tokensUpdated today
    Auto-check passed

  • Daytona Sandbox Operations

    different-ai/openwork

    Covers Daytona CLI setup, sandbox debugging, keeping a sandbox alive and which credentials the CLI uses, for when Daytona itself is the problem rather than the tests.

    24k GitHub stars~917 tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about Fix PR Design Notes

What does Fix PR Design Notes do?

Reads the advisory design review attached to a pull request's screenshots, fixes the flagged UI problems in product code, and proves each note is gone. Each PR that records evidence screenshots gets an advisory design review, delivered inside the Evidence preview check. The notes never change the evidence verdict, but one marked worth fixing is treated as a defect to fix or to explain in the PR.

When should I use Fix PR Design Notes?

Fix PR Design Notes fits situations like: A PR check lists design notes marked worth fixing; A reviewer says the UI looks off on a PR with screenshots; reproducing a layout.split-row or OW-LIST note locally; documenting why a flagged screen is correct as it is.

How do I install Fix PR Design Notes in Claude Code?

Run `npx skills add different-ai/openwork --skill fix-design-notes -a claude-code`. Or copy the skill folder (.opencode/skills/fix-design-notes in different-ai/openwork) into .claude/skills/fix-design-notes in your project. Claude Code loads it when a task matches its description.

How do I install Fix PR Design Notes in Codex?

Run `npx skills add different-ai/openwork --skill fix-design-notes -a codex`. Or copy the skill folder (.opencode/skills/fix-design-notes in different-ai/openwork) into .agents/skills/fix-design-notes in your project. Codex loads it when a task matches its description.

Can I use Fix PR Design Notes 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 different-ai/openwork --skill fix-design-notes -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/fix-design-notes, .gemini/skills/fix-design-notes, .github/skills/fix-design-notes and .opencode/skills/fix-design-notes in your project.

What does Fix PR Design Notes need to run?

Going by SKILL.md and its folder, Fix PR Design Notes needs the command-line tools its instructions call (pnpm and gh) and credentials named OPENAI_API_KEY and ANTHROPIC_API_KEY. Our summary lists: GitHub CLI (gh) to read PR checks; pnpm for the evals commands; An OpenAI or Anthropic API key for judged notes.

Does Fix PR Design Notes access the network?

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

Is Fix PR Design Notes 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 Fix PR Design Notes use?

Fix PR Design Notes has a licence file (the repository's licence) that doesn't match a standard licence. Read it on GitHub before reusing the skill.

How many tokens does Fix PR Design Notes use?

About 824 tokens (SKILL.md is roughly 3.3k 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 Fix PR Design Notes?

Skills that share tags, products or a category with Fix PR Design Notes: Liteyuki Webui Frontend (LiteyukiStudio/LiteyukiBot, 157 stars), Live UX Polish (EveryInc/compound-engineering-plugin, 25k stars), CLI Hub Matrix Image Design (HKUDS/CLI-Anything, 52k stars) and Interface Design for Dashboards and Apps (holaboss-ai/holaOS, 11k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Fix PR Design Notes?

different-ai (a GitHub organization) maintains it in different-ai/openwork, which has 23,943 GitHub stars. The repository holds 33 skills in this directory. The repository was last updated on October 8, 2026.

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