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
キュレーション済みスキル
品質 優秀 · 78
v1.0.0
取得
https://deepseekmodel.com/api/download.php?id=aj-geddes-useful-ai-prompts-skills-responsive-web-design-skill-md&format=skill
ダウンロード .skill
標準形式。system_prompt と model_config を収録し、任意の Agent で利用可能
.skill ファイルの system_prompt フィールドの実際の内容。
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
このスキルを起動するキーワード。クリックでコピーできます。
このスキルにはトリガーワードがありません。
ダウンロードした .skill に含まれるフィールド。
| フィールド | 説明 |
|---|---|
| format | フォーマット識別子（skill/v1） |
| skill_id | スキル固有 ID |
| name | スキル名 |
| version | バージョン |
| description | 説明 |
| category | カテゴリ（配列） |
| trigger_words | トリガーワード |
| tags | タグ |
| source | ソース |
| source_url | ソース URL（本ページ） |
| exported_at | エクスポート日時（ダウンロード毎） |
| system_prompt | システムプロンプト本文 |
| model_config | モデル設定：provider / model / temperature / max_tokens / top_p |
| examples | サンプル |
| install_guide | 各プラットフォームの導入説明（Coze / Dify / Claude / カスタム） |
