aksel-spacing

Build responsive layouts using Aksel v8+ spacing tokens and layout primitives.

1|1|Updated Feb 2, 2026

Search Tags:#layout #responsive #tokens #design-system #spacing #aksel

Ready to run

npx skills add https://github.com/navikt/watson-sak-frontend --skill aksel-spacing

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: aksel-spacing
Source: https://github.com/navikt/watson-sak-frontend/tree/main/.opencode/skills/aksel-spacing
Command: npx skills add https://github.com/navikt/watson-sak-frontend --skill aksel-spacing

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Building consistent, responsive layouts across a project using Aksel v8+ tokens and primitives can be error-prone and time-consuming without a standardized guide.

Core Features & Use Cases

Spacing tokens and layout primitives (Box, HStack, VStack, HGrid, Page, Bleed) aligned with Aksel v8+.
Breakpoint-driven styling with ResponsiveProp patterns to adapt layouts across mobile and desktop.
Use Case: craft a dashboard with a sidebar and content area that scales cleanly across breakpoints.

Quick Start

Build a simple responsive layout by combining Box, HStack, and HGrid using spacing tokens from Aksel v8.

Frequently Asked Questions about aksel-spacing

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I build responsive layouts with Aksel spacing tokens?▼

Build responsive layouts by combining Aksel v8+ spacing tokens with layout primitives like Box, HStack, VStack, and HGrid to ensure consistent spacing across components. This approach standardizes layout dimensions and adapts cleanly across breakpoints.

What is the best way to manage breakpoint-driven styling in an Aksel design system project?▼

Manage breakpoint-driven styling using ResponsiveProp patterns provided by the Aksel design system. This allows you to adapt layout primitives like HGrid and Page across mobile and desktop views without custom CSS.

Does Aksel spacing work with standard layout primitives for dashboard scaling?▼

Aksel spacing works seamlessly with standardized primitives like Box and Bleed to build dashboards with sidebars. Layouts scale cleanly across breakpoints by applying token-based spacing and ResponsiveProp patterns.

Can I use HGrid and VStack to create consistent responsive layouts without custom CSS?▼

You can use HGrid and VStack to create consistent responsive layouts without custom CSS by applying Aksel v8+ spacing tokens. These primitives handle internal distribution and spacing automatically based on your token configuration.

Why does my layout break when switching between mobile and desktop breakpoints using Aksel?▼

Layouts break when switching breakpoints if you bypass standardized spacing tokens and ResponsiveProp patterns. Ensure you use Aksel v8+ layout primitives like HStack and Page to maintain consistent, breakpoint-aware spacing.

Do I need Aksel v8+ tokens to use layout primitives like Bleed and Page?▼

You need Aksel v8+ tokens to use layout primitives like Bleed and Page effectively, as these primitives are designed to consume the standardized spacing variables introduced in that version for breakpoint responsiveness.