layout
UIレイアウトと視覚的リズムを改善する
混雑したインターフェイスや反復的なグリッドは、プロダクトの見やすさと信頼性を損ないます。このスキルは、Claude、Codex、Claude Codeがより優れた余白、階層、レスポンシブな構成を実現できるよう導きます。
自分のエージェントでインストール
このリクエストをエージェントにコピーしてください。正規の Skill ページとマニフェストが含まれています。
Review the Skillstore skill "layout" from https://skillstore.io/skills/pbakaus-layout.md and its manifest at https://skillstore.io/api/skills/pbakaus-layout/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。
エージェントが読めるリソース
AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。
テストする
「layout」を使用しています。 ダッシュボードが窮屈に感じられ、すべてのウィジェットが同じカードサイズと余白を使用している。
期待される結果:
レビューでは、弱いグルーピング、反復的なカードのリズム、不明確な優先順位を指摘します。関連グループをより密にまとめ、セクション間の余白を広げ、ウィジェットの幅に変化をつけることを推奨します。
「layout」を使用しています。 ランディングページに、同一のアイコン、見出し、テキストカードの行が複数ある。
期待される結果:
このスキルは、非対称な整列、より少ないカード、より明確なコンテンツ階層、レスポンシブな余白調整を備えた、より変化のあるセクション構造を提案します。
「layout」を使用しています。 設定ページには、デスクトップとモバイル向けのより良いレイアウトルールが必要である。
期待される結果:
結果では、FlexboxとGridの選択肢を比較し、余白の振る舞いを定義し、階層とレスポンシブ対応の検証チェックを追加します。
セキュリティ監査
低リスクStatic findings are false positives caused by Markdown inline code and design terminology in SKILL.md. The only semantic risk found is a low-severity mandatory invocation of another skill outside this package.
確認済みのセキュリティ上の懸念 (1)
リスク要因
⚙️ 外部コマンド (6)
このレポートを共有・引用
バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。
レポートリンクをコピー
https://skillstore.io/skills/pbakaus-layout/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdownバッジ
[](https://skillstore.io/skills/pbakaus-layout?utm_source=security_passport_badge)HTMLバッジ
<a href="https://skillstore.io/skills/pbakaus-layout?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/pbakaus-layout/security.svg" alt="Skillstore security assessment" loading="lazy"></a>埋め込みカード
<iframe src="https://skillstore.io/embed/skills/pbakaus-layout.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形式の引用
pbakaus. (2026). layout security audit report (audit version 4) [Author version 2.1.1]. Skillstore. https://skillstore.io/skills/pbakaus-layout/audits/4BibTeX形式の引用
@techreport{pbakaus-pbakaus-layout-2026,
author = {pbakaus},
title = {layout security audit report (audit version 4)},
institution = {Skillstore},
year = {2026},
number = {4},
url = {https://skillstore.io/skills/pbakaus-layout/audits/4},
note = {Author version 2.1.1}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "layout security audit report (audit version 4)"
version: "2.1.1"
type: report
authors:
- name: "pbakaus"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/pbakaus-layout/audits/4"
identifiers:
- type: other
value: "skillstore:pbakaus-layout:audit:4"
description: "Skillstore immutable audit report identifier"
Skillstore スコア
このスコアの理由 証拠の信頼度: 高作成できるもの
混雑したプロダクト画面を改善する
業務ユーザーがコンテンツをより速く把握できるよう、余白、グルーピング、密度を改善します。
反復的なマーケティングセクションを修正する
より強い階層、非対称性、セクションのリズムによって、単調なカードグリッドを解消します。
レスポンシブレイアウトの判断をレビューする
コンテンツに合い、画面サイズに応じて適応するFlexboxまたはGridパターンを選択します。
これらのプロンプトを試す
このインターフェイスの余白、整列、視覚的階層をレビューしてください。より把握しやすくするための最小限のレイアウト変更を提案してください。
このUI内の反復的なカードグリッドを見つけ、より強い構成を提案してください。デザインは実用的かつレスポンシブに保ってください。
この画面のレイアウト計画を作成してください。主要領域ごとにFlexboxまたはGridを選択し、余白、密度、階層のルールを定義してください。
これらの画面のレイアウト一貫性を監査してください。余白スケールの問題、弱い階層、カードの使いすぎ、レスポンシブ上のリスクを特定してください。
ベストプラクティス
- レイアウト変更を依頼する前に、スクリーンショット、コンポーネントコード、または明確な画面説明を提供してください。
- 実装編集を依頼する前に、余白スケールと階層計画を求めてください。
- 最終的な変更をモバイルとデスクトップのビューポートで検証してください。
回避
- 画面を示したりレイアウト上の問題を説明したりせずに、一般的な磨き込みを依頼しないでください。
- 値を一貫させるためだけに、すべての場所へ同じ余白を適用しないでください。
- 余白や区切り線のほうが明確な場合に、すべてのセクションをカードに変換しないでください。