Tools

Agent Skills

@dnb/eufemia includes official Agent Skills for working with Eufemia:

eufemia-components — find components and verify current props, events, Forms, and layout APIs.
eufemia-compose — compose pages and features from Eufemia primitives and guidance.
eufemia-accessibility — apply Eufemia-specific accessibility guidance.
eufemia-review — review code against supported APIs, deprecations, and documented rules.
eufemia-migrate — plan and validate upgrades using current release documentation.

The skills provide workflows and tell the agent which Eufemia documentation to retrieve. Component APIs, tokens, theme support, and other version-sensitive facts remain in Eufemia's packaged documentation and MCP server rather than being copied into the skills.

Install project skills

In a project that depends on @dnb/eufemia, use the CLI provided by the same package:

yarn eufemia skills install

If the project does not depend on Eufemia yet, npm can download the package only for the duration of the installer command without changing package.json or creating project node_modules:

npm exec --yes --package @dnb/eufemia@latest -- eufemia skills install

This installs the project skill files, not the Eufemia runtime dependency. The RAIWork marketplace plugin bundles the same skills and does not require @dnb/eufemia to be installed just to discover them. If package downloads are also prohibited, an administrator must pre-provision one of the supported skill directories or the user must use an approved marketplace distribution.

The command asks where to install the five skills. Select one or more supported project locations:

Claude Code and GitHub Copilot: .claude/skills
GitHub Copilot: .github/skills
Codex and GitHub Copilot: .agents/skills

Use Space to toggle each location and Enter to install all selected locations.

Locations with a managed Eufemia installation are selected by default when the command runs again. Clearing a location skips its update; it does not uninstall the existing files.

Automation and CI

Interactive users should use the selector. Scripts and environments without an interactive terminal cannot answer it, so automation must provide one project location explicitly:

yarn eufemia skills install --target .agents/skills

Equivalent commands with npm or pnpm are:

npm exec eufemia -- skills install
pnpm exec eufemia skills install

Commit the installed skills when they should be available to colleagues and cloud agents. The installer also writes .eufemia-skills-lock.json in every selected skills directory. Commit each lock file together with the generated skills so updates can detect local changes.

Manage installed skills

# Show the skills included in the installed Eufemia package
yarn eufemia skills list

# Verify installed files and package version
yarn eufemia skills check

# Update project skills after upgrading @dnb/eufemia
yarn eufemia skills update

# Remove files managed by the Eufemia installer
yarn eufemia skills uninstall

update opens the same selector with managed locations selected. check uses .claude/skills unless you pass another installed location with --target. Without --target, uninstall removes every managed supported location in the project. It validates all selected locations before removing any files. check reports missing, changed, stale, or version-mismatched files. update refuses to overwrite locally modified skill files. Review those changes first; use --force only when replacing them intentionally. uninstall removes only files tracked by Eufemia skills locks and leaves unrelated project skills untouched.

Evaluate skill changes

Eufemia keeps representative output cases and trigger/non-trigger prompts in packages/dnb-eufemia/agent-skills-evals. Before changed instructions are released, run every case in a fresh session with the changed skill and a baseline, grade the assertions, record token and duration differences, and review the output manually. Positive routing cases must select the expected skill, while unrelated and generic visual-exploration cases must not select an Eufemia skill.

Follow the Agent Skills evaluation workflow and keep generated grading and benchmark workspaces with the release record, not in the published package.

The CLI is part of the main package and can also report its version:

yarn eufemia --version
yarn eufemia skills --help

Connect the documentation

Install the Agent Skills and configure one of the MCP options below. Skills are the reusable workflow; MCP provides the current Eufemia facts. If MCP is not available, the skills should say that the relevant information could not be verified instead of guessing.

AI Assistance and MCP Server

NB: This feature is experimental and may change in the future. Please give us feedback on your experience with it!

If your AI coding agent supports the Model Context Protocol (MCP), you have two options:

Use the hosted MCP server at https://server.eufemia.dnb.no/mcp/web — no installation needed, always serves the latest released docs.
Run a local MCP server that exposes the packaged documentation from /docs — useful for offline / air-gapped work, and pinned to the exact @dnb/eufemia version installed in your project (so the docs the AI sees match the components you actually consume).

Hosted MCP server

Point your MCP-aware client at the public Streamable HTTP endpoint:

https://server.eufemia.dnb.no/mcp/web

It supports the modern Streamable HTTP transport, and serves the same documentation tools (docs_entry, docs_search, component_find, etc.) as the local server below. A health endpoint is available at https://server.eufemia.dnb.no/healthz.

Version behavior

The hosted endpoint is intentionally unversioned and always serves the latest released Eufemia documentation. It does not require Eufemia to be installed. Use docs_meta to identify the served version:

When it matches the project's installed @dnb/eufemia version, use the hosted tools normally.
When it differs, use the local MCP server from the installed package before relying on version-specific components, properties, or behavior.
When the project has no Eufemia dependency, treat the hosted version as the proposed target and state it explicitly. Install that package version before claiming the implementation is executable or verified.
When dependency installation is prohibited, the hosted server can still support documentation and planning, but skills must not claim runtime implementation or verification.

Offline use requires a preinstalled package or pre-provisioned documentation; neither the hosted server nor a transient skill download is available without network access.

Example: Claude CLI / raicode CLI

claude mcp add --transport http eufemia https://server.eufemia.dnb.no/mcp/web
# or
raicode mcp add --transport http eufemia https://server.eufemia.dnb.no/mcp/web

Local MCP server (pinned to your installed Eufemia version)

Run the local MCP server when you want the docs the AI sees to match the exact @dnb/eufemia version you have installed — for example to avoid suggestions that reference components or props from a newer release than your project consumes — or when the hosted server is unreachable (offline / air-gapped environments).

