スキル responsive-design

📦

responsive-design

Name: responsive-design
Author: wshobson

コンテンツリビジョン r1 安全 ⚙️ 外部コマンド🌐 ネットワークアクセス

レスポンシブ Web レイアウトを構築する

レスポンシブなインターフェースは、デバイス、コンテナ、コンテンツサイズが変わると崩れがちです。このスキルは、適応型レイアウトのための実践的な CSS とコンポーネントパターンを提供します。

対応: Claude Codex Code(CC)

📊 75 十分

自分のエージェントでインストール

このリクエストをエージェントにコピーしてください。正規の Skill ページとマニフェストが含まれています。

エージェントリクエスト

Review the Skillstore skill "responsive-design" from https://skillstore.io/skills/wshobson-responsive-design.md and its manifest at https://skillstore.io/api/skills/wshobson-responsive-design/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。

エージェントが読めるリソース

AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。

Markdown詳細 GET /skills/wshobson-responsive-design.md 署名済み manifest GET /api/skills/wshobson-responsive-design/manifest 署名済み lockfile GET /api/skills/wshobson-responsive-design/lockfile

テストする

「responsive-design」を使用しています。ダッシュボードグリッドがスマートフォンでうまく折りたたまれない。

期待される結果:

単一カラムをデフォルトとし、タブレットでのグループ化、デスクトップでのグリッド動作、オーバーフロー確認を含むモバイルファーストのレイアウト計画。

「responsive-design」を使用しています。カードコンポーネントが狭いサイドバーと広いコンテンツ領域に表示される。

期待される結果:

親要素の幅に基づいてカード画像の配置、テキストスケール、スペーシングを変更するコンテナクエリのアプローチ。

「responsive-design」を使用しています。マーケティングページの固定タイポグラフィがモバイルで大きすぎるように感じる。

期待される結果:

読みやすい最小サイズ、制御された最大サイズ、それに合ったスペーシングのガイダンスを備えた流動的な文字サイズスケール。

セキュリティ監査

安全

v5 • 2026/7/8 バージョン別レポートを開く

AI review found the static matches to be false positives in documentation examples. The skill contains responsive design guidance, CSS and TSX snippets, and resource links, with no evidence of command execution, credential material, network behavior, reconnaissance, prompt injection, or malicious intent.

スキャンされたファイル

2,221

解析済み行数

レビュー項目

誤検知を無視

リスク要因

最新の完了済み静的・セマンティック監査では、確認済みのセキュリティ検出事項は見つかりませんでした。これは、スキルに副作用がないことを証明するものではありません。

監査者: codex 監査履歴を表示 →

このレポートを共有・引用

バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。

バージョン別レポートを開く

レポートリンクをコピー

https://skillstore.io/skills/wshobson-responsive-design/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdownバッジ

