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

Responsiveness Check

by jezweb in jezweb/claude-skills

Test website responsiveness across viewport widths using browser automation.

MITAuto-check passedFrontend & Design

Install Responsiveness Check

skills CLI
$ npx skills add jezweb/claude-skills --skill responsiveness-check -a claude-code

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

GitHub CLI
$ gh skill install jezweb/claude-skills responsiveness-check --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/jezweb/claude-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/dev-tools/skills/responsiveness-check .claude/skills/responsiveness-check && 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
responsiveness-check
GitHub stars
1.1k
Used in
1 other repo
Token cost
~1.7k tokens
SKILL.md length
789 words
Files
3 (incl. references)
Skills in repo
52
Repo updated
First seen
Licence
MIT

At a glance

Test website responsiveness across viewport widths using browser automation.

  • Works in 3 steps: playwright-cli (preferred) — supports… → Playwright MCP… → Chrome MCP (mcpclaude-in-chrome*) —…
  • With responsiveness check
  • SKILL.md covers Browser Tool Priority, Operating Modes, Layout Check Matrix and Transition Detection, plus 4 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Responsiveness Check is an agent skill from jezweb/claude-skills. Test website responsiveness across viewport widths using browser automation. Resizes a single session through breakpoints, screenshots each width, and detects layout transitions (column changes, nav switches, overflow). Produces comparison reports showing exactly where layouts break. Trigger with 'responsiveness check', 'check responsive', 'breakpoint test', 'viewport test', 'responsive sweep', 'check breakpoints', or 'test at mobile'.

Its SKILL.md is about 1.7k tokens, which your agent loads only when the skill is triggered. The skill folder holds 3 other files, including reference files (for example `references/breakpoints.md` and `references/report-template.md`). Compatibility notes: claude-code-only

It sits in Frontend & Design, covering Responsive design and Browser automation. It works with Playwright and Model Context Protocol. The repository describes itself as: Skills for Claude Code CLI such as full stack dev Cloudflare, React, Tailwind v4, and AI integrations. The licence is MIT.

When your agent uses it

  • With responsiveness check
  • Check responsive
  • Breakpoint test
  • Responsive sweep

Example prompts

  • “responsiveness check”
  • “check responsive”
  • “breakpoint test”
  • “/responsiveness-check”

Requirements

  • Compatibility (from SKILL.md): claude-code-only

Workflow steps

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

  1. playwright-cli (preferred) — supports resize, named sessions, and sub-agent parallelism. If installed, run /playwright-cli first to load…
  2. Playwright MCP (mcpplugin_playwright_playwright*) — browser_resize for viewport changes.
  3. Chrome MCP (mcpclaude-in-chrome*) — resize_window for viewport changes. Uses the user's logged-in Chrome session.

What it can do on your machine

Read from SKILL.md and the folder at commit 64965d9. 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

    No scripts in the folder and no shell commands in SKILL.md.

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

  • Network

    No URLs in SKILL.md.

    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.

  • Compatibility

    claude-code-only

    From compatibility in the SKILL.md frontmatter.

Context cost

Responsiveness Check loads about 1.7k tokens when it runs, and up to ~3.2k if it reads all its reference files. Until then it costs about 115 tokens; SKILL.md has 789 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~115
When it runs · the whole SKILL.md, loaded when a task matches
~1.7k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~3.2k

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 jezweb/claude-skills at commit 64965d9, republished under its MIT licence (© jezweb). 789 words, ~1,746 tokens.

Download SKILL.mdSave it as .claude/skills/responsiveness-check/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.
name
responsiveness-check
description
Test website responsiveness across viewport widths using browser automation. Resizes a single session through breakpoints, screenshots each width, and detects layout transitions (column changes, nav switches, overflow). Produces comparison reports showing exactly where layouts break. Trigger with 'responsiveness check', 'check responsive', 'breakpoint test', 'viewport test', 'responsive sweep', 'check breakpoints', or 'test at mobile'.
compatibility
claude-code-only

Responsiveness Check

