用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/navikt/pam-stillingsok --skill aksel-spacing命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
Utforsk en kodebase for å finne muligheter for arkitektoniske forbedringer, med fokus på å gjøre kodebasen mer testbar ved å gjøre grunne moduler dypere. Bruk dette når brukeren vil forbedre arkitekturen, finne refaktoreringsmuligheter, konsolidere tett koblede moduler, eller gjøre en kodebase lettere å navigere i for AI.
Intervju brukeren grundig om en plan eller et design helt til dere har en felles forståelse, og hver gren i beslutningstreet er avklart. Bruk dette når brukeren vil stressteste en plan, bli utfordret på designet sitt, eller sier "grill meg".
Lag en detaljert plan for refaktorering med svært små commits gjennom intervju med brukeren, og gjør den om til en GitHub issue eller et klart issue-utkast. Bruk når brukeren vil planlegge en refaktorering, lage en refaktorerings-RFC, eller bryte opp en refaktorering i trygge, inkrementelle steg.
基于 SOC 职业分类
正在显示 SKILL.md
| name | aksel-spacing |
| description | Responsiv layout med Aksel spacing-tokens og Box, VStack, HStack og HGrid |
Responsive layout-mønstre med Navs Aksel Design System spacing-tokens.
Aldri bruk Tailwind padding/margin (p-, m-, px-, py-) med Aksel-komponenter.
Bruk alltid Aksel spacing-tokens: space-4, space-6, space-8, osv.
import { Box, VStack } from '@navikt/ds-react';
export default function Page() {
return (
<main className="max-w-7xl mx-auto">
<Box
paddingBlock={{ xs: 'space-8', md: 'space-12' }}
paddingInline={{ xs: 'space-4', md: 'space-10' }}
>
<VStack gap={{ xs: 'space-6', md: 'space-8' }}>
{/* Sideinnhold */}
</VStack>
</Box>
</main>
);
}
import { Box, VStack, Heading, BodyShort } from '@navikt/ds-react';
export function Card({ title, children }: { title: string; children: React.ReactNode }) {
return (
<Box
background="surface-default"
padding={{ xs: 'space-6', md: 'space-8' }}
borderRadius="large"
borderWidth="1"
borderColor="border-subtle"
>
<VStack gap="space-4">
<Heading size="medium">{title}</Heading>
<BodyShort>{children}</BodyShort>
</VStack>
</Box>
);
}
import { VStack, HStack, TextField, Button } from '@navikt/ds-react';
export function UserForm() {
return (
<VStack gap="space-6">
{/* Input-felt med konsistent vertikal spacing */}
<VStack gap="space-4">
<TextField label="Fornavn" />
<TextField label="Etternavn" />
<TextField label="E-post" type="email" />
</VStack>
{/* Button row med horisontal spacing */}
<HStack gap="space-4" justify="end">
<Button variant="secondary">Avbryt</Button>
<Button variant="primary">Send inn</Button>
</HStack>
</>
);
}
import { HGrid, Box, VStack, Heading } from '@navikt/ds-react';
export function Dashboard() {
return (
<VStack gap={{ xs: 'space-6', md: 'space-8' }}>
<Heading size="xlarge">Dashboard</Heading>
{/* Responsiv grid: 1 kolonne mobil, 2 nettbrett, 4 desktop */}
<HGrid gap="space-4" columns={{ xs: 1, sm: 2, lg: 4 }}>
<MetricCard title="Brukere" value="1 234" />
<MetricCard title="Inntekt" value="5 678" />
<MetricCard title="Bestillinger" value="910" />
<MetricCard title= = />
{/* Innholdsområde */}
{/* Innhold */}
);
}
import { HGrid, Box, VStack } from '@navikt/ds-react';
export function TwoColumnLayout() {
return (
<HGrid gap="space-6" columns={{ xs: 1, md: 2 }}>
{/* Venstre kolonne */}
<Box
background="surface-default"
padding={{ xs: 'space-6', md: 'space-8' }}
borderRadius="large"
>
<VStack gap="space-4">
{/* Venstre innhold */}
</VStack>
</Box>
{/* Høyre kolonne */}
<Box
background="surface-subtle"
padding={{ xs: 'space-6', md: 'space-8' }}
borderRadius="large"
>
<VStack gap="space-4">
{/* Høyre innhold */}
);
}
import { Box, VStack, HGrid, Select, TextField, Heading } from '@navikt/ds-react';
export function FilterSection() {
return (
<Box
background="surface-subtle"
padding={{ xs: 'space-4', md: 'space-6' }}
borderRadius="large"
>
<VStack gap="space-4">
<Heading size="small">Filters</Heading>
{/* Responsive filter inputs */}
<HGrid gap="space-4" columns={{ xs: 1, md: 3 }}>
<Select label="Department">
<option>All</option>
</Select>
<Select =>
All
);
}
"space-0"; // 0px
"space-1"; // 4px
"space-2"; // 8px
"space-3"; // 12px
"space-4"; // 16px ← Form field gaps
"space-5"; // 20px
"space-6"; // 24px ← Card padding (mobile)
"space-8"; // 32px ← Card padding (desktop), section gaps
"space-10"; // 40px ← Page padding (desktop)
"space-12"; // 48px ← Page padding block (desktop)
xs: "0px"; // Mobile (default)
sm: "480px"; // Large mobile
md: "768px"; // Tablet
lg: "1024px"; // Desktop
xl: "1280px"; // Large desktop
// ✅ Page padding
paddingBlock={{ xs: 'space-8', md: 'space-12' }}
paddingInline={{ xs: 'space-4', md: 'space-10' }}
// ✅ Card padding
padding={{ xs: 'space-6', md: 'space-8' }}
// ✅ Section gaps
gap={{ xs: 'space-6', md: 'space-8' }}
// ✅ Form field gaps
gap="space-4"
// ✅ Button group gaps
gap="space-4"
// ❌ NEVER use Tailwind
className="p-4 m-2" // WRONG!
className="px-6 py-4" // WRONG!