responsive-sweep

Solid

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

AI & Automation 103 stars 15 forks Updated today MIT

Install

View on GitHub

Quality Score: 85/100

Stars 20%
67
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
80
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
4 months ago
Last Updated
today
Language
TypeScript
License
MIT

Similar Skills

Semantically similar based on skill content — not just same category

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 4 weeks ago
hellokianben-collab
Web & Frontend Listed

responsive-audit

Evaluate real interface behavior across small mobile, large mobile, tablet, laptop, desktop, and wide layouts. Use before release or when changing layout, navigation, tables, dialogs, dense content, or breakpoint behavior.

1 Updated today
Gaurav890
Web & Frontend Solid

responsive-adapter

Make an existing landing page, admin panel, dashboard, or any non-responsive page work at every viewport from 320px to 2560px+ without changing the visual design. Triggers on requests to make a page responsive, fix mobile layout or breakpoints, adapt a landing or admin to phones / tablets / widescreens, and on symptoms alone — horizontal scroll, elements overflowing, text unreadable on mobile, sidebar broken on tablet, empty space on widescreen — even when the word "responsive" is never used.

3 Updated 3 days ago
sergeyizmailov