Test how a website's layout responds to viewport width changes. Resizes through breakpoints in a single browser session, screenshots each width, compares adjacent sizes, and reports where layouts break.

What this tests: Layout responsiveness — overflow, stacking, navigation transitions, content reflow.

What this does NOT test: General accessibility (ARIA, semantic HTML, heading hierarchy, colour contrast). Those don't vary by viewport width — use the ux-audit skill instead.

Browser Tool Priority

Before starting, detect available browser tools:

  1. playwright-cli (preferred) — supports resize, named sessions, and sub-agent parallelism. If installed, run /playwright-cli first to load the full command reference.
  2. Playwright MCP (mcp__plugin_playwright_playwright__*) — browser_resize for viewport changes.
  3. Chrome MCP (mcp__claude-in-chrome__*) — resize_window for viewport changes. Uses the user's logged-in Chrome session.

If none are available, inform the user and suggest installing playwright-cli or Playwright MCP.

Operating Modes

Mode 1: Standard Check

When: "check responsive", "responsiveness check", "test breakpoints"

Test 8 key breakpoints that cover the device spectrum:

WidthDevice Context
320pxSmall phone (iPhone SE)
375pxStandard phone (iPhone 14)
768pxTablet portrait (iPad)
1024pxTablet landscape / small laptop
1280pxLaptop
1440pxDesktop
1920pxFull HD
2560pxUltra-wide / 4K

Process:

  1. Open the URL in a single browser session (height: 900px)
  2. Start at 320px. For each breakpoint width: a. Resize the viewport b. Wait briefly for CSS reflow (layout transition) c. Screenshot the above-fold area d. If the page has significant below-fold content, scroll and screenshot e. Run the 8 layout checks (see matrix below) f. Note any issues with severity
  3. Compare adjacent widths — identify where layout transitions occur
  4. Write the report
Mode 2: Sweep

When: "responsive sweep", "sweep all breakpoints", "find where it breaks"

Test every 160px from 320 to 2560 (15 widths total). Same single-session approach as Standard — just more data points. This is the mode for finding the exact width where a layout breaks.

Widths: 320, 480, 640, 800, 960, 1120, 1280, 1440, 1600, 1760, 1920, 2080, 2240, 2400, 2560

Briefly confirm before starting sweep mode (15 screenshots is a meaningful session).

Mode 3: Targeted Range

When: "check between 768 and 1024", "test tablet breakpoints", "focus on mobile widths"

Test a user-specified range at 80px increments. Use when a known trouble zone needs detailed investigation.

Example: "check between 768 and 1024" tests: 768, 848, 928, 1008 (plus 1024 as endpoint).

Multi-URL

When testing multiple URLs (e.g., "check the homepage, about page, and contact page"):

  • Launch parallel sub-agents, one per URL (not per breakpoint)
  • Each sub-agent runs a standard check on its URL in its own named session
  • Combine results into a single report
# Sub-agent pattern (playwright-cli)
playwright-cli -s=page1 open https://example.com/ &
playwright-cli -s=page2 open https://example.com/about &
Show full SKILL.md (362 more words)Show less

Layout Check Matrix

These 8 checks target issues that actually vary by viewport width:

#CheckWhat to Look For
1Horizontal overflowContent wider than viewport — horizontal scrollbar appears, elements cut off
2Text overflowText truncated mid-word, overlapping adjacent elements, font size unreadable (< 12px)
3Navigation transitionHamburger menu appears/disappears at correct width, no "broken" state between modes
4Content stackingMulti-column layouts stack to single column in logical reading order on narrow widths
5Image/media scalingImages overflow container, distorted aspect ratios, missing responsive sizing
6Touch targetsInteractive elements < 44px on mobile widths (< 768px) — buttons, links, form inputs
7Whitespace balanceToo cramped on mobile (no breathing room), too sparse on wide screens (content lost in space)
8CTA visibilityPrimary call-to-action visible above the fold at each width without scrolling

Transition Detection

The unique value of this skill is finding where layout transitions happen and whether they're clean.

