skills.rest
navikt
naviktOFFICIAL
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/navikt/watson-sak-frontend --skill aksel-spacing
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
naviktnavikt

aksel

Build Nav user interfaces with Aksel React components and design tokens.

Official
Intermediate
dylantarredylantarre
38

layout-primitives

Create reusable layout primitives with CSS flexbox, grid, and React components.

Community
Basic
ihlamuryihlamury
73

wise-ui-skills

Enforce Wise UI design constraints for light-mode interfaces with Inter font and 4px grid.

Community
Intermediate
yunusemrgrlyunusemrgrl

tailwindcss-development

Automate Tailwind CSS development with utility classes for responsive layouts.

Community
Intermediate