How does it optimize mobile performance?

The skill implements techniques such as critical CSS extraction, lazy loading, and responsive image management using srcset to reduce bandwidth usage on mobile devices.

Does this skill support Tailwind CSS?

Yes, Responsive Architect includes specific patterns for Tailwind breakpoints and utility-first responsive configurations to streamline frontend development.

Can it help with touch interaction issues?

Yes, it provides implementation patterns for swipe gestures, elimination of tap delays, and ensuring touch targets meet the minimum 44x44px accessibility standard.

Does it support modern CSS Container Queries?

Absolutely. It specializes in component-driven responsiveness, allowing elements to adapt based on their parent container's width rather than relying solely on the viewport size.

What is the benefit of a mobile-first strategy?

A mobile-first approach ensures core functionality works on the most constrained devices first, using min-width media queries to progressively enhance the experience for larger screens.

Responsive Architect

Name: Responsive Architect
Author: deve1993

bydeve1993

•

디자인 도구

Builds high-performance, mobile-first responsive interfaces using modern CSS patterns, container queries, and fluid typography.

소개

Responsive Architect is a specialized Claude Code skill designed to help developers create fluid, high-performance web applications that scale seamlessly from mobile handsets to large desktops. It enforces a mobile-first strategy, utilizing advanced modern CSS features like container queries, clamp-based fluid typography, and complex grid layouts. By providing production-ready implementation patterns for touch interactions, optimized media, and progressive enhancement, this skill ensures that your user interfaces remain accessible, performant, and visually consistent across all device categories.

주요 기능

Performance-driven responsive image strategies and art direction
1 GitHub stars
Mobile-first responsive architecture and breakpoint systems
Fluid typography implementation using CSS clamp() and modular scales
Advanced layout systems using CSS Grid, Flexbox, and Container Queries
Touch-optimized interaction patterns and gesture support

사용 사례

Refactoring legacy desktop-only sites into modern, fluid responsive designs
Building cross-platform web applications that require a consistent mobile-first UX
Optimizing frontend performance for mobile networks and varying screen densities

소개

주요 기능

Performance-driven responsive image strategies and art direction
1 GitHub stars
Mobile-first responsive architecture and breakpoint systems
Fluid typography implementation using CSS clamp() and modular scales
Advanced layout systems using CSS Grid, Flexbox, and Container Queries
Touch-optimized interaction patterns and gesture support

사용 사례

Refactoring legacy desktop-only sites into modern, fluid responsive designs
Building cross-platform web applications that require a consistent mobile-first UX
Optimizing frontend performance for mobile networks and varying screen densities