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

aksel

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

Updated Jan 31, 2026
Search Tags:#accessibility#react#design system#frontend development#ui components#nav design
One-click install
npx skills add https://github.com/navikt/deployment-audit --skill aksel
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: aksel
Source: https://github.com/navikt/deployment-audit/tree/main/.agents/skills/aksel
Command: npx skills add https://github.com/navikt/deployment-audit --skill aksel

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides comprehensive guidance and components for building user interfaces according to Nav's design system, ensuring consistency, accessibility, and adherence to best practices.

Core Features & Use Cases

  • Component Library: Access to a rich set of React components (@navikt/ds-react) for various UI elements like forms, navigation, and feedback.
  • Design Tokens: Utilize predefined design tokens for colors, spacing, and typography (@navikt/ds-tokens) to maintain visual consistency.
  • Best Practices: Follow guidelines for universal design, form validation, and accessibility.
  • Use Case: A developer needs to create a new form within a Nav application. They can use this Skill to find the correct form components, understand how to implement labels and error messages, and ensure the form is accessible.

Quick Start

Use the aksel skill to find the correct component for a text input field.

Frequently Asked Questions about aksel

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

FAQPage Schema
How do I build accessible React forms with Nav's design system?▼

To build accessible React forms with Nav's design system, use the Aksel Skill to source form components from @navikt/ds-react and apply guidelines for universal design, labels, and error message validation.

What design tokens are available for frontend development in Nav applications?▼

Nav design tokens for frontend development are provided through @navikt/ds-tokens, offering predefined values for colors, spacing, and typography to maintain visual consistency across user interfaces.

Can I use Aksel components without a dedicated React setup?▼

Aksel components require a React environment, as the core UI components are distributed through the @navikt/ds-react package, which necessitates a React frontend architecture to render properly.

What is the best way to ensure UI consistency when building Nav applications?▼

The best way to ensure UI consistency when building Nav applications is to utilize the predefined design tokens from @navikt/ds-tokens alongside the standardized React components from @navikt/ds-react.

Are there specific accessibility guidelines for Nav design system components?▼

Yes, Nav design system components adhere to universal design principles, providing built-in best practices for accessibility and form validation to ensure interfaces are usable by everyone.

How do I find the correct UI component for a text input field in Nav?▼

To find the correct UI component for a text input field in Nav, use the Aksel Skill to query the @navikt/ds-react component library and retrieve the appropriate form input element and its implementation guidance.

Related Skills

Explore More Design & Creative Skills→
archetypeaiarchetypeai

apply-ds

Migrate SvelteKit demos to Archetype DS tokens, components, and patterns.

Official
Intermediate
DevXojeDevXoje

frontend-ui-ux

Translate designer intent into front-end UI/UX components without mockups.

Community
Basic
SapanPatibandhaSapanPatibandha

incident-management-ui

Blueprint React and TypeScript frontend architecture for an Incident Management UI.

Community
Advanced
danzam98danzam98
1

stripe-level-ui

Create polished UI components in Next.js, React, and Tailwind projects.

Community
Advanced