responsive-web-design by aj-geddes/useful-ai-prompts
npx skills add https://github.com/aj-geddes/useful-ai-prompts --skill responsive-web-design使用现代 CSS 技术(包括 Flexbox、Grid 和媒体查询)构建移动优先的响应式界面,以创建适应性强的用户体验。
最小工作示例:
/* 移动端样式(默认) */
.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;
}
/* 平板电脑(640px 及以上) */
@media (min-width: 640px) {
.container {
flex-direction: row;
// ... (完整实现请参阅参考指南)
}
references/ 目录下的详细实现:
| 指南 |
|---|
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 内容 |
|---|
| 移动优先媒体查询策略 | 移动优先媒体查询策略 |
| Flexbox 响应式导航 | Flexbox 响应式导航 |
| CSS Grid 响应式布局 | CSS Grid 响应式布局 |
| 响应式排版 | 响应式排版 |
| 响应式卡片组件 | 响应式卡片组件 |
每周安装数
290
代码仓库
GitHub 星标数
116
首次出现时间
Jan 21, 2026
安全审计
安装于
opencode249
gemini-cli244
codex229
claude-code216
cursor214
github-copilot201
Build mobile-first responsive interfaces using modern CSS techniques including Flexbox, Grid, and media queries to create adaptable user experiences.
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)
Detailed implementations in the references/ directory:
| Guide | Contents |
|---|---|
| Mobile-First Media Query Strategy | Mobile-First Media Query Strategy |
| Flexbox Responsive Navigation | Flexbox Responsive Navigation |
| CSS Grid Responsive Layout | CSS Grid Responsive Layout |
| Responsive Typography | Responsive Typography |
| Responsive Cards Component | Responsive Cards Component |
Weekly Installs
290
Repository
GitHub Stars
116
First Seen
Jan 21, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode249
gemini-cli244
codex229
claude-code216
cursor214
github-copilot201
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
106,200 周安装