القائمة
Master modern responsive design techniques — container queries, fluid typography with clamp(), CSS Grid, Flexbox patterns, and mobile-first strategies for adaptive interfaces.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Interact with Hermes Agent's OpenAI-compatible API for multi-model conversations, skill management, and scheduled tasks
Generate and manage Docker Compose stacks via the better-openclaw API
Deploy and manage a self-hosted Tailscale control server (Headscale) for zero-trust private networking and secure access to your stack.
A specialized skill workflow instructing you to use Serper (for discovery) and any configured Browser Automation provider (Hyperbrowser, Browseruse, Lightpanda, or Browserless) to scrape official documentation and teach yourself new technical skills.
Instructions for utilizing the HexStrike AI MCP Server for automated pentesting and security research.
Instructions for managing the PentAGI autonomous AI agent system for complex penetration testing tasks.
| name | responsive-design |
| description | Master modern responsive design techniques — container queries, fluid typography with clamp(), CSS Grid, Flexbox patterns, and mobile-first strategies for adaptive interfaces. |
| metadata | {"openclaw":{"emoji":"📱","source":"https://github.com/wshobson/agents"}} |
/* Base: mobile (0-639px) */
/* sm: 640px */ @media (min-width: 640px) { }
/* md: 768px */ @media (min-width: 768px) { }
/* lg: 1024px */ @media (min-width: 1024px) { }
/* xl: 1280px */ @media (min-width: 1280px) { }
/* 2xl: 1536px */ @media (min-width: 1536px) { }
h1 { font-size: clamp(1.75rem, 1rem + 3vw, 3.5rem); }
h2 { font-size: clamp(1.25rem, 0.75rem + 2vw, 2.25rem); }
p { font-size: clamp(1rem, 0.875rem + 0.5vw, 1.125rem); }
.card-container { container-type: inline-size; }
@container (min-width: 400px) {
.card { display: grid; grid-template-columns: 1fr 2fr; }
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
gap: 1.5rem;
}
srcset, sizes, and object-fit: coverclamp() for fluid properties instead of multiple breakpoints.auto-fit/minmax for self-adapting layouts.