responsive-design
Implement modern responsive layouts using container queries, fluid typography, CSS Grid, and mobile-first breakpoint strategies. Use when building adaptive interfaces, implementing fluid layouts, or creating component-level responsive behavior.
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Implement modern responsive layouts using container queries, fluid typography, CSS Grid, and mobile-first breakpoint strategies. Use when building adaptive interfaces, implementing fluid layouts, or creating component-level responsive behavior.
How to use
Zainstaluj skill responsive-design w swoim projekcie agenta, dodając go do konfiguracji pluginów UI design.
Zdefiniuj bazową strategię breakpointów mobile-first — zacznij od stylów dla urządzeń mobilnych (poniżej 640px), a następnie dodaj media queries dla większych ekranów (640px, 768px, 1024px, 1280px, 1536px).
Implementuj container queries dla responsywności na poziomie komponentów, używając jednostek cqi, cqw i cqh, aby komponenty dostosowywały się niezależnie od viewportu.
Zastosuj fluid typography i spacing za pomocą CSS clamp() — ustaw minimalną wartość, preferowaną skalę (vw/vh) i maksymalną wartość, aby tekst i odstępy skalowały się płynnie.
Buduj layouty 2D za pomocą CSS Grid i Flexbox dla dystrybucji 1D, korzystając z intrinsic sizing opartego na zawartości i subgrid dla zagnieżdżonego wyrównania.
Integruj design tokeny z breakpointami i używaj feature queries (@supports) do obsługi przeglądarek, które nie wspierają container queries, zapewniając fallbacki dla starszych urządzeń.