最新の SaaS ランディング ページ用の構造グリッド (露出グリッド/レール レイアウト) デザイン システム。 Linear、Vercel、Resend、Planetscale からインスピレーションを得た、ダークテーマのマーケティング サイト、ランディング ページ、または SaaS 製品ページを構築するときに使用します。 CSS の基礎、セクション パターン、コンポーネント レシピ、および可視グリッドの美しさのための応答性の高い境界線ロジックを提供します。
コマンドラインで structural-grid AI スキルを開発環境にすばやくインストール
ソース: nabinkhair42/structural-grid-skill。
You are implementing a Structural Grid (also called "Exposed Grid" or "Rail Layout") design pattern. This is the modern SaaS design pattern used by Linear, Vercel, Resend, Profound, and Planetscale — where the underlying page grid is promoted to a first-class visual element.
Add these to your global CSS. All measurements derive from a single --rail-offset variable.
Always use overflow-x: clip on .page-rails, NEVER overflow-x: hidden. hidden creates a new scroll container which breaks position: sticky on any descendant. clip clips overflow visually without affecting scroll/sticky behavior.
最新の SaaS ランディング ページ用の構造グリッド (露出グリッド/レール レイアウト) デザイン システム。 Linear、Vercel、Resend、Planetscale からインスピレーションを得た、ダークテーマのマーケティング サイト、ランディング ページ、または SaaS 製品ページを構築するときに使用します。 CSS の基礎、セクション パターン、コンポーネント レシピ、および可視グリッドの美しさのための応答性の高い境界線ロジックを提供します。 ソース: nabinkhair42/structural-grid-skill。
AI/検索での引用用の安定したフィールドとコマンド。
npx skills add https://github.com/nabinkhair42/structural-grid-skill --skill structural-grid最新の SaaS ランディング ページ用の構造グリッド (露出グリッド/レール レイアウト) デザイン システム。 Linear、Vercel、Resend、Planetscale からインスピレーションを得た、ダークテーマのマーケティング サイト、ランディング ページ、または SaaS 製品ページを構築するときに使用します。 CSS の基礎、セクション パターン、コンポーネント レシピ、および可視グリッドの美しさのための応答性の高い境界線ロジックを提供します。 ソース: nabinkhair42/structural-grid-skill。
ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/nabinkhair42/structural-grid-skill --skill structural-grid インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code、Cursor、OpenClaw で使用できるようになります
https://github.com/nabinkhair42/structural-grid-skill