Agent skill

Test Responsive Design

by bitovi in bitovi/ai-enablement-prompts

Make UIs responsive across all devices and verify responsiveness using Playwright.

Install Test Responsive Design

skills CLI

$ npx skills add bitovi/ai-enablement-prompts --skill test-responsive-design -a claude-code

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

GitHub CLI

$ gh skill install bitovi/ai-enablement-prompts test-responsive-design --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/bitovi/ai-enablement-prompts.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/playwright/skills/test-responsive-design .claude/skills/test-responsive-design && 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/

Paste into Claude Code

Install the "test-responsive-design" agent skill from https://github.com/bitovi/ai-enablement-prompts/tree/main/plugins/playwright/skills/test-responsive-design into .claude/skills/test-responsive-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "test-responsive-design", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/bitovi/ai-enablement-prompts/tree/main/plugins/playwright/skills/test-responsive-design

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add bitovi/ai-enablement-prompts --skill test-responsive-design -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install bitovi/ai-enablement-prompts test-responsive-design --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/bitovi/ai-enablement-prompts.git skills-src && mkdir -p .agents/skills && cp -r skills-src/plugins/playwright/skills/test-responsive-design .agents/skills/test-responsive-design && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "test-responsive-design" agent skill from https://github.com/bitovi/ai-enablement-prompts/tree/main/plugins/playwright/skills/test-responsive-design into .agents/skills/test-responsive-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "test-responsive-design", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add bitovi/ai-enablement-prompts --skill test-responsive-design -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install bitovi/ai-enablement-prompts test-responsive-design --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/bitovi/ai-enablement-prompts.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/plugins/playwright/skills/test-responsive-design .cursor/skills/test-responsive-design && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "test-responsive-design" agent skill from https://github.com/bitovi/ai-enablement-prompts/tree/main/plugins/playwright/skills/test-responsive-design into .cursor/skills/test-responsive-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "test-responsive-design", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/bitovi/ai-enablement-prompts.git --path plugins/playwright/skills/test-responsive-design

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add bitovi/ai-enablement-prompts --skill test-responsive-design -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install bitovi/ai-enablement-prompts test-responsive-design --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/bitovi/ai-enablement-prompts.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/plugins/playwright/skills/test-responsive-design .gemini/skills/test-responsive-design && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "test-responsive-design" agent skill from https://github.com/bitovi/ai-enablement-prompts/tree/main/plugins/playwright/skills/test-responsive-design into .gemini/skills/test-responsive-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "test-responsive-design", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install bitovi/ai-enablement-prompts test-responsive-design

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add bitovi/ai-enablement-prompts --skill test-responsive-design -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/bitovi/ai-enablement-prompts.git skills-src && mkdir -p .github/skills && cp -r skills-src/plugins/playwright/skills/test-responsive-design .github/skills/test-responsive-design && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "test-responsive-design" agent skill from https://github.com/bitovi/ai-enablement-prompts/tree/main/plugins/playwright/skills/test-responsive-design into .github/skills/test-responsive-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "test-responsive-design", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add bitovi/ai-enablement-prompts --skill test-responsive-design -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install bitovi/ai-enablement-prompts test-responsive-design --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/bitovi/ai-enablement-prompts.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/plugins/playwright/skills/test-responsive-design .opencode/skills/test-responsive-design && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "test-responsive-design" agent skill from https://github.com/bitovi/ai-enablement-prompts/tree/main/plugins/playwright/skills/test-responsive-design into .opencode/skills/test-responsive-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "test-responsive-design", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: test-responsive-design
GitHub stars: 121
Token cost: ~927 tokens
SKILL.md length: 271 words
Files: 1
Skills in repo: 40
Repo updated: Sep 11, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

Make UIs responsive across all devices and verify responsiveness using Playwright.

