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.
DeepseekModel
Curated skill
Quality Excellent · 78
v1.0.0
Get
https://deepseekmodel.com/api/download.php?id=aj-geddes-useful-ai-prompts-skills-responsive-web-design-skill-md&format=skill
Download .skill
Standard format with system_prompt and model_config, ready for any agent framework
The actual content of the system_prompt field in the .skill file.
name responsive-web-design description Create responsive layouts using CSS Grid, Flexbox, media queries, and mobile-first design. Use when building adaptive interfaces that work across all devices. Responsive Web Design Table of Contents Overview When to Use Quick Start Reference Guides 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 : 1 fr; 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 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 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
Keywords that activate this skill. Click one to copy it.
This skill does not provide trigger words.
The downloaded .skill package contains the following fields.
| Field | Description |
|---|---|
| format | Format tag (skill/v1) |
| skill_id | Unique skill ID |
| name | Skill name |
| version | Version |
| description | Description |
| category | Categories (array) |
| trigger_words | Trigger words |
| tags | Tags |
| source | Source |
| source_url | Source URL (this page) |
| exported_at | Exported at (set per download) |
| system_prompt | System prompt body |
| model_config | Model config: provider / model / temperature / max_tokens / top_p |
| examples | Examples |
| install_guide | Import guide for Coze / Dify / Claude / custom frameworks |
The same skill can be exported in different platform formats.
