Skip to main content Skills Marketplace Descubre y explora habilidades de IA creadas por la comunidad.
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Mostrar detalles del prompt Un comando directo omite el prompt de revisión. Revisa el origen antes de ejecutarlo.
npx skills add https://github.com/0-CYBERDYNE-SYSTEMS-0/FarmFriend-Terminal-React --skill responsive-web-designEl comando permanece en una sola línea. Desplázate horizontalmente para revisarlo antes de copiarlo.
¿Prefieres una copia local? Descarga los archivos que SkillsMP tiene disponibles ahora.
Descargar Zip Descargando... Más de este repositorio applescript-automation-mastery Comprehensive AppleScript expertise for enterprise-grade macOS automation including multi-display management, URL scheme handling, deep linking, and complex workflow orchestration
The 'Awwwards Singularity' - Transforms websites into breathtaking digital experiences through cinematic motion, 3D graphics, and avant-garde typography. Eradicates boring, template-based web design.
Guides the agent through a short, repeatable debug loop: capture the failure, isolate the scope, draft a patch plan, and log the decision so the next agent can continue without rereading the entire repo.
Ocupaciones relacionadas SOC
Basado en la clasificación ocupacional SOC
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
