{"id":"0d58c3fb-1eee-4cd5-a5d9-57f2bbfcd1c5","slug":"nabinkhair42-structural-grid-skill","name":"structural-grid","description":"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.","canonicalUrl":"https://www.xpersona.co/skill/nabinkhair42-structural-grid-skill","sourceUrl":"https://github.com/nabinkhair42/structural-grid-skill","homepage":null,"source":"GITHUB_OPENCLEW","vendor":{"slug":"nabinkhair42","label":"Nabinkhair42","url":"https://github.com/nabinkhair42/structural-grid-skill"},"protocols":["OPENCLEW"],"capabilities":[],"trustScore":null,"trustConfidence":"unknown","artifactCount":0,"benchmarkCount":0,"lastRelease":null,"freshnessAt":"2026-04-15T01:14:12.065Z","freshnessLabel":"Apr 15, 2026","securityReviewed":true,"openapiReady":false,"stats":[{"label":"Trust score","value":"Unknown"},{"label":"Compatibility","value":"OpenClaw"},{"label":"Freshness","value":"Apr 15, 2026"},{"label":"Vendor","value":"Nabinkhair42"},{"label":"Artifacts","value":"0"},{"label":"Benchmarks","value":"0"},{"label":"Last release","value":"Unpublished"}],"factsPreview":[{"factKey":"docs_crawl","label":"Crawlable docs","value":"6 indexed pages on the official domain","category":"integration","href":"https://github.com/login?return_to=https%3A%2F%2Fgithub.com%2Fopenclaw%2Fskills%2Ftree%2Fmain%2Fskills%2Fasleep123%2Fcaldav-calendar","sourceUrl":"https://github.com/login?return_to=https%3A%2F%2Fgithub.com%2Fopenclaw%2Fskills%2Ftree%2Fmain%2Fskills%2Fasleep123%2Fcaldav-calendar","sourceType":"search_document","confidence":"medium","observedAt":"2026-04-15T05:03:46.393Z","isPublic":true,"metadata":{}},{"factKey":"vendor","label":"Vendor","value":"Nabinkhair42","category":"vendor","href":"https://github.com/nabinkhair42/structural-grid-skill","sourceUrl":"https://github.com/nabinkhair42/structural-grid-skill","sourceType":"profile","confidence":"medium","observedAt":"2026-04-15T01:14:12.457Z","isPublic":true,"metadata":{}},{"factKey":"protocols","label":"Protocol compatibility","value":"OpenClaw","category":"compatibility","href":"https://www.xpersona.co/api/v1/agents/nabinkhair42-structural-grid-skill/contract","sourceUrl":"https://www.xpersona.co/api/v1/agents/nabinkhair42-structural-grid-skill/contract","sourceType":"contract","confidence":"medium","observedAt":"2026-04-15T01:14:12.457Z","isPublic":true,"metadata":{}},{"factKey":"traction","label":"Adoption signal","value":"4 GitHub stars","category":"adoption","href":"https://github.com/nabinkhair42/structural-grid-skill","sourceUrl":"https://github.com/nabinkhair42/structural-grid-skill","sourceType":"profile","confidence":"medium","observedAt":"2026-04-15T01:14:12.457Z","isPublic":true,"metadata":{}},{"factKey":"handshake_status","label":"Handshake status","value":"UNKNOWN","category":"security","href":"https://www.xpersona.co/api/v1/agents/nabinkhair42-structural-grid-skill/trust","sourceUrl":"https://www.xpersona.co/api/v1/agents/nabinkhair42-structural-grid-skill/trust","sourceType":"trust","confidence":"medium","observedAt":null,"isPublic":true,"metadata":{}}],"highlights":["4 GitHub stars","Trust evidence available"],"agentCard":{"name":"structural-grid","description":"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":"GITHUB_OPENCLEW","sourceId":"github:1160784002","repository":"https://github.com/nabinkhair42/structural-grid-skill","documentation":"https://www.xpersona.co/skill/nabinkhair42-structural-grid-skill/agent/nabinkhair42-structural-grid-skill","protocols":["OPENCLEW"],"languages":["typescript"],"install":{"command":"git clone https://github.com/nabinkhair42/structural-grid-skill.git","ecosystem":"git"},"examples":[{"kind":"example","language":"css","snippet":"/* Vertical rail lines */\n.page-rails {\n  --rail-offset: max(1rem, calc(50% - 36rem)); /* = max-w-6xl centered */\n  position: relative;\n  overflow-x: clip; /* clip, NOT hidden — hidden breaks position:sticky */\n}\n.page-rails::before,\n.page-rails::after {\n  content: '';\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 1px;\n  background: var(--border);\n  pointer-events: none;\n  z-index: 1;\n}\n.page-rails::before { left: var(--rail-offset); }\n.page-rails::after { right: var(--rail-offset); }\n\n/* Content bounded to rail edges */\n.rail-bounded {\n  margin-left: var(--rail-offset);\n  margin-right: var(--rail-offset);\n}\n\n/* Horizontal section divider between rails */\n.section-divider {\n  position: relative;\n  height: 1px;\n  z-index: 2;\n}\n.section-divider::before {\n  content: '';\n  position: absolute;\n  left: var(--rail-offset, max(1rem, calc(50% - 36rem)));\n  right: var(--rail-offset, max(1rem, calc(50% - 36rem)));\n  height: 1px;\n  background: var(--border);\n}\n\n/* Subtle dot pattern for section backgrounds */\n.dot-pattern {\n  background-image: radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);\n  background-size: 24px 24px;\n}\n\n/* Custom scrollbar — matches dark themes */\n* {\n  scrollbar-width: thin;\n  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;\n}\n::-webkit-scrollbar { width: 6px; height: 6px; }\n::-webkit-scrollbar-track { background: transparent; }\n::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 3px; }\n::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.2); }"},{"kind":"example","language":"css","snippet":"html {\n  scroll-behavior: smooth;\n  scroll-padding-top: 5rem; /* clears the sticky navbar height */\n}"}]}}