From ui-designer
Audit pages and components for responsive behavior across mobile, tablet, and desktop breakpoints
How this skill is triggered — by the user, by Claude, or both
Slash command
/ui-designer:responsive-auditThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Audit responsive behavior for: **$0**
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`
Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.
npx claudepluginhub silviaare95/xari-plugins --plugin ui-designer