responsive-sweep

Featured

Live-verify layout across tablet, laptop, and wide breakpoints by measuring rects, elementFromPoint occlusion, bottom-tab reserve, and screenshots.

AI & Automation 139 stars 21 forks Updated today MIT

Install

View on GitHub

Quality Score: 87/100

Stars 20%
71
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# Responsive sweep Run only when `pnpm design:route` includes `responsive-sweep`. Use its scope: affected bands for a breakpoint-local change, the full matrix for a new surface or information architecture. - A **breakpoint** is a width where layout changes (`md` 768px, `lg` 1024px). - A **rect** is the measured `getBoundingClientRect()` geometry. - **Chrome** is the frame around content: header, toolbar, tab bar, and panels. Static class reading missed three live defects: `max-lg:pb-*` lost to a later `md:py-*` rule at 768–1023px, three chrome rows overlapped by 79px, and a tab bar intercepted content. Only computed geometry and `elementFromPoint` proved them. ## Width matrix | Viewport | Band | |---|---| | 600×900 | phone/small portrait tablet; below `md` | | 768×1024 | `md` boundary; side panels begin, tab bar remains | | 834×1112 | 11-inch tablet | | 1024×768 | `lg` boundary; vertical navigation begins, tab bar leaves | | 1440×900 | 14-inch laptop; labels progressively compact | | 1920×1080 | FHD | | 2560×1440 | QHD | Use the router's returned bands. A local chrome or layout repair does not independently require the full matrix. If additional breakpoints are affected, update the change facts and use the resulting scope. ## Loop at each width 1. Resize and navigate to a URL reproducing the exact state, such as `?index=expanded` or `?recent=auto`. Set `guides=off` as a query parameter (use `&` when a query already exists); the first-run overlay otherwise cap...

Details

Author
wlsdks
Repository
wlsdks/ontology-atlas
Created
5 months ago
Last Updated
today
Language
TypeScript
License
MIT

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Listed

responsiveness-check

Test website responsiveness across viewport widths using browser automation. Resizes a single session through breakpoints, screenshots each width, and detects layout transitions (column changes, nav switches, overflow). Produces comparison reports showing exactly where layouts break. Trigger with 'responsiveness check', 'check responsive', 'breakpoint test', 'viewport test', 'responsive sweep', 'check breakpoints', or 'test at mobile'.

1 Updated 1 weeks ago
SkotAlexsander
Web & Frontend Featured

responsiveness-check

Test website responsiveness across viewport widths using browser automation. Resizes a single session through breakpoints, screenshots each width, and detects layout transitions (column changes, nav switches, overflow). Produces comparison reports showing exactly where layouts break. Trigger with 'responsiveness check', 'check responsive', 'breakpoint test', 'viewport test', 'responsive sweep', 'check breakpoints', or 'test at mobile'.

1,031 Updated today
jezweb
Web & Frontend Listed

responsive-reveal-audit

Find and fix layout, responsive and scroll-animation bugs on an existing website by MEASURING it in a browser instead of eyeballing it. Use this whenever someone says a site "isn't visible properly on mobile", "looks broken on my phone", "text/buttons are cut off", "the menu doesn't open on mobile", "buttons break in the middle", "fonts should scale with the screen", "the animations load late", "content is blank until I scroll back up", "it lags when I scroll fast", or asks to make an existing page responsive, audit it across device sizes, or fix its scroll transitions. Also use it before redesigning a live page, since it tells you which problems are real and which are imagined. Applies to any plain HTML/CSS/JS or framework-rendered site, not a particular project. Reach for this even when the user only describes a vague visual complaint — the probes turn "looks off" into exact pixel numbers, which is usually the whole difficulty.

0 Updated 1 months ago
hellokianben-collab