スキル frontend-responsive
📦
frontend-responsive
コンテンツリビジョン r1 安全 📁 ファイルシステムへのアクセス
レスポンシブなフロントエンドレイアウトを構築する
レスポンシブインターフェイスは、スマートフォン、タブレット、デスクトップ間で破綻しがちです。このスキルは、モバイルファーストのレイアウト、ブレークポイント、タッチ操作しやすいUIについて、Claude、Codex、Claude Codeに焦点を絞ったガイダンスを提供します。
対応: Claude Codex Code(CC)
自分のエージェントでインストール
このリクエストをエージェントにコピーしてください。正規の Skill ページとマニフェストが含まれています。
エージェントリクエスト
Review the Skillstore skill "frontend-responsive" from https://skillstore.io/skills/eis-its-frontend-responsive.md and its manifest at https://skillstore.io/api/skills/eis-its-frontend-responsive/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。
エージェントが読めるリソース
AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。
テストする
「frontend-responsive」を使用しています。 ダッシュボードをスマートフォンとデスクトップモニターで使いやすくしてください。
期待される結果:
- 単一カラムのモバイルレイアウトから始め、画面幅が広くなるにつれて複数カラム表示へ拡張します。
- 主要アクションを表示したままにし、相対的な余白を使い、小画面でタッチターゲットを検証します。
- テーブル、グラフ、フィルターの構造が変わる主要なブレークポイントをテストします。
「frontend-responsive」を使用しています。 商品カード一覧のレスポンシブ上の問題をレビューしてください。
期待される結果:
- モバイルでカードがきれいに縦積みされ、窮屈な2カラムレイアウトになっていないことを確認します。
- 画像がビューポート幅全体で比例を保てるように、流動的なメディアサイズを使用します。
- タイトル、価格、アクションボタンが読みやすく、タップしやすい状態を維持していることを確認します。
「frontend-responsive」を使用しています。 マーケティングページのレスポンシブタイポグラフィを計画してください。
期待される結果:
- 相対フォント単位を使用し、意味のあるコンテンツブレークポイントでサイズ変更を定義します。
- デスクトップでは読みやすい行長を保ち、スマートフォンでは見出しが大きくなりすぎないようにします。
- 長いラベル、見出し、行動喚起のテキスト折り返しをテストします。
セキュリティ監査
安全v10 • 2026/7/9 バージョン別レポートを開く
The skill contains one confirmed filesystem concern: it directs the agent to follow a ../../../ path outside the skill directory. The two system reconnaissance findings are false positives caused by normal responsive design wording.
1
スキャンされたファイル
30
解析済み行数
1
レビュー項目
0
誤検知を無視
機能レビュー項目 (1)
これらは、このスキルに期待される可能性のある実際のローカル機能であるため、レビューが必要ですが、確認済みの悪意ある動作としてはカウントされません。
高
Path traversal sequence
[frontend responsive](../../../agent-os/standards/frontend/responsive.md)
Line 29 instructs the agent to follow a ../../../ Markdown link that escapes the skill directory. Even as documentation, this can load unreviewed content outside the packaged skill boundary.
リスク要因
📁 ファイルシステムへのアクセス (1)
監査者: codex 監査履歴を表示 →
このレポートを共有・引用
バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。
レポートリンクをコピー
https://skillstore.io/skills/eis-its-frontend-responsive/audits/10?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdownバッジ
[](https://skillstore.io/skills/eis-its-frontend-responsive?utm_source=security_passport_badge)HTMLバッジ
<a href="https://skillstore.io/skills/eis-its-frontend-responsive?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/eis-its-frontend-responsive/security.svg" alt="Skillstore security assessment" loading="lazy"></a>埋め込みカード
<iframe src="https://skillstore.io/embed/skills/eis-its-frontend-responsive.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>学術引用 (APA · BibTeX · CFF)
APA形式の引用
EIS-ITS. (2026). frontend-responsive security audit report (audit version 10) [Author version unspecified]. Skillstore. https://skillstore.io/skills/eis-its-frontend-responsive/audits/10BibTeX形式の引用
@techreport{eis-its-eis-its-frontend-responsive-2026,
author = {EIS-ITS},
title = {frontend-responsive security audit report (audit version 10)},
institution = {Skillstore},
year = {2026},
number = {10},
url = {https://skillstore.io/skills/eis-its-frontend-responsive/audits/10},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "frontend-responsive security audit report (audit version 10)"
version: "unspecified"
type: report
authors:
- name: "EIS-ITS"
date-released: "2026-07-09"
url: "https://skillstore.io/skills/eis-its-frontend-responsive/audits/10"
identifiers:
- type: other
value: "skillstore:eis-its-frontend-responsive:audit:10"
description: "Skillstore immutable audit report identifier"
バリアントを比較
インストール可能なバリアント 2 件各作者のスキルは個別のインストール項目として維持されます。推奨バリアントは Skillstore の証拠で順位付けされます。
このバリアントが首位の理由
Skillstore での利用が多い
Skillstore スコア
このスコアの理由 証拠の信頼度: 高 55
アーキテクチャ
85
保守性
87
コンテンツ
70
コミュニティ
83
仕様準拠
作成できるもの
アダプティブページを計画する
レイアウトスタイルを書く前に、モバイルファーストのページ構造を定義します。
レスポンシブコンポーネントをレビューする
ビューポートサイズ全体で、余白、タイポグラフィ、タッチターゲット、コンテンツの優先順位を確認します。
ビューポートテストメモを準備する
新しいインターフェイス向けに、モバイル、タブレット、デスクトップでの確認項目を特定します。
これらのプロンプトを試す
モバイルレイアウトを始める
frontend-responsiveスキルを使用してください。[page name]について、主要セクション、コンテンツの優先順位、デスクトップ展開を含むモバイルファーストのレイアウト計画を手伝ってください。
コンポーネントをレビューする
frontend-responsiveスキルを使用してください。[component description]について、ブレークポイント、相対単位、タッチターゲット、画像サイズ、小画面での挙動をレビューしてください。
ブレークポイントを計画する
frontend-responsiveスキルを使用してください。[application area]について、モバイル、タブレット、デスクトップ、大型ディスプレイでの挙動をカバーするブレークポイント戦略を作成してください。
レスポンシブなフローを監査する
frontend-responsiveスキルを使用してください。[workflow or screen set]について、デバイス全体でのレイアウトリスクを監査し、無関係な再設計を追加せずに優先順位付きの修正案を提示してください。
ベストプラクティス
- 最小のビューポートから始め、スペースが増えるにつれてレイアウトの複雑さを追加します。
- 一般的なデバイス幅だけでなく、コンテンツの要件に基づいてブレークポイントを選択します。
- 重要な各幅で、タッチターゲット、テキストの折り返し、画像、ナビゲーションをテストします。
回避
- デスクトップ専用に設計してから、後でインターフェイスを縮小しないでください。
- 主要なレイアウトコンテナに固定ピクセル幅だけを使用しないでください。
- プロダクト上の理由なしに、モバイルで重要なコンテンツを非表示にしないでください。
よくある質問
このスキルは何に役立ちますか？
モバイル、タブレット、デスクトップ画面全体で、レスポンシブなフロントエンドレイアウトの計画とレビューを支援します。
それ自体で本番用CSSを生成しますか？
いいえ。エージェントがコード編集時に適用できるレスポンシブデザインのガイダンスを提供します。
Tailwindプロジェクトに役立ちますか？
はい。このスキルはTailwindのブレークポイントに言及しており、レスポンシブユーティリティの選択をガイドできます。
自動ブラウザテストは含まれていますか？
いいえ。最終的なレイアウトを検証するには、ブラウザ、スクリーンショット、またはテストツールを使用してください。
どのツールでこのスキルを使用できますか？
レポートには、Claude、Codex、Claude Codeのサポートが記載されています。
公開前に作成者は何を修正すべきですか？
参照されているレスポンシブ標準をスキルディレクトリ内にパッケージ化する必要があります。