skills.rest
reckerswartz
reckerswartzCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

responsive-audit

Audit responsive UI across Rails pages with Playwright multi-viewport testing.

Updated Mar 19, 2026
Search Tags:#audit#playwright#responsive#tailwind#rails#viewport#hotwire
One-click install
npx skills add https://github.com/reckerswartz/resume_builder --skill responsive-audit
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: responsive-audit
Source: https://github.com/reckerswartz/resume_builder/tree/main/.devin/skills/responsive-audit
Command: npx skills add https://github.com/reckerswartz/resume_builder --skill responsive-audit

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Audits responsive UI across the application to surface layout issues, overflow, and navigation problems that hinder mobile and desktop experiences.

Core Features & Use Cases

  • Continuous improvement cycle: Audit → Prioritize → Fix → Validate → Re-audit, ensuring traceable progress across sessions.
  • Multi-viewport evaluation with Playwright to detect overflow, sticky collisions, density, and readability issues on Rails 8.1 apps using Hotwire, Tailwind, and ViewComponent.
  • Structured run logging and artifact retention to keep regression history, registry updates, and actionable insights.

Quick Start

Run a complete responsive-audit cycle on the main branch to begin evaluating page layouts.

Frequently Asked Questions about responsive-audit

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

FAQPage Schema
How do I audit responsive UI issues across multiple viewports in a Rails application?▼

Responsive UI audits detect overflow, sticky collisions, and density problems by evaluating Rails pages across multiple viewports using Playwright, producing structured run logs and archive artifacts for traceable regression history.

Can I use Playwright to find layout and navigation gaps on Hotwire and Tailwind pages?▼

Playwright supports responsive audits on Hotwire and Tailwind pages by running multi-viewport evaluations to detect navigation gaps, overflow, and readability issues across real-world route families.

What is the best way to continuously monitor layout overflow and sticky header collisions across different screen sizes?▼

Continuous responsive audits follow an audit, prioritize, fix, validate, and re-audit cycle to monitor layout overflow and sticky collisions across screen sizes, keeping structured logs of regression history and actionable insights.

Does this responsive audit workflow require ViewComponent to evaluate page density and readability?▼

Responsive audits evaluate page density and readability on Rails 8.1 apps using ViewComponent, Hotwire, and Tailwind, applying multi-size viewport coverage to identify real-world layout issues without requiring additional dependencies.

How do I start a responsive audit cycle to evaluate page layouts on the main branch?▼

Run a complete responsive-audit cycle on the main branch to begin evaluating page layouts, which applies deterministic workflows across multiple viewports and generates structured run logging with retained archive artifacts.

Related Skills

Explore More Design & Creative Skills→
reckerswartzreckerswartz

ui-audit

Validate routed pages against design guidelines using Playwright checks.

Community
Advanced
JansenAnalyticsJansenAnalytics
5

frontend-inspector

Analyze frontend screenshots to detect visual defects and generate structured reports.

Community
Intermediate
reckerswartzreckerswartz

tailwind-agent

Style Rails ERB views and ViewComponents with Tailwind CSS 4 utilities.

Community
Advanced
riftzen-bitriftzen-bit

browser-qa

Automate browser-based visual testing and UI interaction verification with Playwright or Puppeteer.

Community
Advanced