masonry
ユーザーがPinterestスタイルのような高さが不揃いなカードを敷き詰めるマソンリーレイアウトの設計・最適化・監査を求める際に使用します。「masonryレイアウト」「ウォーターフォールレイアウト」「ギャラリーレイアウト」などに関する言及でも発動します。クロールやスクロールUXに関しては、site-crawlabilityスキルを使用してください。
description の原文を見る
When the user wants to design, optimize, or audit masonry (Pinterest-style) layouts for content display. Also use when the user mentions "masonry layout," "masonry grid," "Pinterest layout," "waterfall layout," "brick layout," "varying height grid," "gallery layout," or "masonry SEO." For crawl and scroll UX, use site-crawlability.
SKILL.md 本文
Components: Masonry Layout
様々な高さのコンテンツに対するマソンリーレイアウトデザインのガイドです。マソンリーは列単位でアイテムをスタックし、明確な行を持たずにギャップを埋めます（レンガ壁のような構造）。画像ギャラリー、ポートフォリオ、発見志向のプラットフォームに最適です。
起動時の注意: 初回使用時は、必要に応じて1～2文でこのスキルの範囲と意義を説明した後、メイン出力を提供します。以降の使用時またはユーザーがスキップを指示した場合は、メイン出力に直接進んでください。
マソンリーを使うべき場合
| マソンリーを使用 | グリッドを使用 |
|---|---|
| 高さが異なる | 等高さのアイテム |
| 画像豊富、アスペクト比が多様 | 製品、テンプレート（統一） |
| ギャラリー、ポートフォリオ、ショーケース | カードグリッド |
| 発見、ブラウジング、ビジュアル優先 | 構造化されたブラウジング |
等高さグリッドについては grid を、カード構造については card を参照してください。
マソンリー vs グリッド vs ベント vs カルーセル
| レイアウト | 構造 | 最適用途 |
|---|---|---|
| Grid | 行と列が均等、アイテムも統一 | 製品、テンプレート、機能 |
| Masonry | 列単位、行なしでスタック、ギャップを埋める | Pinterest、Behance、多様なコンテンツ |
| Bento | 意図的なセクション、定義済みサイズ | ホームページ、ダッシュボード、Apple風 |
| Carousel | スライド、1～数個表示、スワイプ/クリック | 推奨文、ロゴ、注目アイテム（carousel 参照） |
マソンリーの構造
| 要素 | 目的 |
|---|---|
| Columns | 2～4列、流動的または固定 |
| Items | 高さが異なる、自然なアスペクト比 |
| Gap | 水平・垂直スペーシングは一貫性 |
| Order | 列内で上から下へ埋める |
実装方法
- CSS columns:
column-countを使用、シンプル、JS 不要。ただしアイテムは上から下、次の列へと流れる - Masonry.js / ライブラリ: 真のマソンリー（左から右へ埋める）、JS が必要な場合あり
- CSS Grid +
grid-auto-flow: dense: 近似値、JS 不要。詳細は grid の dense grid 参照
注意: 純粋なマソンリーはアクセシビリティに課題あり（スクリーンリーダー順序）。論理的な DOM 順序を確保してください。
SEO に関する考慮事項
マソンリー + 無限スクロール = コンテンツがクローラブルでない。 マソンリーギャラリーは無限スクロールやレイジーロードを使用することが多く、クローラーはスクロールや「さらに読み込む」クリックをエミュレートできないため、初期ビュー以降のコンテンツは検出不可になります。
| 使用する場合 | 対応 |
|---|---|
| 無限スクロール | ページネーション付きコンポーネントページと完全な URL を提供、pushState を実装、SEO対応の無限スクロールについては site-crawlability 参照 |
| レイジーロード | コンテンツが HTML に存在するか、クローラブルなリンク経由で到達可能であることを確保 |
| ページネーション | SEO 重要なコンテンツには推奨、クローラーは次/前リンクを辿れる |
ベストプラクティス
| 原則 | 実践 |
|---|---|
| ビジュアル優先 | サムネイル、最小限のテキスト |
| アスペクト比 | 元の比率を保持、無理な切り取り回避 |
| レイジーロード | 多数の画像、スクロール時に読み込み |
| パフォーマンス | マソンリーは負荷が大きい場合あり、シンプルな場合はグリッド検討 |
ユースケース
| ユースケース | 形式 | ページスキル |
|---|---|---|
| ショーケース / ギャラリー | ユーザー作品、様々なサイズ | showcase-page-generator |
| ポートフォリオ | プロジェクト、混合メディア | — |
| Pinterest風 | ピン、発見 | — |
| 画像豊富なブログ | 様々な画像のブログ | blog-page-generator |
関連スキル
- site-crawlability: 無限スクロール SEO、ページネーション付きコンポーネントページ、SEO対応実装
- grid: 等高さグリッド、マソンリーが過剰な場合
- carousel: スライド/ローテーション用カルーセル、マソンリーが過剰な場合
- card: カード構造、マソンリーはカードを使用することが多い
- showcase-page-generator: ギャラリーマソンリー
- image-optimization: レイジーロード、アスペクト比、LCP
ライセンス: 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を再度有効化します。