{"enrichment":{"faq":[{"a":"Responsive Design teaches you to build websites that adapt seamlessly across all screen sizes using mobile-first principles and modern CSS techniques. You'll learn to use flexbox and grid for fluid layouts, implement media queries for breakpoint strategies, and apply responsive image techniques. The skill covers container-based design patterns that ensure consistent user experiences from mobile phones to desktop computers.","q":"How do I make responsive websites that work across devices?"},{"a":"Responsive Design covers modern CSS approaches including flexbox and grid systems for creating adaptive layouts. You'll understand media queries to target specific screen sizes and breakpoints, fluid typography and spacing that scale with viewport dimensions, and container-based design patterns. These techniques work together to let your layouts respond intelligently to different devices without requiring separate versions of your site.","q":"What CSS techniques are essential for responsive layouts?"},{"a":"Responsive Design emphasizes mobile-first development as a core best practice\u2014designing for small screens first, then progressively enhancing for larger devices. Key practices include defining strategic breakpoints where your layout adapts, using fluid grids and flexible images, optimizing performance for mobile users, and testing across real devices. The skill teaches how these practices create better user experiences and maintainable code.","q":"What are responsive design best practices I should follow?"},{"a":"Responsive Design shows how breakpoints and fluid layouts form the foundation of adaptive design. Breakpoints are specific screen widths where your layout transforms\u2014typically mobile, tablet, and desktop sizes. Between breakpoints, fluid layouts use relative units and flexible containers to smoothly scale content. This combination ensures your website looks polished at any screen size, not just at exact breakpoint widths.","q":"How do responsive breakpoints and fluid layouts work together?"},{"a":"Responsive Design teaches mobile-first as a strategy where you design and code for mobile devices first, then add enhancements for larger screens. This approach prioritizes essential content and performance on constrained devices, then progressively adds complexity for tablets and desktops. Mobile-first design often results in better performance, clearer information hierarchy, and more maintainable CSS since you build up rather than strip down.","q":"What is mobile-first responsive design and why use it?"},{"a":"Responsive Design covers multiple adaptation strategies including flexible grids that use percentages instead of fixed pixels, responsive images that scale appropriately, and media queries that apply different CSS rules at specific breakpoints. You'll learn container-based patterns that respond to available space, fluid typography that scales with viewport, and touch-friendly interface adjustments for mobile. These techniques work together to create designs that truly adapt rather than simply shrink.","q":"How do I adapt website designs for different screen sizes?"}],"shadow_tags":["mobile-first-approach","layout-adaptation","cross-device-compatibility","fluid-grids","viewport-optimization","breakpoint-strategy","device-agnostic-design","screen-scaling"],"summary_rewrite":"Learn to build websites that adapt seamlessly across devices using mobile-first principles, modern CSS techniques like flexbox and grid, and responsive image strategies. This skill covers breakpoint strategies, fluid layouts, media queries, and container-based design patterns to ensure consistent experiences from mobile to desktop."},"gist":{"api_url":"https://skillfed.io/api/skills/manutej/luxor-claude-marketplace/responsive-design.json","as_of":"2026-06-13","description":"Responsive Design teaches you to create websites that work perfectly on every screen size using mobile-first.","install":{"manual":["git clone https://github.com/manutej/luxor-claude-marketplace","cp -r luxor-claude-marketplace ~/.claude/skills/responsive-design"],"primary":"npx skillfed install manutej/luxor-claude-marketplace/responsive-design","version":"e598b2cf"},"kind":"skill","mirror_url":"https://skillfed.io/manutej/luxor-claude-marketplace/responsive-design.md","similar":[{"id":"patricio0312rev/skills/responsive-design-system","name":"responsive-design-system","publisher":"patricio0312rev/skills","url":"https://skillfed.io/patricio0312rev/skills/responsive-design-system"},{"id":"OneWave-AI/claude-skills/responsive-layout-builder","name":"responsive-layout-builder","publisher":"OneWave-AI/claude-skills","url":"https://skillfed.io/OneWave-AI/claude-skills/responsive-layout-builder"},{"id":"daffy0208/ai-dev-standards/visual-designer","name":"Visual Designer","publisher":"daffy0208/ai-dev-standards","url":"https://skillfed.io/daffy0208/ai-dev-standards/visual-designer"}],"title":"Responsive Design by manutej: Learn how to design \u2014 SkillFed","use":{"when":["Responsive Design covers modern CSS approaches including flexbox and grid systems for creating adaptive layouts.","Responsive Design emphasizes mobile-first development as a core best practice\u2014designing for small screens first."]},"what":{"lead":"Responsive Design teaches you to create websites that work perfectly on every screen size using mobile-first techniques and modern CSS.","rest":"Learn to build websites that adapt seamlessly across devices using mobile-first principles, modern CSS techniques like flexbox and grid, and responsive image strategies. This skill covers breakpoint strategies, fluid layouts, media queries, and container-based design patterns to ensure consistent experiences from mobile to desktop."}},"id":"manutej/luxor-claude-marketplace/responsive-design","install":{"mode":"external","repo":"https://github.com/manutej/luxor-claude-marketplace"},"links":{"html":"https://skillfed.io/manutej/luxor-claude-marketplace/responsive-design","md":"https://skillfed.io/manutej/luxor-claude-marketplace/responsive-design.md","repo":"https://github.com/manutej/luxor-claude-marketplace"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":15,"language":"Shell","last_updated":"2026-06-13","license":null,"name":"Responsive Design","publisher":"manutej","stars":61},"relations":{"similar":[{"id":"secondsky/claude-skills/responsive-web-design"},{"id":"EliasOulkadi/shokunin/responsive-engine"},{"id":"am-will/codex-skills/frontend-responsive-ui"},{"id":"patricio0312rev/skills/responsive-design-system"},{"id":"OneWave-AI/claude-skills/responsive-layout-builder"},{"id":"daffy0208/ai-dev-standards/visual-designer"},{"id":"ancoleman/ai-design-components/designing-layouts"},{"id":"jamesrochabrun/skills/frontend-designer"},{"id":"hoodini/ai-agents-skills/mobile-responsiveness"},{"id":"Mindrally/skills/responsive-design"}]},"slug":{"owner":"manutej","repo":"luxor-claude-marketplace","skill":"responsive-design"},"version":"e598b2cf"}