Works in 3 steps: Navigate to Feature → Test Each Breakpoint → Check for Overflow
Implementing new features
SKILL.md covers Purpose, Standard Breakpoints, Responsive Design Patterns and Scrollbar & Overflow Testing, plus 3 more sections
Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Test Responsive Design is an agent skill from bitovi/ai-enablement-prompts. Make UIs responsive across all devices and verify responsiveness using Playwright. Includes scrollbar testing, breakpoint verification, and layout validation. Use when implementing new features, fixing layout issues, or ensuring mobile compatibility.

Its SKILL.md is about 930 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 Responsive design. It works with Playwright. The repository describes itself as: Prompts Bitovi uses for software development. The licence is MIT.

When your agent uses it

Implementing new features
Fixing layout issues
Ensuring mobile compatibility

Example prompts

“/test-responsive-design”

Workflow steps

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

Navigate to Feature
Test Each Breakpoint
Check for Overflow

What it can do on your machine

Read from SKILL.md and the folder at commit df229b1. 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 (its code samples are typescript and javascript).
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.

Context cost

Test Responsive Design loads about 927 tokens when it runs. Until then it costs about 68 tokens; SKILL.md has 271 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: ~927

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 bitovi/ai-enablement-prompts at commit df229b1, republished under its MIT licence (© bitovi). 271 words, ~927 tokens.

