Skip to main content Skills Marktplatz Entdecken und erkunden Sie KI-Skills, die von der Community erstellt wurden.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Prompt-Details anzeigen Ein direkter Befehl überspringt den Prüf-Prompt. Prüfen Sie die Quelle, bevor Sie ihn ausführen.
npx skills add https://github.com/0-CYBERDYNE-SYSTEMS-0/FarmFriend-Terminal-React --skill responsive-web-designDer Befehl bleibt in einer Zeile. Scrollen Sie horizontal, um ihn vor dem Kopieren vollständig zu prüfen.
Sie bevorzugen eine lokale Kopie? Laden Sie die Dateien herunter, die SkillsMP derzeit vorliegen.
ZIP herunterladen Herunterladen... Mehr aus diesem Repository 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.
Verwandte Berufe SOC
Basierend auf der SOC-Berufsklassifikation
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
