From ui-designer
Audit pages and components for responsive behavior across mobile, tablet, and desktop breakpoints
npx claudepluginhub silviaare95/xari-plugins --plugin ui-designerThis skill uses the workspace's default tool permissions.
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Migrates code, prompts, and API calls from Claude Sonnet 4.0/4.5 or Opus 4.1 to Opus 4.5, updating model strings on Anthropic, AWS, GCP, Azure platforms.
Analyzes BMad project state from catalog CSV, configs, artifacts, and query to recommend next skills or answer questions. Useful for help requests, 'what next', or starting BMad.
Audit responsive behavior for: $0
Breakpoints: $1 (default: all)
Check mobile-first approach:
sm:, md:, lg:, xl: add complexity for larger screensflex-row base with max-sm:flex-col)Check breakpoint coverage by component:
For each layout-affecting component, verify behavior at each breakpoint:
| Element | Mobile (base) | sm (640px) | md (768px) | lg (1024px) | xl (1280px) |
|---|---|---|---|---|---|
| Nav | hamburger | hamburger | full | full | full |
| Grid | 1 col | 1 col | 2 col | 3 col | 4 col |
| Sidebar | hidden | hidden | collapsible | visible | visible |
Check common responsive issues:
overflow-x-hidden on body)w-[500px] → w-full max-w-lg)overflow-x-auto)Check touch targets:
Check container constraints:
max-w-* on the main content area?px-4 or container mx-auto used for horizontal padding?## Responsive Audit: <target>
### Breakpoint Matrix
| Component | base | sm | md | lg | xl | Issues |
|-----------|------|----|----|----|----|--------|
| ... | ... | ...| ...| ...| ...| ... |
### Critical Issues (broken layout)
1. **<file:line>**: <issue + fix>
### Warnings (suboptimal but functional)
1. **<file:line>**: <issue + recommendation>
### Touch Target Violations
1. **<element>**: current size <X>px, minimum 44px — add `min-h-11 min-w-11`