·structural-grid
$

structural-grid

Structural Grid (Exposed Grid / Rail Layout) design system for modern SaaS landing pages. Use when building dark-themed marketing sites, landing pages, or SaaS product pages inspired by Linear, Vercel, Resend, and Planetscale. Provides CSS foundations, section patterns, component recipes, and responsive border logic for the visible-grid aesthetic.

8Installs·0Trend·@nabinkhair42

Installation

$npx skills add https://github.com/nabinkhair42/structural-grid-skill --skill structural-grid

How to Install structural-grid

Quickly install structural-grid AI skill to your development environment via command line

  1. Open Terminal: Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.)
  2. Run Installation Command: Copy and run this command: npx skills add https://github.com/nabinkhair42/structural-grid-skill --skill structural-grid
  3. Verify Installation: Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw

Source: nabinkhair42/structural-grid-skill.

SKILL.md

View raw

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) design system for modern SaaS landing pages. Use when building dark-themed marketing sites, landing pages, or SaaS product pages inspired by Linear, Vercel, Resend, and Planetscale. Provides CSS foundations, section patterns, component recipes, and responsive border logic for the visible-grid aesthetic. Source: nabinkhair42/structural-grid-skill.

Facts (cite-ready)

Stable fields and commands for AI/search citations.

Install command
npx skills add https://github.com/nabinkhair42/structural-grid-skill --skill structural-grid
Category
$Marketing
Verified
First Seen
2026-02-24
Updated
2026-03-10

Browse more skills from nabinkhair42/structural-grid-skill

Quick answers

What is structural-grid?

Structural Grid (Exposed Grid / Rail Layout) design system for modern SaaS landing pages. Use when building dark-themed marketing sites, landing pages, or SaaS product pages inspired by Linear, Vercel, Resend, and Planetscale. Provides CSS foundations, section patterns, component recipes, and responsive border logic for the visible-grid aesthetic. Source: nabinkhair42/structural-grid-skill.

How do I install structural-grid?

Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/nabinkhair42/structural-grid-skill --skill structural-grid Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw

Where is the source repository?

https://github.com/nabinkhair42/structural-grid-skill

Details

Category
$Marketing
Source
skills.sh
First Seen
2026-02-24

Related Skills

None