elite-layouts
プレミアムな Web エクスペリエンスのための最新の CSS レイアウト パターン。ベント グリッド、水平スクロール セクション、スティッキー/パララックス レイアウト、コンテナ クエリ、CSS グリッド、非対称レイアウト、雑誌レイアウト、レスポンシブ グリッド システム、スクロール スナップ、またはレイアウトとアニメーションの統合について質問された場合に使用します。
SKILL.md
| Bento Grids | bento-grids.md | | Horizontal Scroll | horizontal-scroll.md | | Sticky & Parallax | sticky-parallax.md | | Container Queries | container-queries.md |
| Portfolio | Bento + Horizontal | Feature work, case studies | | E-commerce | Container queries | Product grids, responsive cards | | Landing page | Sticky parallax | Hero → Features → CTA flow | | Dashboard | Bento + Container | Resizable panels, widgets | | Blog/Magazine | Asymmetric grid | Editorial feel, visual hierarchy |
| Agency | Horizontal + Bento | Immersive, exploratory |
プレミアムな Web エクスペリエンスのための最新の CSS レイアウト パターン。ベント グリッド、水平スクロール セクション、スティッキー/パララックス レイアウト、コンテナ クエリ、CSS グリッド、非対称レイアウト、雑誌レイアウト、レスポンシブ グリッド システム、スクロール スナップ、またはレイアウトとアニメーションの統合について質問された場合に使用します。 ソース: rshvr/elite-web-design。
引用可能な情報
AI/検索での引用用の安定したフィールドとコマンド。
- インストールコマンド
npx skills add https://github.com/rshvr/elite-web-design --skill elite-layouts- カテゴリ
- </>開発ツール
- 認証済み
- —
- 初回登録
- 2026-02-11
- 更新日
- 2026-02-18
クイックアンサー
elite-layouts とは?
プレミアムな Web エクスペリエンスのための最新の CSS レイアウト パターン。ベント グリッド、水平スクロール セクション、スティッキー/パララックス レイアウト、コンテナ クエリ、CSS グリッド、非対称レイアウト、雑誌レイアウト、レスポンシブ グリッド システム、スクロール スナップ、またはレイアウトとアニメーションの統合について質問された場合に使用します。 ソース: rshvr/elite-web-design。
elite-layouts のインストール方法は?
ターミナルまたはコマンドラインツール(Terminal、iTerm、Windows Terminal など)を開きます このコマンドをコピーして実行します: npx skills add https://github.com/rshvr/elite-web-design --skill elite-layouts インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code や Cursor で使用できるようになります
ソースリポジトリはどこですか?
https://github.com/rshvr/elite-web-design
詳細
- カテゴリ
- </>開発ツール
- ソース
- user
- 初回登録
- 2026-02-11