phazurlabs/sumi
How every block and component transforms across breakpoints: container queries, fluid scaling, breakpoint transformation catalogs, responsive grids, and mobile-first CSS with production code.
npx skills add phazurlabs/sumi --skill responsive-block-patterns
Related neighbors and high-traction skills in the same topics — useful to compare before installing.
Use `LayoutBuilder`, `MediaQuery`, or `Expanded/Flexible` to create a layout that adapts to dif…
33.3K installsTest website responsiveness across viewport widths using browser automation. Resizes a single s…
1.6K installsDesign layouts and interactions that adapt across screen sizes and input methods. Use when one …
1.6K installsResponsive design with Container Queries, fluid typography, cqi/cqb units, subgrid, intrinsic l…
1.3K installsOther skills from phazurlabs/sumi · top by installs.
npx skills add phazurlabs/sumi
Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.
main
Files included with this skill beyond the listing page.
SKILL.md
4,585 B
SUMMARY.md
322 B
Responsive design is not resizing. It is deciding, per component, which of four things happens as space runs out: it reflows, it stacks, it transforms into a different component, or it disappears.
respond to its container, not the viewport, or it breaks the moment you put it in a sidebar.
clamp() handles the continuum; breakpoints handlethe genuine transformations. Six breakpoints usually means someone was using them to do clamp()'s job.
list is a decision about what to drop; specifying only "table" and "cards" leaves that decision to whoever implements it.
--bp-sm: 640px; /* large phone */
--bp-md: 768px; /* tablet portrait */
--bp-lg: 1024px; /* tablet landscape, small laptop */
--bp-xl: 1280px; /* desktop */
--bp-2xl:1536px; /* wide desktop */The clamp() master formula: clamp(min, preferred + relative, max), where preferred is in rem and relative is in vw.
| Need | Reference |
|---|---|
| What a given component does at each breakpoint | breakpoint-transformation-catalog.md |
| Adaptive card, morphing nav, table-to-cards | container-query-patterns.md |
| Container query syntax and units | container-query-patterns.md |
| Fluid type scale, fluid space scale | fluid-scaling-system.md |
The clamp() formula and when it beats breakpoints |
fluid-scaling-system.md |
| Responsive typography, images, tables, nav as code | responsive-component-patterns.md |
| Column progressions, collapsing sidebar, holy grail | responsive-layout-recipes.md |
| File | Covers | Lines |
|---|---|---|
references/responsive-component-patterns.md |
component-level responsive code | 1878 |
references/container-query-patterns.md |
container query recipes | 1728 |
references/responsive-layout-recipes.md |
whole-layout recipes | 1524 |
references/fluid-scaling-system.md |
clamp(), fluid scales | 842 |
references/breakpoint-transformation-catalog.md |
60+ components x breakpoint | 707 |
For what each component does at each breakpoint — 60+ components across navigation, content, input and layout with their transformation type: read references/breakpoint-transformation-catalog.md.
For container queries — fundamentals plus adaptive cards, morphing navigation, table-to-card transformation and the rest: read references/container-query-patterns.md.
For fluid scaling — the clamp() master formula, complete fluid type and space scales, and fluid padding: read references/fluid-scaling-system.md.
For component-level responsive code — responsive typography, images, tables, navigation and the other patterns as production CSS: read references/responsive-component-patterns.md.
For whole-layout recipes — column progressions, collapsing sidebars, holy grail and the rest: read references/responsive-layout-recipes.md.
For odds and ends — the patterns that had no home in the files above when this skill was converted to a router: read references/responsive-supplementary.md.