📦
prompt-repetition
82軽量モデルの精度を向上
重要な情報の後に質問が来る場合、軽量モデルは文脈を見落とすことがあります。このスキルは、選択したタスクの精度を向上させるため、適切なプロンプトをガードレール付きで繰り返します。
生産性 表示
スキル responsive-design
📦
responsive-design
コンテンツリビジョン r1 安全 ⚙️ 外部コマンド🌐 ネットワークアクセス📁 ファイルシステムへのアクセス
レスポンシブWebレイアウトの構築
固定レイアウトは、スマートフォン、タブレット、ワイドスクリーンではうまく機能しません。このスキルは、モバイルファーストCSS、ブレークポイント、画像、レイアウトパターンをガイドします。
対応: Claude Codex Code(CC)
自分のエージェントでインストール
このリクエストをエージェントにコピーしてください。正規の Skill ページとマニフェストが含まれています。
エージェントリクエスト
Review the Skillstore skill "responsive-design" from https://skillstore.io/skills/supercent-io-responsive-design.md and its manifest at https://skillstore.io/api/skills/supercent-io-responsive-design/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。
エージェントが読めるリソース
AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。
テストする
「responsive-design」を使用しています。 商品一覧ページは、モバイル、タブレット、デスクトップ、大画面で動作する必要があります。
期待される結果:
1列、2列、3列、4列の状態を持つモバイルファーストのグリッド計画に加え、スペーシングと画像サイズに関するガイダンス。
「responsive-design」を使用しています。 デスクトップ用ナビゲーションバーにはモバイルメニューが必要です。
期待される結果:
モバイル用トグル、アクセシブルな状態ラベル、広い画面での水平リンクを含むレスポンシブナビゲーションのアプローチ。
「responsive-design」を使用しています。 レガシーページでは固定幅と大きな画像が使用されています。
期待される結果:
max-widthコンテナ、相対単位、レスポンシブ画像、ビューポートテスト手順を含むリファクタリングチェックリスト。
セキュリティ監査
安全v5 • 2026/7/7 バージョン別レポートを開く
All static findings were false positives caused by Markdown code fences, CSS examples, reference links, and related-skill documentation links. No prompt injection, malware intent, credential access, data exfiltration, runtime command execution, or filesystem access was found in SKILL.md or SKILL.toon.
2
スキャンされたファイル
529
解析済み行数
0
レビュー項目
0
誤検知を無視
リスク要因
⚙️ 外部コマンド (36)
SKILL.md:27-73 SKILL.md:73-80 SKILL.md:80-112 SKILL.md:112-115 SKILL.md:115-147 SKILL.md:147-154 SKILL.md:154-170 SKILL.md:170-173 SKILL.md:173-184 SKILL.md:184-187 SKILL.md:187-211 SKILL.md:211-218 SKILL.md:218-239 SKILL.md:239-242 SKILL.md:242-255 SKILL.md:255-261 SKILL.md:261-295 SKILL.md:295-301 SKILL.md:301-318 SKILL.md:318-325 SKILL.md:325-327 SKILL.md:327-330 SKILL.md:330-331 SKILL.md:331-340 SKILL.md:340-341 SKILL.md:341-350 SKILL.md:350-372 SKILL.md:372-380 SKILL.md:380-382 SKILL.md:382-424 SKILL.md:424-428 SKILL.md:428-443 SKILL.md:443-445 SKILL.md:445-485 SKILL.md:485-513 SKILL.md:513
🌐 ネットワークアクセス (4)
📁 ファイルシステムへのアクセス (2)
最新の完了済み静的・セマンティック監査では、確認済みのセキュリティ検出事項は見つかりませんでした。これは、スキルに副作用がないことを証明するものではありません。
監査者: codex 監査履歴を表示 →
このレポートを共有・引用
バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。
レポートリンクをコピー
https://skillstore.io/skills/supercent-io-responsive-design/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdownバッジ
[](https://skillstore.io/skills/supercent-io-responsive-design?utm_source=security_passport_badge)HTMLバッジ
<a href="https://skillstore.io/skills/supercent-io-responsive-design?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/supercent-io-responsive-design/security.svg" alt="Skillstore security assessment" loading="lazy"></a>埋め込みカード
<iframe src="https://skillstore.io/embed/skills/supercent-io-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形式の引用
supercent-io. (2026). responsive-design security audit report (audit version 5) [Author version unspecified]. Skillstore. https://skillstore.io/skills/supercent-io-responsive-design/audits/5BibTeX形式の引用
@techreport{supercent-io-supercent-io-responsive-design-2026,
author = {supercent-io},
title = {responsive-design security audit report (audit version 5)},
institution = {Skillstore},
year = {2026},
number = {5},
url = {https://skillstore.io/skills/supercent-io-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: "supercent-io"
date-released: "2026-07-07"
url: "https://skillstore.io/skills/supercent-io-responsive-design/audits/5"
identifiers:
- type: other
value: "skillstore:supercent-io-responsive-design:audit:5"
description: "Skillstore immutable audit report identifier"
バリアントを比較
インストール可能なバリアント 2 件各作者のスキルは個別のインストール項目として維持されます。推奨バリアントは Skillstore の証拠で順位付けされます。
このバリアントが首位の理由
Skillstore スコアが最高
作者 / ソース Skillstore スコア 証拠の信頼度 Skillstore 利用状況 更新済み
supercent-io-responsive-design
Skillstore スコア 77
証拠の信頼度 高
Skillstore 利用状況 37
更新済み
2026-09-09
Skillstore スコア
このスコアの理由 証拠の信頼度: 高 55
アーキテクチャ
85
保守性
87
コンテンツ
69
コミュニティ
78
仕様準拠
作成できるもの
モバイルファーストページの立ち上げ
スマートフォン表示から始まり、タブレットやデスクトップ画面へきれいに拡張できるレイアウトを作成します。
固定レイアウトのモダン化
固定幅を柔軟なグリッド、相対的なスペーシング、ブレークポイントベースの調整に置き換えます。
レスポンシブUI要件の準備
新しいWebインターフェイス向けに、ブレークポイントの動作、画像処理、レイアウトの期待値を文書化します。
これらのプロンプトを試す
基本的なレスポンシブレイアウトを作成する
responsive-design skillを使用して、ヘッダー、コンテンツ、フッターセクションを持つシンプルなランディングページのモバイルファーストレイアウトを作成してください。
固定CSSを変換する
responsive-design skillを使用して、この固定幅レイアウトを、明確なブレークポイントを持つモバイルファーストのレスポンシブレイアウトに変換してください。
レスポンシブカードを設計する
responsive-design skillを使用して、モバイルでは1列、大きな画面では4列に変化するカードグリッドを設計してください。
レスポンシブ動作を監査する
responsive-design skillを使用して、このインターフェイスのレイアウトのはみ出し、ブレークポイントの重複、画像スケーリング、タイポグラフィの問題を監査してください。
ベストプラクティス
- 対応する最小画面から開始し、より広いブレークポイントで複雑さを追加します。
- 2次元レイアウトにはGridを使用し、1次元の配置にはFlexboxを使用します。
- スペーシングと画像の動作を最終決定する前に、各ブレークポイントで実際のコンテンツをテストします。
回避
- 主要なレイアウトコンテナに固定ページ幅を依存させないでください。
- すべてのブレークポイントで同じスタイルを重複させないでください。
- ページパフォーマンスが重要な場合、レスポンシブ画像を任意のものとして扱わないでください。
よくある質問
このスキルは本番用CSSを書けますか？
本番向けのパターンと例を提供しますが、最終的なコードはプロジェクトの規約に合わせる必要があります。
既存のレイアウトにも役立ちますか？
はい。固定されたデスクトップレイアウトを、柔軟なモバイルファーストレイアウトへ変換する手助けができます。
CSS GridとFlexboxをサポートしていますか？
はい。それぞれのレイアウト手法が有用な場面を説明し、両方の例を含みます。
レスポンシブ画像のガイダンスは含まれていますか？
はい。srcset、sizes、picture要素、CSS背景、image-setの使用方法を扱います。
アクセシビリティテストの代わりになりますか？
いいえ。関連するアクセシビリティ上の懸念には触れますが、完全なアクセシビリティ監査は実行しません。
どのツールがこのスキルを使用できますか？
レポートには、Claude、Codex、Claude Codeとの互換性が記載されています。
開発者情報
作成者
supercent-ioライセンス
MIT
Skillstore リビジョン
r1
バージョンに関する注意
作者はバージョンを宣言していません。
参照
f93e9bb0daca99badb6a7e574b97737155d57cb3
メンテナンスの新しさ
2026/7/24
利用状況
23 ダウンロード · 139 閲覧
ファイル構成
📄 SKILL.md
supercent-io のその他のスキル
すべて表示📦
api-design
80より優れたRESTおよびGraphQL APIを設計する
APIチームには、実装が始まる前に一貫した契約が必要です。このスキルは、リソース設計、リクエスト形式、エラー、バージョニング、ドキュメント作成を支援します。
コーディング＆開発 表示
📦
code-refactoring
79コードを安全にリファクタリングする
複雑なコードは変更を遅くし、回帰リスクを高めます。このスキルは、テスト、抽出パターン、検証手順を用いて、振る舞いを維持するリファクタリングを支援します。
コーディング＆開発 表示
📦
user-guide-writing
79ユーザーガイドとチュートリアルを作成
ドキュメント作成チームには、ユーザーがサポートなしで進められる明確な製品ヘルプが必要です。このスキルは、エンドユーザー向けのオンボーディングガイド、ハウツー記事、チュートリアル、FAQを構成します。
ドキュメント 表示
📦
debugging
79コードの問題を体系的にデバッグする
症状が本当の原因を隠していると、バグはエンジニアリング時間を浪費します。このスキルは、構造化された再現、切り分け、根本原因分析、修正、回帰防止を支援します。
コーディング＆開発 表示
📦
task-planning
79Agileタスクとユーザーストーリーを計画する
チームは、明確なタスク、優先順位、受け入れ基準がないまま、広範な機能リクエストを受け取ることがよくあります。このスキルは、機能アイデアをユーザーストーリー、スプリントバックログ項目、依存関係、Definition of Doneのチェックに変換します。
生産性 表示
関連スキル
すべて表示📦
frontend-design
81個性的なフロントエンドインターフェイスを設計する
作成者 Atman36
一般的な生成インターフェイスは、予測可能で弱い印象になりがちです。このスキルは、Claude、Codex、Claude Code が個性的で本番品質のフロントエンドデザインへ向かうよう導きます。
デザイン＆クリエイティブ 表示
📦
ui-design
80特徴的なUIプロトタイプを設計する
作成者 tencentcloudbase
汎用的なAIインターフェースは、視覚的な方向性やプラットフォームを考慮した細部が不足しがちです。このスキルは、Claude、Codex、Claude Codeがプロトタイプを構築する前にデザイン意図を定義できるよう支援します。
デザイン＆クリエイティブ 表示
📦
uizze-ui
80Build and Refine Interfaces with Uizze
作成者 uizze
Interface changes can lose visual consistency or disrupt existing workflows. This skill guides implementation from visual targets and project conventions, with optional Uizze resources and explicit verification.
デザイン＆クリエイティブ 表示
📦
vercel-react-view-transitions
82React View Transitions を実装する
作成者 vercel-labs
React view transitions は配置を誤りやすく、意図しない静かなアニメーションや目立つアニメーションを引き起こします。このスキルは、route、Suspense、list、shared element のアニメーション選択を導きます。
コーディング＆開発 表示
📦
react-email
82ResendでReact Emailテンプレートを構築
作成者 resend
本番環境で使えるメールテンプレートの作成は、メールクライアントごとに挙動が異なるため困難です。このスキルは、Claude、Codex、Claude Codeに対して、React Emailコンポーネント、送信、スタイリング、ローカライゼーション、エディターワークフローを案内します。
コーディング＆開発 表示
📦
vue-best-practices
81Vue 3 TypeScript プラクティスを改善する
作成者 hyf0
Vue TypeScript プロジェクトでは、テンプレート、ルーター、Volar に関する分かりにくいエラーに直面しがちです。このスキルは、Codex、Claude、Claude Code 向けに Vue 3 の的確な修正方法を提供します。
コーディング＆開発 表示