skills.rest
parisgroup-ai
parisgroup-aiOFFICIAL
Explore all skills by this author →
GitHub

pwa-audit

Detect mobile-first PWA usability violations in React/TSX components.

1|2|Updated Apr 6, 2026
Search Tags:#accessibility#pwa#touch-targets#tsx#frontend-audit#mobile-usability#search-semantic
One-click install
npx skills add https://github.com/parisgroup-ai/imersao-ia-setup --skill pwa-audit-parisgroup-ai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pwa-audit
Source: https://github.com/parisgroup-ai/imersao-ia-setup/tree/main/skills/pwa-audit
Command: npx skills add https://github.com/parisgroup-ai/imersao-ia-setup --skill pwa-audit-parisgroup-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Detects mobile-first usability and PWA compliance violations in React/TSX components so teams can find and prioritize fixes for touch targets, input sizing, touch handling, search semantics, and safe-area support across a codebase.

Core Features & Use Cases

  • Automated scanning patterns and grep-based searches to locate likely violations in TypeScript TSX files without running the app.
  • Rule set covering minimum touch target sizes, input font sizes to avoid iOS zoom, presence of touch-manipulation, correct search input semantics, and safe-area handling for notches.
  • Produces a formatted audit report with severity categories, file locations, line references, and recommended fixes to guide developers and QA during PWA reviews, pre-release audits, and mobile-first sprints.

Quick Start

Run a PWA audit on the src directory to generate a report of touch target, input sizing, touch-manipulation, search semantics, and safe-area violations.

Frequently Asked Questions about pwa-audit

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

FAQPage Schema
How do I audit React TSX components for mobile PWA usability issues?▼

To audit React TSX components for mobile PWA usability issues, scan TypeScript files to detect violations in touch target sizes, input font sizes, touch-manipulation, search semantics, and safe-area support. The audit generates a formatted report with severity levels, file locations, and recommended fixes.

What causes mobile input zoom in PWA web apps and how do I find it?▼

Mobile input zoom in PWA web apps is caused by input font sizes below 16px. You can find these violations across TSX files by scanning CSS utility classes and attributes, allowing you to locate and fix input sizing issues before release.

Can I scan a codebase for touch target accessibility issues without running the app?▼

Yes, you can scan a codebase for touch target accessibility issues without running the app by applying grep-based searches to TypeScript TSX files. This static analysis locates minimum touch target size violations and missing touch-manipulation attributes.

What's the best way to check safe-area support for notches in React components?▼

The best way to check safe-area support for notches in React components is to scan TSX files for missing safe-area handling attributes. This detects compliance violations and produces file-level locations with suggested fixes for each issue.

Does this PWA audit tool work with non-React or plain JavaScript files?▼

No, this PWA audit tool is specifically designed to scan TypeScript TSX files within React components. It relies on parsing TSX file structures and CSS utility classes to detect mobile usability violations accurately.

Why does my PWA search input fail mobile usability audits?▼

Your PWA search input fails mobile usability audits due to incorrect search input semantics. Scanning your TSX files identifies these semantic violations alongside touch target and safe-area issues, providing line references and recommended fixes.

Related Skills

Explore More Software Engineering Skills→
SumitRajpalSumitRajpal

check-a11y

Detect and report accessibility violations in React TSX files with line numbers and fixes.

Community
Intermediate
hkcm91hkcm91

optimizing-mobile-experience

Implement responsive design and touch gestures for mobile web applications.

Community
Intermediate
kireevkit15-syskireevkit15-sys

optimize

Diagnose and fix web frontend performance issues across loading, rendering, and bundle size.

Community
Advanced
kevindreekevindree

browser-testing-with-devtools

Inspect live DOM, console, network, and accessibility data via Chrome DevTools MCP.

Community
Advanced