list
ユーザーがコンテンツ表示用のリストレイアウトの設計・最適化・監査を行いたいときに使用します。「リストレイアウト」「リストデザイン」「縦並びリスト」「スタックリスト」「ブログ一覧」「記事一覧」「ドキュメント一覧」「検索結果レイアウト」「無限スクロールリスト」などのキーワードが出た際にも活用してください。なお、ブログインデックスページの場合は blog-page-generator を使用してください。
description の原文を見る
When the user wants to design, optimize, or audit list layouts for content display. Also use when the user mentions "list layout," "list design," "vertical list," "stacked list," "blog list," "article list," "documentation list," "search results layout," or "infinite scroll list." For blog index page, use blog-page-generator.
SKILL.md 本文
Components: List Layout
リストレイアウトの設計に関するガイドです。線形でスタック状のコンテンツ表示に対応しています。リストはコンパクトでテキスト量が多く、ユーザーはタイトルまたはメタデータでスキャンします。ブログインデックス、ドキュメント、検索結果、密度の高いコンテンツに使用されます。
呼び出し時: 初回使用時は、このスキルの概要と重要性について1～2文で説明すると有益な場合は冒頭に記載し、その後メイン出力を提供してください。その後の使用時またはユーザーがスキップを要求した場合は、メイン出力に直接進んでください。
リストを使用する場合
| リストを使用 | グリッドを使用 |
|---|---|
| テキスト量が多く、タイトルでスキャン | ビジュアルコンテンツ、均等な強調 |
| アイテム数が多く、コンパクト表示 | アイテム数が少なく、ブラウジング |
| ブログインデックス、ドキュメント、検索結果 | 製品、テンプレート、ギャラリー |
| F字パターン読書（左上、左列） | 発見、探索 |
グリッドレイアウトについてはgrid、カード構造についてはcardを参照してください。
リストの構造
| 要素 | 目的 |
|---|---|
| アイテム | 単一列、垂直にスタック |
| アイテムあたり | タイトル、オプションのメタデータ（日付、著者）、抜粋、リンク |
| スペーシング | 一貫したギャップ、区切り線または交互の背景 |
| 密度 | コンパクト（ドキュメント）対ゆったり（ブログ） |
リストのバリエーション
| バリエーション | 用途 |
|---|---|
| シンプルリスト | タイトル + リンク、最小限（ナビゲーション、目次） |
| リッチリスト | タイトル、抜粋、日付、著者 |
| テーブル風 | メタデータの列（日付、ステータス） |
| サムネイル付き | 小さい画像 + テキスト |
ベストプラクティス
| 原則 | 実装方法 |
|---|---|
| スキャン可能 | 明確なタイトル、一貫した階層 |
| コンパクト | グリッドより垂直スペースが少ない |
| リンク領域 | 全行またはタイトルがクリック可能 |
| メタデータ | 日付、著者、カテゴリ、セカンダリスタイリング |
F字パターン
ユーザーはまず左上から読み始め、左列をスキャンします。プライマリコンテンツ（タイトル）は左揃えに配置し、メタデータはセカンダリとしてください。
インフィニットスクロール
リスト用のインフィニットスクロールを使用する場合（例：ブログインデックス、検索結果）、クローラーはスクロール時に読み込まれたコンテンツにアクセスできません。ページネーション付きコンポーネントページを提供するか、SEOが重要なコンテンツには従来のページネーションを使用してください。SEO対応のインフィニットスクロール実装についてはsite-crawlabilityを参照してください。
レスポンシブ
- モバイル: 単一列、全幅アイテム
- タッチターゲット: タッチ可能な行は≥44×44px
- トランケーション: 長いタイトル、省略記号または設計による折り返し
関連スキル
- site-crawlability: インフィニットスクロールのSEO、ページネーション付きコンポーネントページ、SEO対応の実装
- grid: グリッド対リスト、各々の使い分け
- carousel: スライド用カルーセル、リストが長すぎる場合
- card: リスト内のカード（例：サムネイル付きブログ）
- toc-generator: リストとしての目次、ジャンプリンク
- blog-page-generator: ブログインデックスリスト
- article-page-generator: 記事リスト形式
- docs-page-generator: ドキュメントリスト
ライセンス: MIT(寛容ライセンスのため全文を引用しています) · 原本リポジトリ
詳細情報
- 作者
- kostja94
- ライセンス
- MIT
- 最終更新
- 不明
Source: https://github.com/kostja94/marketing-skills / ライセンス: MIT
関連スキル
secure-code-guardian
認証・認可の実装、ユーザー入力の保護、OWASP Top 10の脆弱性対策が必要な場合に使用します。bcrypt/argon2によるパスワードハッシング、パラメータ化ステートメントによるSQLインジェクション対策、CORS/CSPヘッダーの設定、Zodによる入力検証、JWTトークンの構築などのカスタムセキュリティ実装に対応します。認証、認可、入力検証、暗号化、OWASP Top 10対策、セッション管理、セキュリティ強化全般で活用できます。ただし、構築済みのOAuth/SSO統合や単独のセキュリティ監査が必要な場合は、より特化したスキルの検討をお勧めします。
claude-authenticity
APIエンドポイントが本物のClaudeによって支えられているか（ラッパーやプロキシ、偽装ではないか）を、claude-verifyプロジェクトを模した9つの重み付きルールベースチェックで検証できます。また、Claudeの正体を上書きしているプロバイダーから注入されたシステムプロンプトも抽出します。完全に自己完結しており、httpx以外の追加パッケージは不要です。Claude APIキーまたはエンドポイントを検証したい場合、サードパーティのClaudeサービスが本物か確認したい場合、APIプロバイダーのClaude正当性を監査したい場合、複数モデルを並行してテストしたい場合、またはプロバイダーが注入したシステムプロンプトを特定したい場合に使用できます。
anth-security-basics
Anthropic Claude APIのセキュリティベストプラクティスを適用し、キー管理、入力値の検証、プロンプトインジェクション対策を実施します。APIキーの保護、Claudeに送信する前のユーザー入力検証、コンテンツセーフティガードレールの実装が必要な場合に活用できます。「anthropic security」「claude api key security」「secure anthropic」「prompt injection defense」といったフレーズでトリガーされます。
x-ray
x-ray.mdプレ監査レポートを生成します。概要、強化された脅威モデル（プロトコルタイプのプロファイリング、Gitの重み付け攻撃面分析、時間軸リスク分析、コンポーザビリティ依存関係マッピング）、不変条件、統合、ドキュメント品質、テスト分析、開発者・Gitの履歴をカバーしています。「x-ray」「audit readiness」「readiness report」「pre-audit report」「prep this protocol」「protocol prep」「summarize this protocol」のキーワードで実行されます。
semgrep
Semgrepスタティック分析スキャンを実行し、カスタム検出ルールを作成します。Semgrepでのコードスキャン、セキュリティ脆弱性の検出、カスタムYAMLルールの作成、または特定のバグパターンの検出が必要な場合に使用します。重要：ユーザーが「バグをスキャンしたい」「コード品質を確認したい」「脆弱性を見つけたい」「スタティック分析」「セキュリティlint」「コード監査」または「コーディング標準を適用したい」と尋ねた場合も、Semgrepという名称を明記していなくても、このスキルを使用してください。Semgrepは30以上の言語に対応したパターンベースのコードスキャンに最適なツールです。
ghost-bits-cast-attack
Java「ゴーストビッツ」/キャストアタック プレイブック（Black Hat Asia 2026）。16ビット文字が8ビットバイトに暗黙的に縮小されるJavaサービスへの攻撃時に使用します。WAF/IDSを回避して、SQLインジェクション、デシリアライゼーション型RCE、ファイルアップロード（Webシェル）、パストトラバーサル、CRLF インジェクション、リクエストスマグリング、SMTPインジェクションを実行できます。Tomcat、Spring、Jetty、Undertow、Vert.x、Jackson、Fastjson、Apache Commons BCEL、Apache HttpClient、Angus Mail、JDK HttpServer、Lettuce、Jodd、XMLWriterに影響し、WAFバイパスにより多くの「パッチ済み」CVEを再度有効化します。