skills.rest
AgentSystemLabs
AgentSystemLabsOFFICIAL
Explore all skills by this author →
GitHub

audit-responsive

Audits a named route or component for responsive-design breakage and applies safe mechanical fixes.

121|2|Updated Apr 24, 2026
Search Tags:#static analysis#tailwind#ui debugging#responsive audit#mobile layout#layout overflow#frontend accessibility
One-click install
npx skills add https://github.com/AgentSystemLabs/core --skill audit-responsive
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: audit-responsive
Source: https://github.com/AgentSystemLabs/core/tree/main/plugins/agentsystem-core/skills/audit-responsive
Command: npx skills add https://github.com/AgentSystemLabs/core --skill audit-responsive

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you find responsive-design issues early by scanning your route or component code for viewport-breaking layout patterns, then applying safe mechanical fixes while flagging structural design problems.

Core Features & Use Cases

  • Static responsive audit that reads your codebase without opening a browser, focusing on constructs that commonly fail on mobile and tablet.
  • Targeted findings for issues like fixed pixel widths, missing flex-wrap, problematic 100vh usage, non-mobile-first grid/flex classes, overflow-risk tables, unbreakable long strings, non-scaling images, and sidebar/navs without a mobile strategy.
  • Safe auto-fixes for mechanical issues inline (e.g., wrap flex rows, make images responsive, swap 100vh guidance to dynamic viewport height selectively, adjust Tailwind width variants) while never making structural design changes automatically.

Quick Start

Ask your agent to run an audit responsive check on the route or component you name, then report what breaks at 375, 768, 1280, and 1920 and apply any mechanical fixes it can safely do.

Frequently Asked Questions about audit-responsive

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

FAQPage Schema
How do I find responsive layout breakage without opening a browser?▼

A static responsive audit reads your route and component code to find viewport-breaking patterns like fixed widths and missing flex-wrap without opening a browser. It scans directly-imported feature components one layer deep to detect common mobile and tablet layout failures.

Can this tool automatically fix Tailwind responsive design issues?▼

Yes, it applies inline mechanical fixes for safe Tailwind issues like making images responsive, wrapping flex rows, and adjusting width variants. It strictly labels these as MECHANICAL and never performs structural layout redesigns automatically.

What types of mobile layout overflow problems does a static analysis scan for?▼

Static analysis scans for fixed pixel widths, problematic 100vh usage, overflow-prone tables, fixed sidebars without mobile strategies, long unbreakable strings, and non-scaling images. It checks these constructs against common viewport widths like 375, 768, 1280, and 1920.

Does the audit only apply mechanical fixes or can it redesign structural layout problems?▼

The audit only applies safe inline fixes for mechanical issues and explicitly flags structural layout problems without redesigning them. It separates findings into MECHANICAL versus STRUCTURAL categories so you can manually address complex layout redesigns.

What is the best way to check a React route component for missing mobile breakpoints?▼

Run an audit responsive check on the named route or component to report what breaks at 375, 768, 1280, and 1920. It identifies non-mobile-first grid or flex classes and applies safe mechanical fixes while flagging structural sidebar or modal height problems.

Related Skills

Explore More Design & Creative Skills→
webdevcodywebdevcody
22

audit-responsive

Scans React components for mobile and desktop rendering defects.

Community
Intermediate
christophevgchristophevg

vuetify-v4

Fix Vuetify 4 page layouts in Baseweb projects with correct component hierarchy and layout props.

Community
Intermediate
manhthien2005manhthien2005

responsive-qa

Verify responsive layout and interaction quality across Chrome viewports.

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