Structural Grid (Exposed Grid / Rail Layout) Designsystem für moderne SaaS-Landingpages. Verwenden Sie es, wenn Sie Marketing-Websites, Landingpages oder SaaS-Produktseiten mit dunklen Themen erstellen, die von Linear, Vercel, Resend und Planetscale inspiriert sind. Bietet CSS-Grundlagen, Abschnittsmuster, Komponentenrezepte und reaktionsfähige Rahmenlogik für die Ästhetik des sichtbaren Rasters.
Installieren Sie den KI-Skill structural-grid schnell in Ihrer Entwicklungsumgebung über die Kommandozeile
Quelle: 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.
Structural Grid (Exposed Grid / Rail Layout) Designsystem für moderne SaaS-Landingpages. Verwenden Sie es, wenn Sie Marketing-Websites, Landingpages oder SaaS-Produktseiten mit dunklen Themen erstellen, die von Linear, Vercel, Resend und Planetscale inspiriert sind. Bietet CSS-Grundlagen, Abschnittsmuster, Komponentenrezepte und reaktionsfähige Rahmenlogik für die Ästhetik des sichtbaren Rasters. Quelle: nabinkhair42/structural-grid-skill.
Stabile Felder und Befehle für KI/Such-Zitate.
npx skills add https://github.com/nabinkhair42/structural-grid-skill --skill structural-gridStructural Grid (Exposed Grid / Rail Layout) Designsystem für moderne SaaS-Landingpages. Verwenden Sie es, wenn Sie Marketing-Websites, Landingpages oder SaaS-Produktseiten mit dunklen Themen erstellen, die von Linear, Vercel, Resend und Planetscale inspiriert sind. Bietet CSS-Grundlagen, Abschnittsmuster, Komponentenrezepte und reaktionsfähige Rahmenlogik für die Ästhetik des sichtbaren Rasters. Quelle: nabinkhair42/structural-grid-skill.
Öffnen Sie Ihr Terminal oder Kommandozeilen-Tool (Terminal, iTerm, Windows Terminal, etc.) Kopieren Sie diesen Befehl und führen Sie ihn aus: npx skills add https://github.com/nabinkhair42/structural-grid-skill --skill structural-grid Nach der Installation wird der Skill automatisch in Ihrer KI-Programmierumgebung konfiguriert und ist bereit zur Verwendung in Claude Code, Cursor oder OpenClaw
https://github.com/nabinkhair42/structural-grid-skill