القائمة
Mobile-first responsive web design with CSS Grid/Flexbox, breakpoints (320px-1440px+), and cross-device optimization
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/Hack23/riksdagsmonitor --skill responsive-designيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
Master GitHub Agentic Workflows authoring - markdown syntax, natural language instructions, YAML frontmatter, compilation, and workflow patterns
Comprehensive expertise in GitHub Agentic Workflows (v0.68.1) — AI-powered repository automation with five-layer security, safe outputs, MCP tools, and Continuous AI patterns
Comprehensive guide for MCP (Model Context Protocol) server setup, transport protocols, configuration validation, lifecycle management, tool discovery, and error handling patterns
استنادا إلى تصنيف SOC المهني
عرض SKILL.md
| name | responsive-design |
| description | Mobile-first responsive web design with CSS Grid/Flexbox, breakpoints (320px-1440px+), and cross-device optimization |
| license | Apache-2.0 |
Apply the AI FIRST principle: never accept first-pass quality. Minimum 2 iterations. Read all output, improve every section. No shortcuts.
Create fluid, adaptable web experiences that work seamlessly across all devices from smartphones (320px) to large desktops (1440px+) using modern CSS techniques and mobile-first methodology.
clamp() for scalable text across viewportsRiksdagsmonitor uses standard breakpoints aligned with common devices:
/* Default: Mobile-first (320px - 767px) */
/* Base styles for smallest screens */
/* Tablet: Medium screens */
@media (min-width: ) {
}
(: ) {
}
(: ) {
}
(: ) {
: ;
: auto;
}
/* Scalable headings without media queries */
h1 {
font-size: clamp(2rem, 5vw + 1rem, 4rem);
/* Min: 32px, Preferred: 5vw + 16px, Max: 64px */
}
h2 {
font-size: clamp(1.5rem, 4vw + 0.5rem, 3rem);
}
body {
font-size: clamp(1rem, 2vw, 1.125rem);
line-height: 1.6;
}
/* Auto-responsive grid without media queries */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
gap: 1.5rem;
}
/* Dashboard layout with sidebar */
.dashboard {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
@media (min-width: 1024px) {
.dashboard {
grid-template-columns: 250px 1fr;
}
}
/* Mobile: Vertical stack */
nav ul {
display: flex;
flex-direction: column;
gap: 1rem;
}
/* Desktop: Horizontal bar */
@media (min-width: 768px) {
nav ul {
flex-direction: row;
justify-content: space-between;
}
}
/* Minimum 44x44px for touch targets */
button,
a.button,
.nav-link {
min-height: 44px;
min-width: 44px;
padding: 0.75rem 1.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
}
<!-- Picture element for art direction -->
<picture>
<source media="(min-width: 1024px)" srcset="hero-desktop.jpg">
<source media="(min-width: 768px)" srcset="hero-tablet.jpg">
<img src="hero-mobile.jpg" alt="Riksdag building" loading="lazy">
</picture>
<!-- Responsive width -->
<img src="chart.png" alt="Voting chart" style="width: 100%; height: auto;">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
/* Container-based responsiveness */
.card-container {
container-type: inline-size;
container-name: card;
}
@container card (min-width: 400px) {
.card {
display: grid;
grid-template-columns: 150px 1fr;
}
}
/* Mobile: Single column */
.dashboard {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
padding: 1rem;
}
.widget {
padding: 1rem;
background: var(--card-bg);
border-radius: 8px;
}
/* Tablet: 2 columns */
@media (min-width: 768px) {
.dashboard {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
padding: 1.5rem;
}
}
/* Desktop: 3 columns with sidebar */
@media (min-width: 1024px) {
.dashboard {
grid-template-columns: 250px repeat(2, 1fr);
gap: 2rem;
padding: 2rem;
}
.sidebar {
grid-column: 1;
grid-row: 1 / -1;
}
}
:root {
/* Fluid spacing */
--space-xs: clamp(0.5rem, 1vw, 0.75rem);
--space-sm: clamp(0.75rem, 2vw, 1rem);
--space-md: clamp(1rem, 3vw, 1.5rem);
--space-lg: clamp(1.5rem, 4vw, 2rem);
--space-xl: clamp(2rem, 5vw, 3rem);
/* Fluid font sizes */
--text-sm: clamp(0.875rem, 1.5vw, 1rem);
--text-base: clamp(1rem, 2vw, 1.125rem);
--text-lg: clamp(1.125rem, 2.5vw, 1.25rem);
--text-xl: clamp(1.25rem, 3vw, 1.5rem);
--text-2xl: clamp(1.5rem, 4vw, 2rem);
--text-3xl: clamp(2rem, 5vw, 3rem);
}
body {
font-size: var(--text-base);
padding: var(--space-md);
}
h1 {
font-size: var(--text-3xl);
margin-bottom: var(--space-lg);
}
<!-- Mobile-first navigation -->
<nav class="main-nav">
<button class="menu-toggle" aria-label="Toggle menu">☰</button>
<ul class="nav-list">
<li><a href="#overview">Overview</a></li>
<li><a href="#parties">Parties</a></li>
<li><a href="#mps">MPs</a></li>
</ul>
</nav>
<style>
/* Mobile: Hidden menu, toggle button */
.menu-toggle {
display: block;
min-width: 44px;
min-height: 44px;
}
.nav-list {
display: none;
flex-direction: column;
gap: 0.5rem;
}
.nav-list.open {
display: flex;
}
/* Desktop: Always visible, horizontal */
@media (min-width: 768px) {
.menu-toggle {
display: none;
}
.nav-list {
display: flex;
flex-direction: row;
gap: 2rem;
}
}
</style>
/* ❌ BAD: Desktop-first, overcomplicated mobile overrides */
.widget {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
padding: 2rem;
}
@media (max-width: 1023px) {
.widget {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
padding: 1.5rem;
}
}
@media (max-width: 767px) {
.widget {
grid-template-columns: 1fr;
gap: 1rem;
padding: 1rem;
}
}
/* ✅ GOOD: Mobile-first, progressive enhancement */
.widget {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
padding: 1rem;
}
@media (min-width: 768px) {
.widget {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
padding: 1.5rem;
}
}
@media (min-width: 1024px) {
.widget {
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
padding: 2rem;
}
}
/* ❌ BAD: Fixed sizes don't adapt */
h1 {
font-size: 48px;
}
.container {
width: 1200px;
}
/* ✅ GOOD: Fluid, adaptable sizes */
h1 {
font-size: clamp(2rem, 5vw + 1rem, 4rem);
}
.container {
width: min(1200px, 100% - 2rem);
margin-inline: auto;
}
// Test key breakpoints in Chrome DevTools
const breakpoints = [
{ width: 320, height: 568, device: 'iPhone SE' },
{ width: 375, height: 667, device: 'iPhone 8' },
{ width: 768, height: 1024, device: 'iPad' },
{ width: 1024, height: 768, device: 'iPad Pro' },
{ width: 1920, height: 1080, device: 'Desktop HD' }
];
// test/responsive.spec.js
const { test, expect } = require('@playwright/test');
test('Responsive layout adapts correctly', async ({ page }) => {
await page.goto('http://localhost:8080/');
// Mobile
await page.setViewportSize({ width: 375, height: 667 });
await page.screenshot({ path: 'screenshots/mobile.png' });
// Tablet
await page.setViewportSize({ width: 768, height: 1024 });
await page.screenshot({ path: 'screenshots/tablet.png' });
// Desktop
await page.setViewportSize({ width: 1920, height: 1080 });
await page.screenshot({ path: 'screenshots/desktop.png' });
});
Version: 1.0
Last Updated: 2026-02-06
Maintained by: Hack23 AB