npx skills add https://github.com/secondsky/claude-skills
aj-geddes/useful-ai-prompts
responsive-web-design
Create responsive layouts using CSS Grid, Flexbox, media queries, and mobile-first design. Use when building adaptive interfaces that work across all devices.
Installation
$
npx skills add aj-geddes/useful-ai-prompts --skill responsive-web-design
Similar popular skills
Related neighbors and high-traction skills in the same topics — useful to compare before installing.
frontend-design
Same topic
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existi…
866.4K installs
agent-browser
Same topic
vercel-labs/agent-browser
Browser automation CLI for AI agents. Use when the user needs to interact with websites, includ…
810.4K installs
vercel-react-best-practices
Same topic
vercel-labs/agent-skills
697.8K installs
web-design-guidelines
Same topic
vercel-labs/agent-skills
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "chec…
617.3K installs
microsoft-foundry
Same topic
microsoft/azure-skills
Build, deploy, evaluate, optimize, fine-tune, and manage Microsoft Foundry agents, models, and …
576.5K installs
azure-diagnostics
Same topic
microsoft/azure-skills
Debug Azure production issues on Azure using AppLens, Azure Monitor, resource health, and safe …
568.9K installsAlso in this package
Other skills from aj-geddes/useful-ai-prompts · top by installs.
npx skills add aj-geddes/useful-ai-prompts
More details
Agent compatibility
Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.
Claude Code
Not declared
Cursor
Not declared
Codex
Not declared
GitHub Copilot
Not declared
Windsurf
Not declared
Gemini CLI
Not declared
Cline
Not declared
OpenCode
Not declared
Also listed on
Alternate registries and mirrors of this skill.
Repository health
Stars
334
License
LICENSE
Default branch
main
Open issues
1
Status
Active
Package contents
Files included with this skill beyond the listing page.
-
skill md
SKILL.md2,168 B -
docs
SUMMARY.md2,093 B
History
- First seen on skills.sh
- First recorded snapshot · 1,034 installs
SKILL.md
Responsive Web Design
Table of Contents
- [Overview](#overview)
- [When to Use](#when-to-use)
- [Quick Start](#quick-start)
- [Reference Guides](#reference-guides)
- [Best Practices](#best-practices)
Overview
Build mobile-first responsive interfaces using modern CSS techniques including Flexbox, Grid, and media queries to create adaptable user experiences.
When to Use
- Multi-device applications
- Mobile-first development
- Accessible layouts
- Flexible UI systems
- Cross-browser compatibility
Quick Start
Minimal working example:
/* Mobile styles (default) */
.container {
display: flex;
flex-direction: column;
padding: 16px;
gap: 16px;
}
.card {
padding: 16px;
border-radius: 8px;
background: white;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
/* Tablet (640px and up) */
@media (min-width: 640px) {
.container {
flex-direction: row;
// ... (see reference guides for full implementation)Reference Guides
Detailed implementations in the references/ directory:
| Guide | Contents |
|---|---|
| [Mobile-First Media Query Strategy](references/mobile-first-media-query-strategy.md) | Mobile-First Media Query Strategy |
| [Flexbox Responsive Navigation](references/flexbox-responsive-navigation.md) | Flexbox Responsive Navigation |
| [CSS Grid Responsive Layout](references/css-grid-responsive-layout.md) | CSS Grid Responsive Layout |
| [Responsive Typography](references/responsive-typography.md) | Responsive Typography |
| [Responsive Cards Component](references/responsive-cards-component.md) | Responsive Cards Component |
Best Practices
✅ DO
- Follow established patterns and conventions
- Write clean, maintainable code
- Add appropriate documentation
- Test thoroughly before deploying
❌ DON'T
- Skip testing or validation
- Ignore error handling
- Hard-code configuration values