---
title: 'AI, MCP and Tools'
description: 'Agent Skills, MCP, code editor extensions, and lint plugins for Eufemia development.'
version: 0.0.0-development
generatedAt: 2026-09-03T13:34:44.407Z
checksum: 090b7d977ba4be5e2c4c04d199a30a4048416c59f443a56985df2f80629d9c40
---

# Tools

## Agent Skills

`@dnb/eufemia` includes official [Agent Skills](https://agentskills.io/) 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.
- **`eufemia-portal-content`** — help non-technical contributors edit portal
  content and create small pull requests with direct page previews.

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:

```bash
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`:

```bash
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 six 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:

```bash
yarn eufemia skills install --target .agents/skills
```

Equivalent commands with npm or pnpm are:

```bash
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

```bash
# 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](https://agentskills.io/skill-creation/evaluating-skills)
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:

```bash
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:

1. **Use the hosted MCP server** at `https://server.eufemia.dnb.no/mcp/web` — no installation needed, always serves the latest released docs.
2. **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:

```txt
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

```bash
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:

```bash
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`):

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

### Using Claude CLI with MCP:

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

### Using raicode CLI with MCP (using Claude):

```bash
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`.

## Build AI tools on Eufemia

Treat Eufemia as the source of truth for shared design-system functionality and
guidance when creating AI instructions, skills, plugins, MCP tools, or generated
code.

Before adding local components, tokens, themes, patterns, or Eufemia guidance:

- Check the current, version-matched Eufemia documentation and supported APIs.
- Reuse or compose existing Eufemia capabilities where possible.
- If a generally useful capability is missing, consider contributing it to
  Eufemia so it becomes available to everyone.
- Keep product-specific business logic, integrations, and workflows in the
  product's own tooling.
- Avoid copying Eufemia documentation or API details into local AI instructions.
  Retrieve current information through Eufemia's documentation and MCP server.

Local solutions are appropriate for genuinely product-specific needs and
temporary migration work. Keep the boundary explicit so local guidance is not
mistaken for an Eufemia standard. See
[where a component change belongs](/contribute/rules#where-a-component-change-belongs)
for the general ownership guidance.

## 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](/uilib/layout/spacing/).
- auto completion for [`font-size`](/uilib/typography/font-size/) and [`line-height`](/uilib/typography/line-height/).

Install the [VSCode Extension](https://marketplace.visualstudio.com/items?itemName=dnbexperience.vscode-eufemia) or view the
[source code](https://github.com/dnbexperience/vscode-eufemia).

#### Screenshots

1. Spacing System example

<InlineImg
  src={VSCodeExtensionSpacing}
  caption="Auto completion for px/rem spacing system"
  width="auto"
  className="blank x-10"
/>

2. Equivalent to `px` or `rem` value example

<InlineImg
  src={VSCodeExtensionHover}
  caption="Tooltip for px/rem equivalent"
  width="auto"
  className="blank x-10"
/>

3. `font-size` example

<InlineImg
  src={VSCodeExtensionFontSize}
  caption="Auto completion for font-size"
  width="auto"
  className="blank x-10"
/>

## 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:

```js
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:

```js
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:

```js
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:

```js
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:

```js
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](https://www.npmjs.com/package/postcss-scss) as the custom syntax.

### PostCSS (Style Isolation)

If you use the [style isolation](/uilib/usage/customisation/styling/style-isolation/) PostCSS plugin, deprecation warnings for `--color-*` variables are enabled by default at build time:

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

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

To disable the warnings, set `warnOnDeprecatedColorVariables: false`:

```js
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.