[![Skillstore security assessment](https://skillstore.io/badges/skills/wshobson-responsive-design/security.svg)](https://skillstore.io/skills/wshobson-responsive-design?utm_source=security_passport_badge)

HTMLバッジ

<a href="https://skillstore.io/skills/wshobson-responsive-design?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/wshobson-responsive-design/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

埋め込みカード

<iframe src="https://skillstore.io/embed/skills/wshobson-responsive-design.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形式の引用

wshobson. (2026). responsive-design security audit report (audit version 5) [Author version unspecified]. Skillstore. https://skillstore.io/skills/wshobson-responsive-design/audits/5

BibTeX形式の引用

@techreport{wshobson-wshobson-responsive-design-2026,
  author = {wshobson},
  title = {responsive-design security audit report (audit version 5)},
  institution = {Skillstore},
  year = {2026},
  number = {5},
  url = {https://skillstore.io/skills/wshobson-responsive-design/audits/5},
  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: "responsive-design security audit report (audit version 5)"
version: "unspecified"
type: report
authors:
  - name: "wshobson"
date-released: "2026-07-08"
url: "https://skillstore.io/skills/wshobson-responsive-design/audits/5"
identifiers:
  - type: other
    value: "skillstore:wshobson-responsive-design:audit:5"
    description: "Skillstore immutable audit report identifier"

バリアントを比較

インストール可能なバリアント 2 件

各作者のスキルは個別のインストール項目として維持されます。推奨バリアントは Skillstore の証拠で順位付けされます。

このバリアントが首位の理由

Skillstore スコアが最高

作者 / ソース Skillstore スコア証拠の信頼度 Skillstore 利用状況更新済み

supercent-io 推奨

supercent-io-responsive-design

Skillstore スコア 77

証拠の信頼度高

Skillstore 利用状況 31

更新済み

2026-09-09

wshobson 現在

wshobson-responsive-design

Skillstore スコア 75

証拠の信頼度高

Skillstore 利用状況 19

更新済み

2026-09-09

Skillstore スコア

このスコアの理由証拠の信頼度: 高

アーキテクチャ

保守性

コンテンツ

コミュニティ

仕様準拠

作成できるもの

適応型プロダクトカードを作成する

コンテナクエリを使用して、カードがグリッド、サイドバー、狭いモバイルビュー内で適応できるようにします。

レスポンシブなデザイントークンを定義する

チームがプロダクト全体で再利用できる、流動的な文字サイズ、スペーシング、ブレークポイントのスケールを構築します。

モバイルのデータビューを改善する

密度の高いテーブルやナビゲーションを、小さな画面でも使いやすいレイアウトに変換します。

これらのプロンプトを試す

ページをレスポンシブにする

responsive-design スキルを使用して、このページをモバイル、タブレット、デスクトップで機能するようにしてください。既存のビジュアルスタイルは維持してください。

流動的な文字サイズとスペーシングを追加する

responsive-design スキルを使用して、固定のフォントサイズとスペーシングを境界付きの流動的な値に置き換えてください。選択した最小サイズと最大サイズを説明してください。

コンテナクエリでコンポーネントをリファクタリングする

responsive-design スキルを使用して、ビューポートのみのブレークポイントではなくコンテナクエリでこれらのコンポーネントをリファクタリングしてください。

レスポンシブシステム戦略を設計する

responsive-design スキルを使用して、このデザインシステム向けのブレークポイントトークン、コンテナクエリルール、レスポンシブメディアルール、検証手順を提案してください。

ベストプラクティス

実用上最小のレイアウトから始め、その後、より大きなコンテナとビューポート向けに拡張します。
ブレークポイントはデバイス名だけでなく、コンテンツの要件とコンポーネント幅に基づいて選びます。
各レスポンシブ状態で、実際のコンテンツ、長いラベル、画像比率、テーブルのオーバーフローをテストします。

回避

再利用可能なコンポーネントに対して、固定されたデバイスブレークポイントだけに依存しないでください。
テキストが小さすぎたり大きすぎたりする、境界のないビューポート単位を使用しないでください。
レイアウトを単純に見せるために、モバイルで重要なコンテンツを非表示にしないでください。

よくある質問

このスキルはコードを実行したりパッケージをインストールしたりしますか？

いいえ。レスポンシブ CSS とコンポーネントパターンのための markdown ガイダンスと例を提供します。

Tailwind CSS プロジェクトに役立ちますか？

はい。例には Tailwind 風のレスポンシブクラスとコンテナクエリの使用方法が含まれています。

デザインシステムをサポートしていますか？

はい。ブレークポイントトークン、流動的スケール、再利用可能なレイアウトパターン、コンポーネントのレスポンシブ対応を扱います。

ブラウザテストを置き換えられますか？

いいえ。レスポンシブ動作の計画と実装を支援しますが、ビジュアルテストは引き続き必要です。

どのフレームワークに適用できますか？

このガイダンスは CSS に重点を置いており、React、Tailwind CSS、標準的な Web プロジェクトに適用できます。

このスキルはマーケットプレイス公開に安全ですか？

はい。レビュー済みのファイルにはドキュメント例とリンクが含まれており、実行可能な自動化や認証情報へのアクセスはありません。

開発者情報

作成者

wshobson

ライセンス

MIT

Skillstore リビジョン

バージョンに関する注意

作者はバージョンを宣言していません。

リポジトリ

https://github.com/wshobson/agents/tree/main/plugins/ui-design/skills/responsive-design/

参照

64ca8af0f54a325752f08bd54e52151061ea659a

メンテナンスの新しさ

2026/7/22

利用状況

12 ダウンロード · 201 閲覧

ファイル構成

📁 references/

📄 breakpoint-strategies.md

📄 container-queries.md

📄 fluid-layouts.md

📄 SKILL.md

wshobson のその他のスキル

すべて表示

📦

prompt-engineering-patterns

本番環境向けLLMプロンプトを最適化

LLMプロンプトは、指示、例、評価基準が不明確なために失敗することがよくあります。このスキルは、Claude、Codex、Claude Code、および同様のツールでプロンプトを改善するためのテンプレートとワークフローを提供します。

生産性表示

📦

context-driven-development

コンテキスト駆動開発を管理する

AI支援プロジェクトでは、プロダクト目標、スタック選定、ワークフロールールが散在すると一貫性が失われます。このスキルは、Conductor のコンテキスト成果物を通じて Claude、Codex、Claude Code を導きます。

コーディング＆開発表示

📦

startup-financial-modeling

スタートアップ向け財務モデルを構築する

スタートアップチームは、採用、資金調達、資金使途を計画する前に、明確な予測を必要とします。このスキルは、収益、コスト、ランウェイ、シナリオを実務的な財務計画アウトプットとして整理します。

データ＆アナリティクス表示

📦

kpi-dashboard-design

意思決定を促進するKPIダッシュボードを設計する

チームは多くの数値を表示するだけで、行動につながらないダッシュボードを作りがちです。このスキルは、Claude、Codex、Claude Codeが意味のあるKPIを選定し、ビューを構成し、指標を明確に提示するのに役立ちます。

デザイン＆クリエイティブ表示

📦

postmortem-writing

非難しないインシデント事後分析を書く

インシデントレビューは、一貫性がなくなったり、非難に焦点が当たったり、実行に移しにくくなったりしがちです。このスキルは、Claude、Codex、Claude Code が、明確なタイムライン、根本原因、担当者を含む構造化された事後分析を作成するのに役立ちます。

ライティング＆コンテンツ表示

📦

data-storytelling

明確なデータストーリーを構築

生の指標だけでは、ステークホルダーを説得したり意思決定を支援したりするには不十分なことがよくあります。このスキルは、Claude、Codex、Claude Code が分析を明確なナラティブ、ビジュアル、推奨事項へと整理するのを支援します。

データ＆アナリティクス表示

すべて表示

📦

ui-styling

Build Accessible Tailwind Interfaces

作成者 nextlevelbuilder

Building consistent, responsive interfaces requires many component, styling, and accessibility decisions. This skill provides shadcn/ui patterns, Tailwind guidance, and focused automation.

デザイン＆クリエイティブ表示

📦