When comparing screenshots at adjacent widths, flag any width where:

  • Column count changes (3-col → 2-col → 1-col grid)
  • Navigation mode switches (full nav → hamburger, or vice versa)
  • Sidebar appears/disappears (content width jumps)
  • Grid reflows (cards wrap to next row)

Report the exact width range where each transition occurs:

TransitionFromToWidth Range
Nav: hamburger → full768px1024pxSwitches at ~960px
Grid: 1-col → 2-col640px768pxReflows at ~700px
Sidebar appears1024px1280pxShows at ~1100px

This tells the developer exactly where to set (or fix) their CSS breakpoints.

Severity Levels

Consistent with ux-audit:

SeverityMeaning
CriticalLayout is broken — content unreadable, navigation inaccessible, page unusable
HighSignificant layout issue — major overflow, key content hidden, broken transition
MediumNoticeable but usable — awkward spacing, minor overflow, suboptimal stacking order
LowPolish — whitespace tweaks, slight alignment issues, minor touch target shortfalls

Autonomy Rules

  • Just do it: Resize viewport, take screenshots, analyse layout, compare widths
  • Brief confirmation: Before sweep mode (15 viewports), before testing 4+ URLs in parallel
  • Ask first: Before interacting with forms or clicking through authentication flows

Report Output

Write report to docs/responsiveness-check-YYYY-MM-DD.md (or inline for single-page quick checks).

See references/report-template.md for the report structure.

Reference Files

WhenRead
Looking up breakpoint details and trouble zonesreferences/breakpoints.md
Writing the responsiveness reportreferences/report-template.md

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

Files

SKILL.md and 2 other files (references) in plugins/dev-tools/skills/responsiveness-check of jezweb/claude-skills.

  • SKILL.md
  • references/breakpoints.md
  • references/report-template.md

Open the folder on GitHubat commit 64965d9

Used in 1 other repository

We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in jezweb/claude-skills, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Responsiveness Check 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.

Responsiveness Check compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Responsiveness Check this skilljezweb/claude-skills1.1k1 repos~1.7kAutomated safety check: PassMIT
Browser QAaffaan-m/ECC276k2 repos~1kAutomated safety check: PassMIT
Local Testinglobehub/lobe-ui2.2k—~2.1kAutomated safety check: PassMIT
Playwright MCP Browser ControlHainrixz/editor-pro-max264—~2kAutomated safety check: PassCustom licence
GstackLeoYeAI/openclaw-master-skills2.2k—~4.1kAutomated safety check: NotesMIT
BrowseLeoYeAI/openclaw-master-skills2.2k—~3.2kAutomated safety check: NotesMIT

Similar skills

  • Browser QA

    affaan-m/ECC

    Run automated post-deploy UI verification with a browser automation MCP (claude-in-chrome, Playwright, or Puppeteer): console-error and Core Web Vitals smoke checks, form and auth-flow interaction…

    276k GitHub starsUsed in 2 repos~1k tokens
    Frontend & DesignAuto-check passed

  • Local Testing

    lobehub/lobe-ui

    Local browser verification for the lobe-ui component library and documentation site.

    2.2k GitHub stars~2.1k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Playwright MCP Browser Control

    Hainrixz/editor-pro-max

    Drives a live browser through the Playwright MCP server to navigate, inspect, fill forms and screenshot pages, with snapshot-first habits and output-size care.

    264 GitHub stars~2k tokensUpdated 6 mo ago
    Testing & QAAuto-check passed

  • Gstack

    LeoYeAI/openclaw-master-skills

    Fast headless browser for QA testing and site dogfooding. An agent skill from LeoYeAI/openclaw-master-skills.

    2.2k GitHub stars~4.1k tokensUpdated 2 mo ago
    Frontend & DesignAuto-check: notes

  • Browse

    LeoYeAI/openclaw-master-skills

    Fast headless browser for QA testing and site dogfooding. An agent skill from LeoYeAI/openclaw-master-skills.

    2.2k GitHub stars~3.2k tokensUpdated 2 mo ago
    Frontend & DesignAuto-check: notes

  • Vite

    magnus919/agent-skills

    Operate Vite projects: inspect versions and configuration, run bounded development and production builds, diagnose dependency and asset failures, and configure environment-aware frontend delivery.

    116 GitHub stars~1.5k tokensUpdated yesterday
    Frontend & DesignAuto-check: notes

