القائمة
Responsiv layout med Aksel spacing-tokens og Box, VStack, HStack og HGrid
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
استنادا إلى تصنيف SOC المهني
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/navikt/sif-brukerdialog --skill aksel-spacingيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
عرض SKILL.md
Veiledning for oppsett av en ny søknadsapp med @sif/soknad-app — SøknadRouter, SøknadAppProvider, AppContext og routing shell.
Bruk denne skillen for å fange opp og rette feilaktig datoparsing fra backend i v2-apper — tidssoneproblemer, feil bruk av Date/dayjs og blandede ISODate/ISODateTime-verdier i frontend.
Legg til et nytt steg i en søknadsapp som bruker @sif/soknad-app og @sif/rhf — oppretter alle filer og oppdaterer config/routing/i18n.
| name | aksel-spacing |
| type | referanse |
| description | Responsiv layout med Aksel spacing-tokens og Box, VStack, HStack og HGrid |
Box, VStack, HStack eller HGrid.p-, m-, px-, py-) med Aksel-komponenter. Bruk alltid Aksel spacing-tokens.Box for padding/border/bakgrunn, VStack for vertikal stacking, HStack for horisontal og HGrid for responsive grids.{ xs: 'space-4', md: 'space-8' }) for padding og gap som skal tilpasse seg skjermstørrelse.Token-navnet er px-verdien. space-8 = 8px, space-16 = 16px, osv.
"space-0" // 0px (0rem)
"space-1" // 1px (0.0625rem)
"space-2" // 2px (0.125rem)
"space-4" // 4px (0.25rem)
"space-6" // 6px (0.375rem)
"space-8" // 8px (0.5rem) ← Kompakt gap inni kort (f.eks. heading + brødtekst)
"space-12" // 12px (0.75rem)
"space-16" // 16px (1rem) ← Feltgap i skjema, knappgrupper
"space-20" // 20px (1.25rem)
"space-24" // 24px (1.5rem) ← Kortpadding (mobil)
"space-28" // 28px (1.75rem)
"space-32" // 32px (2rem) ← Kortpadding (desktop), seksjonsgap
"space-40" // 40px (2.5rem) ← Sidepadding inline (desktop)
"space-48" // 48px (3rem) ← Sidepadding block (desktop)
Ikke-eksisterende tokens:
space-3,space-5,space-10finnes ikke — TypeScript vil gi feil.
xs: "0px" // Mobil (default)
sm: "480px" // Stor mobil
md: "768px" // Nettbrett
lg: "1024px" // Desktop
2xl: "1440px" // Stor desktop
// Page container
<Box paddingBlock={{ xs: 'space-32', md: 'space-48' }} paddingInline={{ xs: 'space-16', md: 'space-40' }}>
<VStack gap={{ xs: 'space-24', md: 'space-32' }}>{/* innhold */}</VStack>
</Box>
// Card
<Box background="surface-default" padding={{ xs: 'space-24', md: 'space-32' }} borderRadius="large" borderWidth="1" borderColor="border-subtle">
<VStack gap="space-16">{/* innhold */}</VStack>
</Box>
// Form layout
<VStack gap="space-24">
<VStack gap="space-16">
<TextField label= />
Avbryt
Send inn