Download SKILL.mdSave it as .claude/skills/test-responsive-design/SKILL.md (or your agent's skills folder).

name: test-responsive-design
description: Make UIs responsive across all devices and verify responsiveness using Playwright. Includes scrollbar testing, breakpoint verification, and layout validation. Use when implementing new features, fixing layout issues, or ensuring mobile compatibility.

Responsive Design & Verification Skill

Purpose

Ensure all UI features are fully responsive and work correctly across all device sizes, from mobile to desktop.

Standard Breakpoints

Breakpoint	Min Width	Device Type
default	0px	Mobile
`sm:`	640px	Large mobile
`md:`	768px	Tablet
`lg:`	1024px	Laptop
`xl:`	1280px	Desktop
`2xl:`	1536px	Large Desktop

Testing Sizes

typescript

const testSizes = [
  { width: 375, height: 667, name: 'Mobile (iPhone SE)' },
  { width: 768, height: 1024, name: 'Tablet (iPad)' },
  { width: 1280, height: 720, name: 'Desktop (HD)' },
  { width: 1920, height: 1080, name: 'Desktop (Full HD)' },
];

Responsive Design Patterns

Mobile (< 768px): Hamburger menu, collapsed drawer
Desktop (≥ 768px): Full horizontal navigation bar

Data Tables

Mobile: Stack rows as cards or use horizontal scroll
Desktop: Traditional table layout with all columns

Forms

Mobile: Single column, full-width inputs, large touch targets (≥ 44x44px)
Desktop: Grid layouts, inline labels

Layout

Use container mx-auto px-4 sm:px-6 lg:px-8
Responsive grids: grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3

Typography

Scale font sizes: text-2xl md:text-3xl lg:text-4xl

Scrollbar & Overflow Testing

Lists/Tables: Minimum 15-20 items to trigger vertical scroll
Horizontal: Test with wide tables (8+ columns)
Always check for unintentional horizontal page scroll

Playwright Verification Workflow

1. Navigate to Feature

mcp_playwright_navigate → { url: 'http://localhost:5173/feature' }

2. Test Each Breakpoint

typescript

const breakpoints = [
  { width: 375, height: 667, name: 'Mobile' },
  { width: 768, height: 1024, name: 'Tablet' },
  { width: 1280, height: 720, name: 'Desktop' },
];

for (const bp of breakpoints) {
  // Resize, screenshot, verify elements
  mcp_playwright_resize → { width: bp.width, height: bp.height }
  mcp_playwright_screenshot → { name: `feature-${bp.name}` }
}

3. Check for Overflow

() => {
  const bodyWidth = document.body.scrollWidth;
  const windowWidth = window.innerWidth;
  return {
    hasOverflow: bodyWidth > windowWidth,
    overflowElements: Array.from(document.querySelectorAll('*'))
      .filter(el => el.scrollWidth > windowWidth)
      .map(el => ({ tag: el.tagName, class: el.className }))
  };
}

Responsive Design Checklist

Layout

Content stacks on mobile (single column)
Multi-column layouts work on tablet/desktop
No horizontal overflow on any breakpoint
Container max-widths prevent over-stretching

Mobile: Hamburger menu or collapsed nav
Desktop: Full navigation visible
Touch targets ≥ 44x44px on mobile

Tables/Lists

Mobile: Card view or horizontal scroll
Desktop: Full table with all columns
Vertical scroll with 15-20+ items
Sticky headers work when scrolling

Typography

Font sizes scale with breakpoints
Line length appropriate (45-75 characters)
Text remains readable on small screens

Common Mistakes

Desktop-first thinking — start mobile-first
Fixed widths — use w-full, max-w-*
Insufficient test data — always provide 15-20+ items
Tiny touch targets — 44x44px minimum on mobile

Files

Just SKILL.md in plugins/playwright/skills/test-responsive-design of bitovi/ai-enablement-prompts.

Open the folder on GitHubat commit df229b1

Compare with similar skills

Test Responsive Design 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.

Test Responsive Design compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Test Responsive Design this skillbitovi/ai-enablement-prompts	121	—	~927	Automated safety check: Pass	MIT	27 days ago
Responsiveness Checkjezweb/claude-skills	1.1k	1 repos	~1.7k	Automated safety check: Pass	MIT	2 days ago
Self-Contained HTML PagesSourceWeft/SourceWeft	166	—	~817	Automated safety check: Pass	Custom licence	today
Extract Design Systemespennilsen/pi	122	—	~2k	Automated safety check: Pass	MIT	16 days ago
Browser QAaffaan-m/ECC	275k	2 repos	~1k	Automated safety check: Pass	MIT	3 days ago
Website Responsive Validationmacalbert/envilder	138	—	~739	Automated safety check: Pass	MIT	3 days ago

Similar skills

Responsiveness Check
jezweb/claude-skills
Test website responsiveness across viewport widths using browser automation.
1.1k GitHub starsUsed in 1 repo~1.7k tokens
Frontend & DesignAuto-check passed
Self-Contained HTML Pages
SourceWeft/SourceWeft
Builds and revises polished offline HTML reports, landing pages, infographics and interactive visualizations as a single file, with viewport QA before delivery.
166 GitHub stars~817 tokensUpdated today
Frontend & DesignAuto-check passed
Extract Design System
espennilsen/pi
Reverse-engineer a design system from a live website (public URL or localhost).
122 GitHub stars~2k tokensUpdated 16 days ago
Frontend & DesignAuto-check passed
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…
275k GitHub starsUsed in 2 repos~1k tokens
Frontend & DesignAuto-check passed
Website Responsive Validation
macalbert/envilder
Playwright-based visual validation procedure for Envilder website changes.
138 GitHub stars~739 tokensUpdated 3 days ago
Frontend & DesignAuto-check passed
Common Web Visual Testing
HoangNguyen0403/agent-skills-standard
Standardizes visual audits, responsive design, and behavioral testing for web apps.
571 GitHub stars~760 tokensUpdated today
Frontend & DesignAuto-check passed

More from bitovi/ai-enablement-prompts

All 40 skills in this repo

Component Registry
bitovi/ai-enablement-prompts
Track reusable UI components and unextracted patterns. An agent skill from bitovi/ai-enablement-prompts.
121 GitHub stars~597 tokensUpdated 27 days ago
Auto-check passed
Computed Styles
bitovi/ai-enablement-prompts
Extract and compare computed CSS styles between a baseline URL and a dev/Storybook URL using Playwright MCP evaluate calls.
121 GitHub stars~2.4k tokensUpdated 27 days ago
Auto-check passed
Create Plugin
bitovi/ai-enablement-prompts
A skill your agent uses when the user asks to "create a plugin", "add a plugin", "make a new plugin", "build a plugin", or wants to package skills into an installable plugin for this marketplace.
121 GitHub stars~2k tokensUpdated 27 days ago
Auto-check passed
Create React Modlet
bitovi/ai-enablement-prompts
Create React components, hooks, or utilities following the modlet pattern.
121 GitHub stars~2.1k tokensUpdated 27 days ago
Auto-check passed
Create Skill
bitovi/ai-enablement-prompts
A skill your agent uses when the user asks to "create a skill", "add a skill", "make a new skill", "build a skill", or wants to automate a repeated workflow into a reusable prompt.
121 GitHub stars~1.6k tokensUpdated 27 days ago
Auto-check passed
Create Skill
bitovi/ai-enablement-prompts
Create new Agent Skills for this project. An agent skill from bitovi/ai-enablement-prompts.
121 GitHub stars~1.7k tokensUpdated 27 days ago
Auto-check passed

Works with

Playwright

Questions about Test Responsive Design

What does Test Responsive Design do?

Make UIs responsive across all devices and verify responsiveness using Playwright. Test Responsive Design is an agent skill from bitovi/ai-enablement-prompts. Make UIs responsive across all devices and verify responsiveness using Playwright.

When should I use Test Responsive Design?

Test Responsive Design fits situations like: implementing new features; fixing layout issues; ensuring mobile compatibility.

How do I install Test Responsive Design in Claude Code?

Run `npx skills add bitovi/ai-enablement-prompts --skill test-responsive-design -a claude-code`. Or copy the skill folder (plugins/playwright/skills/test-responsive-design in bitovi/ai-enablement-prompts) into .claude/skills/test-responsive-design in your project. Claude Code loads it when a task matches its description.

How do I install Test Responsive Design in Codex?

Run `npx skills add bitovi/ai-enablement-prompts --skill test-responsive-design -a codex`. Or copy the skill folder (plugins/playwright/skills/test-responsive-design in bitovi/ai-enablement-prompts) into .agents/skills/test-responsive-design in your project. Codex loads it when a task matches its description.

Can I use Test Responsive Design 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 bitovi/ai-enablement-prompts --skill test-responsive-design -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/test-responsive-design, .gemini/skills/test-responsive-design, .github/skills/test-responsive-design and .opencode/skills/test-responsive-design in your project.

What does Test Responsive Design need to run?

SKILL.md names no scripts, command-line tools or credentials: Test Responsive Design is instructions for the agent only.

Does Test Responsive Design 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 Test Responsive Design 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 Test Responsive Design use?

Test Responsive Design 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 Test Responsive Design use?

About 927 tokens (SKILL.md is roughly 3.7k 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 Test Responsive Design?

Skills that share tags, products or a category with Test Responsive Design: Responsiveness Check (jezweb/claude-skills, 1.1k stars), Self-Contained HTML Pages (SourceWeft/SourceWeft, 166 stars), Extract Design System (espennilsen/pi, 122 stars) and Browser QA (affaan-m/ECC, 275k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Test Responsive Design?

bitovi (a GitHub organization) maintains it in bitovi/ai-enablement-prompts, which has 121 GitHub stars. The repository holds 40 skills in this directory. The repository was last updated on September 11, 2026.

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

Install Test Responsive Design

Facts

At a glance

What it does

When your agent uses it

Example prompts

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Responsive Design & Verification Skill

Purpose

Standard Breakpoints

Testing Sizes

Responsive Design Patterns

Navigation

Data Tables

Forms

Layout

Typography

Scrollbar & Overflow Testing

Playwright Verification Workflow

1. Navigate to Feature

2. Test Each Breakpoint

3. Check for Overflow

Responsive Design Checklist

Layout

Navigation

Tables/Lists

Typography

Common Mistakes

Files

Compare with similar skills

Similar skills

More from bitovi/ai-enablement-prompts

Related

Questions about Test Responsive Design