Skills
.Work. You
Rest

mobile-view-debugger

Community

Automate mobile UI debugging with Chrome DevTools.

Software Engineering#web development#automated testing#Chrome DevTools#mobile UI#UI debugging
Authorsadie100
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill streamlines the process of identifying and diagnosing UI issues in mobile web views, saving time and effort in manual debugging.

Core Features & Use Cases

  • Automated UI Diagnostics: Detects common mobile UI issues like layout breaks, text overflow, and touch target size problems.
  • Emulated Device Testing: Simulates various mobile devices for comprehensive testing.
  • Screenshot Capture: Captures screenshots of the web page at different scroll positions for thorough analysis.
  • Customizable Reports: Generates detailed reports highlighting issues and their severity.
  • Use Case: When encountering UI issues on mobile devices, this Skill can automatically diagnose and report problems, allowing for quick resolution.

Quick Start

Use the mobile-view-debugger skill to debug the UI of the webpage at 'https://example.com' on an iPhone 14.

Dependency Matrix

Required Modules

chrome-devtoolsseleniumpypdf2

Components

scriptsreferencesassets

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: mobile-view-debugger
Download link: https://github.com/sadie100/claude-dotfiles/archive/main.zip#mobile-view-debugger

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 620,000+ vetted skills library on demand.