More from jezweb/claude-skills

All 52 skills in this repo

  • Favicon Gen

    jezweb/claude-skills

    Generate custom favicons from logos, text, or brand colours.

    1.1k GitHub starsUsed in 1 repo~1k tokens
    Auto-check passed

  • Tailwind Theme Builder

    jezweb/claude-skills

    Set up Tailwind v4 + shadcn/ui themed UI with dark mode. An agent skill from jezweb/claude-skills.

    1.1k GitHub starsUsed in 1 repo~3.2k tokens
    Auto-check passed

  • Elevenlabs Agents

    jezweb/claude-skills

    Build conversational AI voice agents on the ElevenLabs platform.

    1.1k GitHub stars~3.3k tokensUpdated 4 days ago
    Auto-check passed

  • MCP Builder

    jezweb/claude-skills

    Build MCP servers in Python with FastMCP. An agent skill from jezweb/claude-skills.

    1.1k GitHub stars~3.1k tokensUpdated 4 days ago
    Auto-check: notes

  • GitHub Release

    jezweb/claude-skills

    Prepare and publish GitHub releases. An agent skill from jezweb/claude-skills.

    1.1k GitHub stars~944 tokensUpdated 4 days ago
    Auto-check: notes

  • Icon Set Generator

    jezweb/claude-skills

    Generate cohesive, project-specific SVG icon sets for websites and applications.

    1.1k GitHub stars~2k tokensUpdated 4 days ago
    Auto-check passed

Works with

Categories

Questions about Responsiveness Check

What does Responsiveness Check do?

Test website responsiveness across viewport widths using browser automation. Responsiveness Check is an agent skill from jezweb/claude-skills. Test website responsiveness across viewport widths using browser automation.

When should I use Responsiveness Check?

Responsiveness Check fits situations like: with responsiveness check; check responsive; breakpoint test; responsive sweep.

How do I install Responsiveness Check in Claude Code?

Run `npx skills add jezweb/claude-skills --skill responsiveness-check -a claude-code`. Or copy the skill folder (plugins/dev-tools/skills/responsiveness-check in jezweb/claude-skills) into .claude/skills/responsiveness-check in your project. Claude Code loads it when a task matches its description.

How do I install Responsiveness Check in Codex?

Run `npx skills add jezweb/claude-skills --skill responsiveness-check -a codex`. Or copy the skill folder (plugins/dev-tools/skills/responsiveness-check in jezweb/claude-skills) into .agents/skills/responsiveness-check in your project. Codex loads it when a task matches its description.

Can I use Responsiveness Check 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 jezweb/claude-skills --skill responsiveness-check -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/responsiveness-check, .gemini/skills/responsiveness-check, .github/skills/responsiveness-check and .opencode/skills/responsiveness-check in your project.

What does Responsiveness Check need to run?

SKILL.md names no scripts, command-line tools or credentials: Responsiveness Check is instructions for the agent only. Compatibility (from SKILL.md): claude-code-only.

Does Responsiveness Check access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Responsiveness Check 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 Responsiveness Check use?

Responsiveness Check 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 Responsiveness Check use?

About 1.7k tokens (SKILL.md is roughly 7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 1.5k tokens, read only when the agent opens those files.

What are the alternatives to Responsiveness Check?

Skills that share tags, products or a category with Responsiveness Check: Browser QA (affaan-m/ECC, 276k stars), Local Testing (lobehub/lobe-ui, 2.2k stars), Playwright MCP Browser Control (Hainrixz/editor-pro-max, 264 stars) and Gstack (LeoYeAI/openclaw-master-skills, 2.2k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Responsiveness Check?

jezweb (a GitHub user) maintains it in jezweb/claude-skills, which has 1,052 GitHub stars. The repository holds 52 skills in this directory. The repository was last updated on October 5, 2026.

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