0be354a920
Single-commit clean baseline after security scrub of niche-tells, project codenames, internal jargon, and contributor-email leaks. Contents: - 100 Rust crates (_primitives/_rust/) - 37 agent manifests (_manifests/) + generated specs (_generated/) - 67 user-invocable skills (skills/) - 33 hooks (hooks/) - Composition blocks (_blocks/) - Documentation (docs/, README.md) - TS adapter packages (_ts_packages/) - Assembler (_assembler/) - Roles (_roles/) - Templates (_templates/) - Forgejo CI (.forgejo/) Author: Denis Parfionovich <info@greendragon.info> License: see LICENSE.
65 lines
1.9 KiB
Markdown
65 lines
1.9 KiB
Markdown
---
|
|
name: responsive-audit
|
|
description: Use when auditing responsive design — 6 breakpoints, layout, touch targets, overflow, images
|
|
arguments:
|
|
- name: target
|
|
description: Page or component path to audit
|
|
required: true
|
|
---
|
|
|
|
# Responsive Audit Workflow
|
|
|
|
## Step 1: Identify Target
|
|
- Read the target file(s)
|
|
- Understand the layout structure (flex, grid, absolute, etc.)
|
|
- List all breakpoint-dependent styles
|
|
|
|
## Step 2: Audit Each Breakpoint
|
|
|
|
### Mobile (375px)
|
|
- [ ] Single column layout where appropriate
|
|
- [ ] Touch targets min 44x44px
|
|
- [ ] No horizontal scroll
|
|
- [ ] Font size min 16px for body text
|
|
- [ ] Adequate spacing between interactive elements
|
|
|
|
### Small Mobile (320px)
|
|
- [ ] No content overflow or truncation breaking layout
|
|
- [ ] Navigation still usable
|
|
- [ ] Forms still fillable
|
|
|
|
### Tablet (768px)
|
|
- [ ] Layout adapts (2-column where appropriate)
|
|
- [ ] Images scale properly
|
|
- [ ] Navigation adapts (hamburger → tabs or vice versa)
|
|
|
|
### Desktop (1024px)
|
|
- [ ] Full layout utilizes space
|
|
- [ ] Max content width set (not stretching to infinity)
|
|
- [ ] Sidebar/aside content visible if applicable
|
|
|
|
### Wide (1280px)
|
|
- [ ] Content centered or max-width contained
|
|
- [ ] No excessive whitespace
|
|
- [ ] Images don't pixelate
|
|
|
|
### Ultra-wide (1920px+)
|
|
- [ ] Layout doesn't break
|
|
- [ ] Content doesn't stretch uncomfortably
|
|
|
|
## Step 3: Common Issues Check
|
|
- [ ] Images: `srcset` / responsive sizing, proper aspect ratios
|
|
- [ ] Typography: readable at all sizes, proper line lengths (45-75 chars)
|
|
- [ ] Spacing: consistent with design system tokens
|
|
- [ ] Overflow: no `overflow: hidden` hiding important content
|
|
- [ ] Z-index: modals/dropdowns work on all sizes
|
|
- [ ] Inputs: don't zoom on iOS (font-size >= 16px)
|
|
|
|
## Step 4: Issues Report
|
|
For each issue:
|
|
- Breakpoint where it occurs
|
|
- File and line number
|
|
- Screenshot description or CSS selector
|
|
- Suggested fix
|
|
|
|
Prioritize: broken layout > usability > polish
|