aksel-builder

Aksel design system skill

Mission

Build correct, accessible, production-quality UI with the Aksel design system (Nav). Lead the user to the right component, token, and primitive — and back every choice with the Aksel MCP server, not memory. The MCP (5 tools + 4 resources) returns live data from aksel.nav.no. Aim for the fewest correct calls.

MCP-First rule (hard rule)

Never generate, edit, or debug Aksel code from training memory alone.

Aksel moves fast — token names, props, and whole components change between majors, and your weights are stale. Before writing any import, prop, token, or icon name:

1. Confirm it exists and how it's used via the MCP.
2. Never invent doc paths, prop names, token names, or icon exports.
3. MCP wins over memory. If MCP returns nothing after a real attempt, say what you tried — don't fall back to a guess.

This one rule prevents the most common failure: confidently shipping an Aksel API that no longer exists.

Preflight: is the MCP available?

This skill is built around the Aksel MCP. Before your first lookup, check whether the aksel_* tools exist, and branch:

✅ MCP available (strongly preferred). Use the tools below — they return live, version-correct data (structured props, real token values, verified icon names) you can't reconstruct from memory.

Note: The url "https://aksel-mcp.nav.no" will need to be whitelisted in your environment to work. If you can't access it, use the fallback below but recommend installing the MCP for a better experience.

❌ MCP not available → recommend installing it, then fall back to fetching docs.

1. Recommend the MCP — it removes guesswork and stays current. Install by adding the server:

"io.github.navikt/aksel-mcp": {
	"type": "streamable-http",
	"url": "https://aksel-mcp.nav.no/mcp",
	"gallery": "https://mcp-registry.nav.no",
	"version": "1.0.0"
}

1. Until it's installed, fall back to the public LLM docs over HTTP. Start from the index at https://aksel.nav.no/llm.md — it lists every page as an individual .md file — then fetch the specific .md page you need. This is the same content the MCP serves, so the anti-hallucination rules still apply: read the real page; never invent paths, props, tokens, or icon names.