responsive-styling
✓コンポーネント スタイルを作成するとき、またはレスポンシブ デザインについて言及するときに、モバイル ファーストのレスポンシブ CSS/SCSS を自動的に生成します。標準ブレークポイント (768 ピクセル、1024 ピクセル) を実装し、WCAG AA カラー コントラストを保証し、タッチ フレンドリーなインターフェイス (最小ターゲット 44 ピクセル) を作成し、適切なフォーカス インジケーターを追加し、モーションの軽減をサポートし、タイポグラフィの即応性のあるスケーリングを行い、正確な値を含む詳細な技術仕様を提供します。
SKILL.md
Purpose Generate mobile-first, responsive CSS/SCSS that works across all devices and follows accessibility best practices.
Mobile-First Approach Always write base styles for mobile, then enhance for larger screens:
❌ Desktop-first (using max-width) ❌ Magic numbers (random breakpoints) ❌ Forgetting touch targets ❌ Fixed pixel widths that don't scale ❌ Tiny text on mobile (<16px) ❌ Horizontal scrolling ❌ Ignoring landscape mobile ❌ Breaking at intermediate sizes
コンポーネント スタイルを作成するとき、またはレスポンシブ デザインについて言及するときに、モバイル ファーストのレスポンシブ CSS/SCSS を自動的に生成します。標準ブレークポイント (768 ピクセル、1024 ピクセル) を実装し、WCAG AA カラー コントラストを保証し、タッチ フレンドリーなインターフェイス (最小ターゲット 44 ピクセル) を作成し、適切なフォーカス インジケーターを追加し、モーションの軽減をサポートし、タイポグラフィの即応性のあるスケーリングを行い、正確な値を含む詳細な技術仕様を提供します。 ソース: kanopi/cms-cultivator。
引用可能な情報
AI/検索での引用用の安定したフィールドとコマンド。
- インストールコマンド
npx skills add https://github.com/kanopi/cms-cultivator --skill responsive-styling- カテゴリ
- </>開発ツール
- 認証済み
- ✓
- 初回登録
- 2026-02-01
- 更新日
- 2026-02-18
クイックアンサー
responsive-styling とは？
コンポーネント スタイルを作成するとき、またはレスポンシブ デザインについて言及するときに、モバイル ファーストのレスポンシブ CSS/SCSS を自動的に生成します。標準ブレークポイント (768 ピクセル、1024 ピクセル) を実装し、WCAG AA カラー コントラストを保証し、タッチ フレンドリーなインターフェイス (最小ターゲット 44 ピクセル) を作成し、適切なフォーカス インジケーターを追加し、モーションの軽減をサポートし、タイポグラフィの即応性のあるスケーリングを行い、正確な値を含む詳細な技術仕様を提供します。 ソース: kanopi/cms-cultivator。
responsive-styling のインストール方法は？
ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/kanopi/cms-cultivator --skill responsive-styling インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code や Cursor で使用できるようになります
ソースリポジトリはどこですか？
https://github.com/kanopi/cms-cultivator
詳細
- カテゴリ
- </>開発ツール
- ソース
- skills.sh
- 初回登録
- 2026-02-01