responsive-design
✓モバイルファースト開発のためのレスポンシブ Web デザイン パターン。流動的なレイアウト、ブレークポイント システム、レスポンシブ タイポグラフィ、柔軟なグリッド、およびアダプティブ コンポーネントの作成に使用します。レスポンシブ レイアウト、モバイル ファースト CSS、ブレークポイント、メディア クエリ、流体デザイン、またはマルチデバイス サポートのリクエストをトリガーします。
SKILL.md
| Mobile-first | Base styles = mobile, enhance with min-width | | Fluid over fixed | Use clamp(), %, vw instead of fixed px | | Content breakpoints | Break when content breaks, not at devices | | Touch targets | Minimum 44×44px on mobile | | Readable line length | Max 65-75 characters |
❌ Fixed pixel values everywhere ✅ Fluid units (rem, %, vw, clamp)
❌ Hiding content on mobile ✅ Prioritizing and reorganizing content
モバイルファースト開発のためのレスポンシブ Web デザイン パターン。流動的なレイアウト、ブレークポイント システム、レスポンシブ タイポグラフィ、柔軟なグリッド、およびアダプティブ コンポーネントの作成に使用します。レスポンシブ レイアウト、モバイル ファースト CSS、ブレークポイント、メディア クエリ、流体デザイン、またはマルチデバイス サポートのリクエストをトリガーします。 ソース: ibutters/claudecodeplugins。
引用可能な情報
AI/検索での引用用の安定したフィールドとコマンド。
- インストールコマンド
npx skills add https://github.com/ibutters/claudecodeplugins --skill responsive-design- カテゴリ
- </>開発ツール
- 認証済み
- ✓
- 初回登録
- 2026-02-01
- 更新日
- 2026-02-18
クイックアンサー
responsive-design とは?
モバイルファースト開発のためのレスポンシブ Web デザイン パターン。流動的なレイアウト、ブレークポイント システム、レスポンシブ タイポグラフィ、柔軟なグリッド、およびアダプティブ コンポーネントの作成に使用します。レスポンシブ レイアウト、モバイル ファースト CSS、ブレークポイント、メディア クエリ、流体デザイン、またはマルチデバイス サポートのリクエストをトリガーします。 ソース: ibutters/claudecodeplugins。
responsive-design のインストール方法は?
ターミナルまたはコマンドラインツール(Terminal、iTerm、Windows Terminal など)を開きます このコマンドをコピーして実行します: npx skills add https://github.com/ibutters/claudecodeplugins --skill responsive-design インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code や Cursor で使用できるようになります
ソースリポジトリはどこですか?
https://github.com/ibutters/claudecodeplugins
詳細
- カテゴリ
- </>開発ツール
- ソース
- skills.sh
- 初回登録
- 2026-02-01