responsive_design

SKILL.md

Rule: Mobile-first development with consistent breakpoints, fluid layouts, relative units, and touch-friendly targets.

This Skill provides Claude Code with specific guidance on how to adhere to coding standards as they relate to how it should handle frontend responsive.

Always start with mobile layout, then enhance for larger screens.

流体コンテナ、フレキシブル ユニット、メディア クエリ、およびすべての画面サイズで機能するタッチ フレンドリーなデザインを使用して、応答性の高いモバイル ファーストのレイアウトを構築します。このスキルは、UI レイアウト、レスポンシブ グリッド、ブレークポイント スタイル、モバイル ナビゲーション、またはさまざまな画面サイズに適応する必要があるインターフェイスを作成または変更するときに使用します。レスポンシブ CSS、メディア クエリ、ビューポート設定、フレックスボックス/グリッド レイアウト、モバイル ファースト スタイル、ブレークポイント定義 (モバイル、タブレット、デスクトップ)、タッチ ターゲットのサイズ設定、相対単位 (rem、em、%)、さまざまな画面の画像の最適化、または複数のデバイス間でレイアウトをテストする場合に適用します。マルチデバイスのサポート、レスポンシブ デザイン パターン、またはアダプティブ レイアウトを含むあらゆるタスクに使用します。 ソース: vuralserhat86/antigravity-agentic-skills。

原文を見る