powerback-responsive-ui-audit

name	powerback-responsive-ui-audit
description	Use when auditing, reporting, or fixing responsive layout issues in the POWERBACK React/TypeScript app.

POWERBACK Responsive UI Audit Skill

Use this skill when the user asks for a responsive UI audit, mobile layout review, viewport testing, overflow check, modal/sidenav layout check, or responsive CSS patch.

Default to AUDIT MODE unless the user explicitly asks for PATCH MODE.

Core rule

Do not redesign POWERBACK.

This skill is for finding and fixing launch-facing layout breakage with minimal, targeted changes.

Modes

AUDIT MODE

Find layout problems and report them.

Do not edit files.

Output a prioritized list of issues with reproduction details.

PATCH MODE

Fix only confirmed high-impact responsive problems.

Prefer minimal CSS or layout changes.

Do not refactor unrelated components.

Do not change product copy unless required for layout.

Target viewports

Test these viewport sizes:

• 360 x 740: mobile portrait
• 740 x 360: mobile landscape
• 768 x 1024: tablet portrait
• 1280 x 720: small laptop height edge case
• 1366 x 768: laptop
• 1920 x 1080: desktop
• 1080 x 1920: vertical monitor

Target surfaces

Audit these app surfaces when available:

• Landing / splash
• Lobby / carousel
• Search bar and filtered politician results
• Auth modal / credentials modal
• Tour / onboarding / Joyride overlays
• Mobile sidenav
• Checkout / payment
• Tips / confirmation
• FAQ / terms / privacy pages
• Any empty, loading, blocked, or error states

What to look for

Prioritize:

• Horizontal overflow
• Text clipping
• Buttons or CTAs below the fold when they should be visible
• Modal content taller than the viewport with no usable scroll behavior
• Fixed heights causing cropped content
• Carousel cards overflowing or becoming unreadable
• Sidenav overlapping active modals or tour overlays
• Tiny text on mobile
• Excessive whitespace or absurd scaling on large screens
• Mobile landscape unusability
• Sticky/fixed elements covering important content
• Footer/header collisions
• Broken Bootstrap override behavior