But first, make sure you have installed @dnb/eufemia and @modelcontextprotocol/sdk in your project:

npm install @dnb/eufemia @modelcontextprotocol/sdk
# or
yarn add @dnb/eufemia @modelcontextprotocol/sdk
# or
pnpm add @dnb/eufemia @modelcontextprotocol/sdk

Run the server from your project (where @dnb/eufemia is installed):

Example MCP config (e.g. `.vscode/mcp.json`):

{
  "servers": {
    "eufemia": {
      "command": "node",
      "args": [
        "${workspaceFolder}/node_modules/@dnb/eufemia/mcp/mcp-docs-server.js"
      ]
    }
  }
}

Using Claude CLI with MCP:

claude mcp add --transport stdio eufemia -- node node_modules/@dnb/eufemia/mcp/mcp-docs-server.js

Using raicode CLI with MCP (using Claude):

raicode mcp add --transport stdio eufemia -- node node_modules/@dnb/eufemia/mcp/mcp-docs-server.js

How to use

The MCP server helps AI apply Eufemia patterns more accurately in code, but results can still be imperfect. So always review the output carefully!
The MCP server provides documentation context only; it does not execute code or access the network.
Ask your AI tool to search or summarize Eufemia docs, e.g. "Find the spacing system rules in Eufemia."
If the server fails to start, confirm @dnb/eufemia is installed and the path points to node_modules/@dnb/eufemia/mcp/mcp-docs-server.js.

Code Editor Extensions

The Visual Studio Code Extension

It supports:

plain px to rem conversion.
annotation for px and rem equivalent values.
auto completion for the spacing system.
auto completion for font-size and line-height.

Install the VSCode Extension or view the source code.

Screenshots

Spacing System example

Auto completion for px/rem spacing system

Equivalent to px or rem value example

font-size example

Lint Plugins

Eufemia ships lint plugins as part of @dnb/eufemia, so you can import them directly from the main package.

Install eslint and/or stylelint in your application if you do not already use them.

ESLint

Use the recommended flat config preset:

import eufemiaEslint from '@dnb/eufemia/plugins/eslint.js'

export default [eufemiaEslint.recommended]

If you need full control, register the plugin and configure the rules yourself:

import eufemiaEslint from '@dnb/eufemia/plugins/eslint.js'

export default [
  {
    plugins: {
      eufemia: eufemiaEslint,
    },
    rules: {
      // All rules
      ...eufemiaEslint.recommended.rules,

      // Or specific rules
      'eufemia/no-deprecated-color-variables': 'error',
    },
  },
]

Stylelint

Use the recommended preset to enable all rules:

import eufemiaStylelint from '@dnb/eufemia/plugins/stylelint.js'

export default eufemiaStylelint.recommended

If you need full control, register individual plugins and configure the rules yourself:

import eufemiaStylelint from '@dnb/eufemia/plugins/stylelint.js'

export default {
  plugins: [eufemiaStylelint],
  rules: {
    'eufemia/no-deprecated-color-variables': [
      true,
      { severity: 'warning' },
    ],
    'eufemia/token-name-policy': [true, { themePrefixes: { ui: 'dnb' } }],
  },
}

Available rules:

eufemia/no-deprecated-color-variables — Warns when deprecated --color-* CSS variables are used. Suggests design tokens instead.
eufemia/token-name-policy — Validates --token-* naming conventions: prefix, category, color semantics, theme prefixes, cross-brand parity, and more. Accepts a themePrefixes option to map brand names to their CSS variable prefixes.

Review rule metadata

Cross-tool review rules expose machine-readable metadata from the same source used by the lint plugins:

import reviewRules from '@dnb/eufemia/plugins/review-rules.js'

const deprecatedColors =
  reviewRules['eufemia/no-deprecated-color-variables']

Each entry identifies its classification, default severity, documentation, supported tools, and whether an automatic fix exists. Projects may override lint severity, but should preserve the rule's documented meaning. A recommendation or context-dependent migration should not be presented as an unsupported API or an automatic fix.

MCP clients can call review_rules to retrieve the same catalogue with the stable rule IDs included in the response. The catalogue currently covers the cross-tool rules that have published metadata; tool-specific rules can still be configured as documented above.

For SCSS files, configure Stylelint with postcss-scss as the custom syntax.

PostCSS (Style Isolation)

If you use the style isolation PostCSS plugin, deprecation warnings for --color-* variables are enabled by default at build time:

import styleScopePlugin from '@dnb/eufemia/plugins/postcss-isolated-style-scope.js'

export default {
  plugins: [styleScopePlugin()],
}

To disable the warnings, set warnOnDeprecatedColorVariables: false:

export default {
  plugins: [styleScopePlugin({ warnOnDeprecatedColorVariables: false })],
}

Both plugins ship with one rule: no-deprecated-color-variables. It reports deprecated --color-* CSS variables and guides towards design tokens instead.

Edit on GitHub

#Tools

#Agent Skills

#Install project skills

#Automation and CI

#Manage installed skills

#Evaluate skill changes

#Connect the documentation

#AI Assistance and MCP Server

#Hosted MCP server

#Version behavior

#Example: Claude CLI / raicode CLI

#Local MCP server (pinned to your installed Eufemia version)

#Example MCP config (e.g. .vscode/mcp.json):

#Using Claude CLI with MCP:

#Using raicode CLI with MCP (using Claude):

#How to use

#Code Editor Extensions

#The Visual Studio Code Extension

#Screenshots

#Lint Plugins

#ESLint

#Stylelint

#Review rule metadata

#PostCSS (Style Isolation)