skills.rest
a-tabiji
a-tabijiCOMMUNITY
Explore all skills by this author →
GitHub

check-responsive

Audit CSS media queries, breakpoint coverage, and touch-target sizing for responsive issues.

Updated Apr 30, 2025
Search Tags:#accessibility#layout#css#audit#responsive#breakpoints#media-queries
One-click install
npx skills add https://github.com/a-tabiji/atima-lp --skill check-responsive
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: check-responsive
Source: https://github.com/a-tabiji/atima-lp/tree/main/.claude/skills/check-responsive
Command: npx skills add https://github.com/a-tabiji/atima-lp --skill check-responsive

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Audits the LP for responsive behavior, ensuring across breakpoints the layout remains stable and accessible.

Core Features & Use Cases

  • Verify CSS media queries and breakpoint coverage to prevent layout gaps.
  • Identify layout risks such as fixed widths, overflow, and missing wrap, improving mobile resilience.
  • Assess touch target sizes and typography to enhance mobile usability.

Quick Start

Run a responsiveness audit across the LP to verify media query coverage, layout stability, and touch-target sizing.

Frequently Asked Questions about check-responsive

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I audit responsive layout across breakpoints for mobile usability?▼

To audit responsive layout, evaluate CSS media query coverage, verify breakpoint reach across multiple viewports, and check touch-target sizing. This identifies layout risks like fixed widths and overflow to ensure mobile usability.

Why does my CSS layout break across different viewport sizes?▼

CSS layout breaks across viewport sizes due to missing media queries, fixed widths, or overflow. Auditing breakpoint coverage and identifying layout wrap issues prevents these gaps and stabilizes responsive behavior.

What is the best way to check CSS media queries and breakpoint coverage?▼

The best way to check CSS media queries is to run a responsiveness audit evaluating breakpoint reach across multiple devices. This verifies coverage and identifies layout gaps to prevent unstable responsive behavior.

How do I assess touch target sizes for mobile accessibility checks?▼

Assess touch target sizes for mobile accessibility by evaluating LP layout across viewports. This validates mobile usability by inspecting code and providing actionable recommendations for touch targets and typography.

Can I identify fixed widths and overflow issues without specific dependencies?▼

Yes, you can identify fixed widths and overflow issues without dependencies. The responsive audit inspects code directly to find missing wrap properties and layout risks, improving mobile resilience across breakpoints.

Related Skills

Explore More Design & Creative Skills→
kyamsSRLkyamsSRL

responsive-design

Implement responsive layouts with container queries, fluid typography, and CSS Grid.

Community
Intermediate
Luqman-Ud-DinLuqman-Ud-Din

qa-detect-breakpoint-boundary

Detect CSS breakpoint overflow and edge-cutoff defects at exact viewport widths.

Community
Intermediate
oborchersoborchers
28

responsive-design

Implement responsive web design with CSS Grid, container queries, and responsive images.

Community
Intermediate
timgranlundmarsdentimgranlundmarsden
2

playwright-cli-helpers

Verify local HTML pages for layout, overflow, and width consistency issues.

Community
Advanced