نظام تصميم الشبكة الهيكلية (تخطيط الشبكة / السكك الحديدية المكشوفة) للصفحات المقصودة SaaS الحديثة. يُستخدم عند إنشاء مواقع تسويق ذات سمات داكنة أو صفحات مقصودة أو صفحات منتجات SaaS مستوحاة من Linear وVercel وResend وPlanetscale. يوفر أسس CSS وأنماط الأقسام ووصفات المكونات ومنطق الحدود سريع الاستجابة لجماليات الشبكة المرئية.
ثبّت مهارة الذكاء الاصطناعي structural-grid بسرعة في بيئة التطوير لديك عبر سطر الأوامر
المصدر: 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 الحديثة. يُستخدم عند إنشاء مواقع تسويق ذات سمات داكنة أو صفحات مقصودة أو صفحات منتجات SaaS مستوحاة من Linear وVercel وResend وPlanetscale. يوفر أسس CSS وأنماط الأقسام ووصفات المكونات ومنطق الحدود سريع الاستجابة لجماليات الشبكة المرئية. المصدر: nabinkhair42/structural-grid-skill.
حقول وأوامر مستقرة للاقتباس في أنظمة الذكاء الاصطناعي والبحث.
npx skills add https://github.com/nabinkhair42/structural-grid-skill --skill structural-gridنظام تصميم الشبكة الهيكلية (تخطيط الشبكة / السكك الحديدية المكشوفة) للصفحات المقصودة SaaS الحديثة. يُستخدم عند إنشاء مواقع تسويق ذات سمات داكنة أو صفحات مقصودة أو صفحات منتجات SaaS مستوحاة من Linear وVercel وResend وPlanetscale. يوفر أسس CSS وأنماط الأقسام ووصفات المكونات ومنطق الحدود سريع الاستجابة لجماليات الشبكة المرئية. المصدر: nabinkhair42/structural-grid-skill.
افتح الطرفية أو أداة سطر الأوامر لديك مثل Terminal أو iTerm أو Windows Terminal انسخ ونفّذ هذا الأمر: npx skills add https://github.com/nabinkhair42/structural-grid-skill --skill structural-grid بعد التثبيت، سيتم إعداد المهارة تلقائيا في بيئة البرمجة بالذكاء الاصطناعي لديك وتصبح جاهزة للاستخدام في Claude Code أو Cursor أو OpenClaw
https://github.com/nabinkhair42/structural-grid-skill