Responsive Design
This is your go-to reference for building layouts that work across devices without fighting CSS. It covers the practical stuff: mobile-first media queries with sensible breakpoints, flexbox for navigation and card layouts, CSS Grid with named areas for page structure, and container queries for component-level responsiveness. You'll find working examples of fluid typography with clamp(), auto-fit grids that reflow naturally, and responsive image techniques with srcset. The code samples are production-ready, not toy examples. If you're tired of pixel-perfect designs breaking on real devices or writing defensive CSS that fights itself, this gives you patterns that actually scale. It also covers the modern niceties like prefers-reduced-motion and hover detection so your interfaces feel native on both touch and pointer devices.
- skills.sh installs
- 513
- GitHub stars
- 63
- last updated
- Aug 21, 2026
Install
$ npx -y skills add manutej/luxor-claude-marketplace --skill responsive-design --agent claude-codeInstalls into .claude/skills of the current project.
Files
Responsive Design Skill
When to Use This Skill
Use this skill when you need to:
- Design and implement mobile-first responsive layouts
- Create fluid, adaptive interfaces that work across all device sizes
- Implement modern CSS layout techniques (Flexbox, Grid)
- Optimize images and media for different screen sizes
- Build accessible, touch-friendly interfaces
- Implement responsive typography and spacing systems
- Create container-based responsive components
- Optimize performance for mobile devices
- Ensure consistent user experience across devices
- Implement responsive navigation patterns
- Design responsive forms and data tables
- Create adaptive card layouts and galleries
- Build responsive dashboards and admin interfaces
Core Concepts
Mobile-First Philosophy
Mobile-first design means starting with mobile layout and progressively enhancing for larger screens.
Why Mobile-First?
- Forces focus on essential content and features
- Easier to scale up than scale down
- Better performance on mobile devices
- Aligns with modern usage patterns (mobile-first world)
- Simpler CSS with fewer overrides
Mobile-First Approach:
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/manutej/luxor-claude-marketplace
- Categories
- Frontend Development, Mobile Development, Design & UI/UX
- First seen
- Jun 3, 2026
More from manutej/luxor-claude-marketplace
All 66- Vuejs Development511
- Grpc Microservices510
- Hasura Graphql Engine506
- Asyncio Concurrency Patterns491
- Redis State Management490
- Rust Systems Programming488
- Api Gateway Patterns482
- Kafka Stream Processing482
- Apache Spark Data Processing481
- Pydantic476
- Kubernetes Orchestration474
- Nodejs Development474
- Nextjs Development473
- React Patterns473
- Pandas470
- React Development468
- Database Management Patterns467
- Angular Development463
- Tailwind Css463
- Javascript Fundamentals461
- Vector Database Management460
- Performance Benchmark Specialist457
- Pytest457
- Observability Monitoring456
Recommended
More Frontend Development
react-doctorposthog/posthogDiagnose and fix React codebase health issues. Use when reviewing React code, fixing performance problems, auditing security, or improving code quality.507skills.sh installs
frontend-mobile-security-xss-scansickn33/antigravity-awesome-skillsfrontend mobile security xss scan444skills.sh installs