SAIスキル大辞典Agent Skills Dictionary
⌕
文字
トップ›Skill›frontend-responsive-design
画像生成

frontend-responsive-design

フロントエンド・レスポンシブデザイン

レスポンシブなレイアウト、CSS、アクセシビリティ、操作性、Tailwind、視覚的QAを設計・レビューするスキル。

AIスキル大辞典による日本語要約
品質評価90/100評価確度：標準
人気度（GitHub Star） 16発掘スコア 99
01

このSkillでできること

  • ✓レスポンシブなレイアウトとCSSを設計・レビューする
  • ✓セマンティックHTML、アクセシビリティ、キーボード操作を確認する
  • ✓Tailwindのユーティリティ利用やコンポーネント構造を検討する
  • ✓マップUI、状態表示、視覚的なレスポンシブ挙動を確認する
02

使い方

01
STEP 1

対象アプリとスタイリング方式を確認し、関連するHTMLとJavaScriptを調べる

02
STEP 2

小さい画面幅を起点に、より大きなコンテナやビューポートへ段階的に対応する

03
STEP 3

clamp()、Grid、Flexbox、コンテナクエリなどを用途に応じて使う

04
STEP 4

ビルド、ブラウザやスクリーンショット、各種操作状態を確認する

03

Skillのインストール

初心者におすすめ

AIにこのSkillを追加してもらう

GitHub URLごとCodexやClaude Codeへ渡し、現在の環境に合う方法を判断してもらいます。

このGitHubリポジトリにあるSkillを確認し、現在の環境に適した方法でインストールしてください。
インストール後、正常に利用できることを確認し、基本的な使い方も簡潔に説明してください。

Repository:
https://github.com/ryanbaumann/fieldwork
手動でインストールする

README / SKILL.mdから機械抽出できたコマンドのみ表示しています。推測したコマンドではありません。

cd demos/strava-explorer && npm install && npm run dev
cd demos/aqi-map && npm install && npm run dev
cd demos/isochrones && npm install && npm run dev
cd portfolio && node build.mjs && node serve.mjs
04

このSkillを使うプロンプト例

Skill名を明示すると、意図したSkillを使わせやすくなります。自動発動型では必須とは限りません。

このフロントエンド変更をレスポンシブデザインの観点でレビューしてください。狭い画面と広い画面、ライト・ダーク表示、キーボード操作、フォーカスやローディングなどの状態、マップUIの安全領域と操作ターゲットを確認し、必要なHTML・CSSの改善案を示してください。
出力例を見る
対象アプリと関連コードを確認し、モバイル幅を起点にレイアウト、アクセシビリティ、操作状態、マップ領域をレビューします。問題点、影響する画面幅や状態、修正方針、検証結果を整理します。
05

安全性チェック

自動解析による参考情報です。Skillの安全性を保証するものではありません。

外部API通信検出あり
Shellコマンド実行明確な記述なし
ファイル読み取り明確な記述なし
ファイル書き込み明確な記述なし
ネットワークアクセス検出あり
認証情報検出あり
検出根拠を見る
  • network: r behavior questions: - Responsive web design basics: https://web.dev/articles/responsive-web-design-basics - MDN container queries: https://developer.m
  • network: /responsive-web-design-basics - MDN container queries: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries - MDN responsiv
  • credential: the full design. ## Security posture * Never commit API keys, OAuth secrets, access tokens, refresh tokens, or generated `.env.*` files. * Browser-ex
  • credential: e env vars such as `STRAVA_CLIENT_SECRET`, `GMP_SERVER_API_KEY`, and `RESEND_API_KEY`. * Gateway proxy endpoints return keyless `503` JSON responses ins
06

関連Skill