From 66b367dd70fa49611d1861c6d7c52833f2de1349 Mon Sep 17 00:00:00 2001 From: bdbch Date: Thu, 22 Oct 2026 22:00:10 +0200 Subject: [PATCH] Prefix chrome skills, add chrome-design-review --- README.md | 2 +- .../SKILL.md | 2 +- .../references/a11y-snippets.md | 0 .../SKILL.md | 2 +- .../SKILL.md | 2 +- .../references/elements-and-size.md | 0 .../references/lcp-breakdown.md | 0 .../references/lcp-snippets.md | 0 .../references/optimization-strategies.md | 0 skills/chrome-design-review/SKILL.md | 98 +++++++++++++++++++ .../SKILL.md | 2 +- .../references/common-leaks.md | 0 12 files changed, 103 insertions(+), 5 deletions(-) rename skills/{a11y-debugging => chrome-a11y-debugging}/SKILL.md (99%) rename skills/{a11y-debugging => chrome-a11y-debugging}/references/a11y-snippets.md (100%) rename skills/{cookie-debugging => chrome-cookie-debugging}/SKILL.md (99%) rename skills/{debug-optimize-lcp => chrome-debug-optimize-lcp}/SKILL.md (99%) rename skills/{debug-optimize-lcp => chrome-debug-optimize-lcp}/references/elements-and-size.md (100%) rename skills/{debug-optimize-lcp => chrome-debug-optimize-lcp}/references/lcp-breakdown.md (100%) rename skills/{debug-optimize-lcp => chrome-debug-optimize-lcp}/references/lcp-snippets.md (100%) rename skills/{debug-optimize-lcp => chrome-debug-optimize-lcp}/references/optimization-strategies.md (100%) create mode 100644 skills/chrome-design-review/SKILL.md rename skills/{memory-leak-debugging => chrome-memory-leak-debugging}/SKILL.md (99%) rename skills/{memory-leak-debugging => chrome-memory-leak-debugging}/references/common-leaks.md (100%) diff --git a/README.md b/README.md index 8224e6f..4fa5478 100644 --- a/README.md +++ b/README.md @@ -63,7 +63,7 @@ the upstream name is in parentheses. | [getsentry/skills](https://github.com/getsentry/skills) | Apache-2.0 | `blog-writing` (`blog-writing-guide`) | | [juliusbrussee/caveman](https://github.com/juliusbrussee/caveman) | Apache-2.0 | `caveman` | | [miqdadbadjuber/anti-slop](https://github.com/miqdadbadjuber/anti-slop) | MIT | `antislop`, `antislop-ui`, `antislop-copywriting`, `antislop-human`, `antislop-layoutmobile`, `antislop-code` | -| [ChromeDevTools/chrome-devtools-mcp](https://github.com/ChromeDevTools/chrome-devtools-mcp) | Apache-2.0 | `chrome-devtools`, `chrome-devtools-cli`, `a11y-debugging`, `cookie-debugging`, `debug-optimize-lcp`, `memory-leak-debugging` | +| [ChromeDevTools/chrome-devtools-mcp](https://github.com/ChromeDevTools/chrome-devtools-mcp) | Apache-2.0 | `chrome-devtools`, `chrome-devtools-cli`, `chrome-a11y-debugging`, `chrome-cookie-debugging`, `chrome-debug-optimize-lcp`, `chrome-memory-leak-debugging` | Each skill's text is upstream apart from local adaptation: renamed frontmatter, reference docs moved under `files/`, path fixes, and dropped tool-specific diff --git a/skills/a11y-debugging/SKILL.md b/skills/chrome-a11y-debugging/SKILL.md similarity index 99% rename from skills/a11y-debugging/SKILL.md rename to skills/chrome-a11y-debugging/SKILL.md index d6b2413..a3f56b1 100644 --- a/skills/a11y-debugging/SKILL.md +++ b/skills/chrome-a11y-debugging/SKILL.md @@ -1,5 +1,5 @@ --- -name: a11y-debugging +name: chrome-a11y-debugging description: Uses Chrome DevTools MCP for accessibility (a11y) debugging and auditing based on web.dev guidelines. Use when testing semantic HTML, ARIA labels, focus states, keyboard navigation, tap targets, and color contrast. --- diff --git a/skills/a11y-debugging/references/a11y-snippets.md b/skills/chrome-a11y-debugging/references/a11y-snippets.md similarity index 100% rename from skills/a11y-debugging/references/a11y-snippets.md rename to skills/chrome-a11y-debugging/references/a11y-snippets.md diff --git a/skills/cookie-debugging/SKILL.md b/skills/chrome-cookie-debugging/SKILL.md similarity index 99% rename from skills/cookie-debugging/SKILL.md rename to skills/chrome-cookie-debugging/SKILL.md index 2a0d566..3dcc837 100644 --- a/skills/cookie-debugging/SKILL.md +++ b/skills/chrome-cookie-debugging/SKILL.md @@ -1,5 +1,5 @@ --- -name: cookie-debugging +name: chrome-cookie-debugging description: Uses Chrome DevTools MCP for inspecting, debugging, and testing cookies, session state, authentication issues, and cookie consent compliance. Use when diagnosing 401/403 errors, authentication redirects, session expiration, Cookie/Set-Cookie header issues, cookie banner consent conformance, or third-party cookie/SameSite/Partitioned cookie warnings. --- diff --git a/skills/debug-optimize-lcp/SKILL.md b/skills/chrome-debug-optimize-lcp/SKILL.md similarity index 99% rename from skills/debug-optimize-lcp/SKILL.md rename to skills/chrome-debug-optimize-lcp/SKILL.md index 89b48b6..591ed89 100644 --- a/skills/debug-optimize-lcp/SKILL.md +++ b/skills/chrome-debug-optimize-lcp/SKILL.md @@ -1,5 +1,5 @@ --- -name: debug-optimize-lcp +name: chrome-debug-optimize-lcp description: Guides debugging and optimizing Largest Contentful Paint (LCP) using Chrome DevTools MCP tools. Use this skill whenever the user asks about LCP performance, slow page loads, Core Web Vitals optimization, or wants to understand why their page's main content takes too long to appear. Also use when the user mentions "largest contentful paint", "page load speed", "CWV", or wants to improve how fast their hero image or main content renders. --- diff --git a/skills/debug-optimize-lcp/references/elements-and-size.md b/skills/chrome-debug-optimize-lcp/references/elements-and-size.md similarity index 100% rename from skills/debug-optimize-lcp/references/elements-and-size.md rename to skills/chrome-debug-optimize-lcp/references/elements-and-size.md diff --git a/skills/debug-optimize-lcp/references/lcp-breakdown.md b/skills/chrome-debug-optimize-lcp/references/lcp-breakdown.md similarity index 100% rename from skills/debug-optimize-lcp/references/lcp-breakdown.md rename to skills/chrome-debug-optimize-lcp/references/lcp-breakdown.md diff --git a/skills/debug-optimize-lcp/references/lcp-snippets.md b/skills/chrome-debug-optimize-lcp/references/lcp-snippets.md similarity index 100% rename from skills/debug-optimize-lcp/references/lcp-snippets.md rename to skills/chrome-debug-optimize-lcp/references/lcp-snippets.md diff --git a/skills/debug-optimize-lcp/references/optimization-strategies.md b/skills/chrome-debug-optimize-lcp/references/optimization-strategies.md similarity index 100% rename from skills/debug-optimize-lcp/references/optimization-strategies.md rename to skills/chrome-debug-optimize-lcp/references/optimization-strategies.md diff --git a/skills/chrome-design-review/SKILL.md b/skills/chrome-design-review/SKILL.md new file mode 100644 index 0000000..1ab7ce2 --- /dev/null +++ b/skills/chrome-design-review/SKILL.md @@ -0,0 +1,98 @@ +--- +name: chrome-design-review +description: Reviews the visual design of a running web page in Chrome through the DevTools MCP. Use when someone asks for a design review, visual critique, UI polish pass, or "does this look right" check on a live page, staging site, or local dev server. Covers hierarchy, spacing, typography, color, responsive breakage, and component states, and reports findings with screenshots and computed values. +--- + +# Chrome Design Review + +Review what the browser actually renders, not what the source suggests. Screenshot first, then measure. + +## Setup + +Always start Chrome in headless mode unless the user explicitly asks for a visible browser. Configure the DevTools MCP server with `--headless` when launching it. + +1. `list_pages` to get page ids. Use `new_page` or `navigate_page` with `pageId` to load the target. +2. `wait_for` the main content, or `take_snapshot` once and check the page is not still loading. +3. Note the URL and viewport. A review without a viewport is meaningless. + +Keep one `pageId` for the whole session unless the task needs a second page. + +## Capture + +Take full page screenshots at three widths with `resize_page`, then `take_screenshot` with `fullPage: true`: + +| Name | Width | Height | +| --- | --- | --- | +| Mobile | 390 | 844 | +| Tablet | 768 | 1024 | +| Desktop | 1440 | 900 | + +Also capture one viewport-only screenshot at 390 wide, because tap targets and above-the-fold hierarchy vanish in a full page shot. + +Write large output to a file with `filePath` instead of dumping base64 into the context. + +## What to check + +Work top to bottom. Stop and name the problem before proposing a fix. + +**Hierarchy.** Can you tell what the page is about from two seconds of looking? One clear primary action per screen. Competing accents are a finding. + +**Spacing.** Look for a consistent rhythm. Measure gaps with `evaluate_script` when a gap looks off: + +```js +const el = document.querySelector('SELECTOR'); +const cs = getComputedStyle(el); +({pad: cs.padding, margin: cs.margin, gap: cs.gap, lineHeight: cs.lineHeight}); +``` + +Report odd values as numbers, for example "card padding is 14px while every other card uses 16px". + +**Typography.** Count distinct font sizes and weights on one screen. More than four sizes in a section is usually a finding. Check line length (45 to 75 characters) and line height (1.4 to 1.6 for body text). + +**Color and contrast.** Use `get_css_styles` to read resolved colors rather than guessing from CSS. Flag body text below 4.5:1 and large text below 3:1. Run `lighthouse_audit` with the accessibility category for a baseline, and use `chrome-a11y-debugging` for anything that needs a deeper pass. + +**Responsive breakage.** At each width, check for horizontal scroll, clipped text, overlapping elements, and images that break their container: + +```js +[...document.querySelectorAll('*')] + .filter(el => el.scrollWidth > el.clientWidth + 1) + .slice(0, 20) + .map(el => el.tagName + '.' + el.className); +``` + +Also confirm `document.documentElement.scrollWidth` matches the viewport width. + +**States.** This is where most reviews stop too early. Check: +- Hover on every interactive element (`hover` by uid from `take_snapshot`). +- Keyboard focus. Press `press_key` with `Tab` several times and screenshot. Focus must be visible. +- Disabled, loading, empty, and error states if they exist in the product. +- Dark mode via `emulate` with `colorScheme: "dark"`, unless the product has none. + +**Content and images.** Look for placeholder text, stretched images, wrong aspect ratios, and text that wraps to a single orphan word. Check `list_network_requests` for oversized images or fonts. + +**Motion.** Reduce motion via `emulate` and confirm nothing important disappears. Do not review animation from stills alone. Use `screencast_start` only when timing is the issue. + +## Findings format + +Report in this order, worst first. One line per finding, with evidence. + +``` +[Blocker] Mobile: hero CTA sits under the fold at 390x844 (screenshot 2). +[Major] Buttons: focus ring missing on .btn-secondary. Tab order skips it. +[Minor] Cards: 3 of 5 use 12px gap, 2 use 16px. +[Nit] Footer link color #8C8C8C on #FFF is 3.1:1. +``` + +Rules for the report: +- Cite selectors, pixel values, and contrast ratios. No vague "feels cramped". +- One finding per issue. Do not bundle a contrast problem with a spacing problem. +- Separate what the browser proves from taste. Say "measured" or "judgement call". +- Propose the smallest fix. A token change beats a redesign. +- If nothing is wrong at a width, say so. Empty sections are fine. + +## Boundaries + +- Do not edit code, unless the user asked for fixes. Review first, change second. +- Do not review a page you could not fully load. Report the loading failure instead. +- Do not judge brand direction. Judge execution within the stated intent. +- Screenshots are evidence. Quote the one that shows the problem. diff --git a/skills/memory-leak-debugging/SKILL.md b/skills/chrome-memory-leak-debugging/SKILL.md similarity index 99% rename from skills/memory-leak-debugging/SKILL.md rename to skills/chrome-memory-leak-debugging/SKILL.md index 5f2adc3..a70e4a1 100644 --- a/skills/memory-leak-debugging/SKILL.md +++ b/skills/chrome-memory-leak-debugging/SKILL.md @@ -1,5 +1,5 @@ --- -name: memory-leak-debugging +name: chrome-memory-leak-debugging description: Diagnoses and resolves memory leaks in JavaScript/Node.js applications. Use when a user reports high memory usage, OOM errors, or wants to capture, compare, or inspect heap snapshots with Chrome DevTools MCP memory tools. --- diff --git a/skills/memory-leak-debugging/references/common-leaks.md b/skills/chrome-memory-leak-debugging/references/common-leaks.md similarity index 100% rename from skills/memory-leak-debugging/references/common-leaks.md rename to skills/chrome-memory-leak-debugging/references/common-leaks.md -- knotmirror 0.0.1