Skip to main content Skills Marketplace Discover and explore AI skills built by the community.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Show prompt details A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/0-CYBERDYNE-SYSTEMS-0/FarmFriend-Terminal-React --skill responsive-web-designThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Download Zip Downloading... More from this repository
Related occupations SOC
Based on SOC occupation classification
name responsive_web_design slug responsive_web_design summary Mobile-first responsive design with modern CSS Grid, Flexbox, and accessibility description Mobile-first responsive design with modern CSS Grid, Flexbox, and accessibility version 1.0 author FF-Terminal priority medium triggers ["responsive","mobile","mobile-first","cross-device","tablet","phone","desktop","layout","grid","flexbox","web_design","layout_design","mobile_optimization","responsive.*design","mobile.*friendly","cross.*device","adapt.*layout"] category design dependencies ["frontend_design"] config {"breakpoints":{"mobile":640,"tablet":768,"desktop":1024,"wide":1280},"layout_strategies":["mobile_first","desktop_first","progressive_enhancement","graceful_degradation"],"responsive_units":["viewport","percentage","em","rem","vw/vh"]}
Responsive Web Design Skill Instructions
You are an expert responsive web designer who creates mobile-first, cross-device compatible interfaces. When this skill is triggered, apply modern responsive design patterns:
Mobile-First Philosophy
1. Progressive Enhancement
Start with mobile design (320px+)
Enhance for tablet (768px+)
Optimize for desktop (1024px+)
Add extras for wide screens (1280px+)
2. Breakpoint Strategy
:root {
--break-mobile : 320px ;
--break-tablet : 768px ;
--break-desktop : 1024px ;
--break-wide : 1280px ;
}
.container {
padding : var (--space-3 );
max-width : 100% ;
}
@media (min-width : 768px ) {
.container {
padding : var (--space-4 );
max-width : 720px ;
margin : 0 auto;
}
}
@media (min-width : 1024px ) {
.container {
padding : var (--space-6 );
max-width : 960px ;
}
}
@media (min-width
1280px
.container
padding
var
8
max-width
1200px
Responsive Layout Systems
1. CSS Grid for Complex Layouts
.responsive-grid {
display : grid;
gap : var (--space-4 );
grid-template-columns : 1 fr;
}
@media (min-width : 768px ) {
.responsive-grid {
grid-template-columns : repeat (2 , 1 fr);
}
}
@media (min-width : 1024px ) {
.responsive-grid {
grid-template-columns : repeat (3 , 1 fr);
}
}
@media (min-width : 1280px ) {
.responsive-grid {
grid-template-columns : repeat (4 , 1 fr);
}
}
.auto-grid {
display : grid;
grid-template-columns : repeat (auto-fit, minmax (280px , 1 fr));
gap : var (--space-4 );
}
.feature-grid {
display : grid;
grid-template-columns : repeat (auto-fill, minmax (250px , 1 fr));
gap : var (--space-4 );
}
2. Flexbox for Component Layouts
.flex-container {
display : flex;
flex-direction : column;
gap : var (--space-3 );
}
@media (min-width : 768px ) {
.flex-container {
flex-direction : row;
flex-wrap : wrap;
}
}
.flex-cards {
display : flex;
flex-direction : column;
gap : var (--space-4 );
}
.flex-card {
flex : 1 ;
}
@media (min-width : 768px ) {
.flex-cards {
flex-direction : row;
}
.flex-card {
flex : 1 1 45% ;
}
}
@media (min-width : 1024px ) {
.flex-card {
flex : 1 1 30% ;
}
}
3. Container Queries (Modern)
.component-container {
container-type : inline-size;
}
.adaptive-card {
padding : var (--space-3 );
}
@container (min-width : 400px ) {
.adaptive-card {
padding : var (--space-4 );
display : grid;
grid-template-columns : 1 fr 2 fr;
gap : var (--space-3 );
}
}
@container (min-width : 600px ) {
.adaptive-card {
padding : var (--space-6 );
grid-template-columns : 1 fr 3 fr 1 fr;
}
}
Responsive Typography
1. Fluid Typography Scale
:root {
--font-fluid-sm : clamp (0.875rem , 0.875rem + 0.25vw , 1rem );
--font-fluid-base : clamp (1rem , 1rem + 0.25vw , 1.125rem );
--font-fluid-lg : clamp (1.125rem , 1.125rem + 0.5vw , 1.5rem );
--font-fluid-xl : clamp (1.5rem , 1.5rem + 1vw , 2.25rem );
--font-fluid-2xl : clamp (2.25rem , 2.25rem + 1.5vw , 3rem );
--font-fluid-3xl : clamp (3rem , 3rem + 2vw , 4rem );
}
h1 { font-size : var (--font-fluid-3 xl); line-height : 1.2 ; }
h2 { font-size : var (--font-fluid-2 xl); line-height : 1.3 ; }
h3 { font-size : var (--font-fluid-xl); line-height : 1.4 ; }
h4 { font-size : var (--font-fluid-lg); line-height : 1.5 ; }
p { font-size : var (--font-fluid-base); line-height : 1.6 ; }
small { font-size : var (--font-fluid-sm); line-height : 1.6 ; }
2. Responsive Spacing
.responsive-section {
padding : var (--space-4 );
margin-bottom : var (--space-6 );
}
@media (min-width : 768px ) {
.responsive-section {
padding : var (--space-6 );
margin-bottom : var (--space-8 );
}
}
@media (min-width : 1024px ) {
.responsive-section {
padding : var (--space-8 );
margin-bottom : var (--space-12 );
}
}
.responsive-container {
padding : var (--space-3 );
}
@media (min-width : 768px ) {
.responsive-container {
padding : var (--space-4 ) var (--space-6 );
}
}
@media (min-width : 1024px ) {
.responsive-container {
padding : var (--space-6 ) var (--space-8 );
}
}
Touch and Mobile Optimization
1. Touch-Friendly Targets
.touch-target {
min-height : 44px ;
min-width : 44px ;
padding : var (--space-2 ) var (--space-3 );
}
.mobile-button {
padding : var (--space-3 ) var (--space-4 );
font-size : var (--font-lg);
min-height : 48px ;
}
.mobile-link {
display : block;
padding : var (--space-3 );
margin : var (--space-2 ) 0 ;
}
.mobile-input {
font-size : 16px ;
padding : var (--space-3 );
min-height : 48px ;
border-radius : var (--space-2 );
}
2. Mobile Navigation Patterns
.mobile-nav {
display : block;
}
.desktop-nav {
display : none;
}
@media (min-width : 768px ) {
.mobile-nav { display : none; }
.desktop-nav { display : flex; }
}
.nav-drawer {
position : fixed;
top : 0 ;
left : -100% ;
width : 280px ;
height : 100vh ;
background : white;
z-index : 1000 ;
transition : left 0.3s ease;
}
.nav-drawer .open {
left : 0 ;
}
.nav-drawer-overlay {
position : fixed;
top : 0 ;
left : 0 ;
right : 0 ;
bottom : 0 ;
background : rgba (0 , 0 , 0 , 0.5 );
z-index : 999 ;
opacity : 0 ;
visibility : hidden;
transition : opacity 0.3s ease, visibility 0.3s ease;
}
.nav-drawer-overlay .open {
opacity : 1 ;
visibility : visible;
}
3. Mobile-Specific Optimizations
<meta name="viewport" content ="width =device-width , initial-scale =1.0 ">
body {
overflow-x : hidden;
-webkit-text-size-adjust : 100% ;
}
.responsive-image {
max-width : 100% ;
height : auto;
}
.mobile-table {
display : block;
width : 100% ;
overflow-x : auto;
}
@media (min-width : 768px ) {
.mobile-table {
display : table;
}
}
Performance and Optimization
1. Responsive Images
<picture >
<source media ="(min-width: 1024px)" srcset ="hero-large.webp" >
<source media ="(min-width: 768px)" srcset ="hero-medium.webp" >
<img src ="hero-small.webp" alt ="Hero image" loading ="lazy" >
</picture >
<img src ="image-1x.webp"
srcset ="image-1x.webp 1x, image-2x.webp 2x"
alt ="Responsive image" loading ="lazy" >
<style >
.hero-image {
background-image : url ('hero-small.webp' );
}
@media (min-width : 768px ) {
.hero-image {
background-image : url ('hero-medium.webp' );
}
}
@media (min-width : 1024px ) {
.hero-image {
background-image : url ('hero-large.webp' );
}
}
</style >
2. CSS Optimization for Responsive Design
@media (min-width : 768px ) and (max-width : 1023px ) {
}
@container (min-width : 300px ) and (max-width : 600px ) {
}
@media (prefers-reduced-motion : reduce), (max-width : 768px ) {
.animated {
animation : none;
transition : none;
}
}
@media (prefers-color-scheme : dark) {
.responsive-component {
background : var (--color-neutral-dark);
color : var (--color-text-dark);
}
}
Responsive Component Patterns
1. Responsive Card Grid <div class ="responsive-cards" >
<article class ="card" >
<img src ="image.jpg" alt ="Card image" loading ="lazy" >
<h3 > Card Title</h3 >
<p > Card content...</p >
</article >
</div >
<style >
.responsive-cards {
display : grid;
gap : var (--space-4 );
grid-template-columns : repeat (auto-fit, minmax (280px , 1 fr));
}
.card {
background : white;
border-radius : var (--space-2 );
box-shadow : 0 2px 8px rgba (0 ,0 ,0 ,0.1 );
overflow : hidden;
transition : transform 0.2s ease;
}
.card :hover {
transform : translateY (-4px );
box-shadow : 0 8px 25px rgba (0 ,0 ,0 ,0.15 );
}
.card img {
width : 100% ;
height : 200px ;
object-fit : cover;
}
.card h3 {
padding : var (--space-3 );
margin : 0 ;
font-size : var (--font-lg);
}
.card p {
padding : 0 var (--space-3 ) var (--space-3 );
margin : 0 ;
color : var (--color-secondary);
}
</style >
2. Responsive Sidebar Layout <div class ="responsive-layout" >
<aside class ="sidebar" >
<nav class ="sidebar-nav" >
</nav >
</aside >
<main class ="main-content" >
</main >
</div >
<style >
.responsive-layout {
display : flex;
flex-direction : column;
min-height : 100vh ;
}
.sidebar {
order : 2 ;
width : 100% ;
background : var (--color-neutral);
padding : var (--space-4 );
}
.main-content {
order : 1 ;
flex : 1 ;
padding : var (--space-4 );
}
@media (min-width : 768px ) {
.responsive-layout {
flex-direction : row;
}
.sidebar {
order : 1 ;
width : 250px ;
min-height : 100vh ;
}
.main-content {
order : 2 ;
}
}
@media (min-width : 1024px ) {
.sidebar {
width : 300px ;
}
}
</style >
3. Responsive Header <header class ="responsive-header" >
<div class ="header-brand" >
<img src ="logo.svg" alt ="Logo" class ="logo" >
<span class ="brand-name" > Brand</span >
</div >
<button class ="mobile-menu-toggle" aria-label ="Toggle menu" >
<span > </span >
<span > </span >
<span > </span >
</button >
<nav class ="header-nav" aria-label ="Main navigation" >
<ul >
<li > <a href ="#home" > Home</a > </li >
<li > <a href ="#about" > About</a > </li >
<li > <a href ="#services" > Services</a > </li >
<li > <a href ="#contact" > Contact</a > </li >
</ul >
</nav >
</header >
<style >
.responsive-header {
display : flex;
justify-content : space-between;
align-items : center;
padding : var (--space-3 );
background : white;
border-bottom : 1px solid var (--color-border);
}
.header-brand {
display : flex;
align-items : center;
gap : var (--space-2 );
}
.logo {
width : 32px ;
height : 32px ;
}
.brand-name {
font-size : var (--font-lg);
font-weight : 700 ;
color : var (--color-primary);
}
.mobile-menu-toggle {
display : flex;
flex-direction : column;
justify-content : space-around;
width : 32px ;
height : 32px ;
background : transparent;
border : none;
cursor : pointer;
}
.mobile-menu-toggle span {
width : 24px ;
height : 2px ;
background : var (--color-primary);
transition : all </style >
Testing and Debugging
1. Responsive Testing Approach
function addViewportIndicator (if (window .location .hostname === 'localhost' ) {
const indicator = document .createElement ('div' );
indicator.style .cssText = `
position: fixed;
top: 10px;
right: 10px;
background: rgba(0,0,0,0.8);
color: white;
padding: 8px 12px;
border-radius: 4px;
font-size: 12px;
z-index: 9999;
font-family: monospace;
` ;
const updateIndicator = (textContent = `${window .innerWidth} x${window .innerHeight} ` ;
};
updateIndicator ();
window .addEventListener ('resize' , updateIndicator);
document .body .appendChild (indicator);
}
}
function getDeviceType (const width = window .innerWidth ;
if (width < 768 ) return 'mobile' ;
if (width < 1024 ) return 'tablet' ;
return 'desktop' ;
}
2. Common Responsive Issues and Solutions
.responsive-container {
max-width : 100% ;
overflow-x : hidden;
box-sizing : border-box;
}
.ios-fix {
padding-bottom : env (safe-area-inset-bottom);
padding-left : env (safe-area-inset-left);
padding-right : env (safe-area-inset-right);
}
.text-truncate {
overflow : hidden;
text-overflow : ellipsis;
white-space : nowrap;
}
.text-responsive {
word-wrap : break-word;
overflow-wrap : break-word;
hyphens : auto;
}
Implementation Strategy When creating responsive designs:
Mobile-First : Start with mobile design and progressively enhanceTouch-Optimized : Ensure minimum 44px touch targetsPerformance : Optimize images and CSS for each breakpointAccessibility : Maintain accessibility across all device sizesTesting : Test on actual devices, not just browser resizingProgressive Enhancement : Core functionality works everywhereFlexible Units : Use rem, em, %, vw, vh for scalabilityModern CSS : Leverage Grid, Flexbox, and Container Queries Create responsive interfaces that provide optimal user experience across all devices and screen sizes.
0.3s
.header-nav
display
@media
min-width
768px
.mobile-menu-toggle
display
.header-nav
display
align-items
.header-nav
ul
display
list-style
margin
0
padding
0
gap
var
4
.header-nav
a
padding
var
2
var
3
color
var
text-decoration
border-radius
var
1
transition
0.2s
.header-nav
a
:hover
background
var
color
