# Responsive design · Tech watch

[Canonical source](<https://sebastien.rigaux.be/en/tech-watch/tags/responsive-design>)

Adapting interfaces to screen dimensions and interaction modes.

## [Taste Skill gives coding agents design rules and browser checks](<https://sebastien.rigaux.be/en/tech-watch/links/taste-skill-gives-coding-agents-design-rules-and-browser-checks>)

Taste Skill gives coding agents a system for building less generic company websites: palettes, hero layouts, UI fragments and real photographs, with art direction tailored to the type of business. The repository offers Claude Code and Codex integrations, plus installation through `npx skills`.

Its distinctive feature is automated checking in headless Chrome: pages render at four widths, from 390 to 1440 px, and are checked for empty visuals, contrast, alignment and images missing on slow networks. WebGL and scroll effects are limited to tech, gaming and software pages, with static fallbacks for phones and reduced motion.

2026-11-06 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/taste-skill-gives-coding-agents-design-rules-and-browser-checks.md>) · [Original resource](<https://github.com/Leonxlnx/taste-skill>)

## [Chrome: auto-sizing iframes to their content with CSS](<https://sebastien.rigaux.be/en/tech-watch/links/chrome-auto-sizing-iframes-to-their-content-with-css>)

Chrome 154 introduces the `frame-sizing: content-height` CSS property, letting iframes automatically match their content’s height without scripts or message passing. This requires the embedded page to opt in with a meta tag and explicitly allow the parent domain, so adoption depends on both sides cooperating. The article details practical use cases (payments, widgets, dynamic forms), compatibility constraints, and best practices to avoid information leaks or layout shifts.

2026-10-16 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/chrome-auto-sizing-iframes-to-their-content-with-css.md>) · [Original resource](<https://alfy.blog/2026/10/09/iframe-that-finally-fit-their-content.html>)

## [Use CSS \`clamp()\` through Tailwind Clamp](<https://sebastien.rigaux.be/en/tech-watch/links/use-css-clamp-through-tailwind-clamp>)

Tailwind Clamp exposes CSS `clamp()` values as utility classes. The plugin helps create fluid size or spacing scales without multiplying breakpoints.

2026-03-26 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/use-css-clamp-through-tailwind-clamp.md>) · [Original resource](<https://github.com/nicolas-cusan/tailwind-clamp>)

## [Build fluid interfaces with Fluid Tailwind CSS](<https://sebastien.rigaux.be/en/tech-watch/links/build-fluid-interfaces-with-fluid-tailwind-css>)

This plugin adds Tailwind CSS classes for fluid values across viewport sizes. It keeps responsive typography and spacing adjustments within the project’s utility-class vocabulary.

2026-03-26 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/build-fluid-interfaces-with-fluid-tailwind-css.md>) · [Original resource](<https://github.com/nguyenviet02/fluid-tailwindcss>)

## [Utopia: build fluid type and spacing scales](<https://sebastien.rigaux.be/en/tech-watch/links/utopia-build-fluid-type-and-spacing-scales>)

Utopia defines scales for small and large screens and lets the browser interpolate between them. The approach helps build a coherent type system with fewer breakpoints.

2024-10-15 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/utopia-build-fluid-type-and-spacing-scales.md>) · [Original resource](<https://utopia.fyi/>)