Skip to content

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.
  • 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.

Why use skills with MCP?#

The MCP server can provide the same workflows as tools and current documentation. Skills complement it by helping an agent recognize relevant requests and choose the right Eufemia tools without the user naming them. They also make the workflows available in clients that do not support MCP. Keep skills focused on discovery and reusable workflow instructions, and retrieve version-sensitive facts from the MCP server.

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

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.

Update installed skills#

After upgrading @dnb/eufemia, update the installed project skills from the same package version:

yarn eufemia skills update

The command opens the same selector with managed locations selected. It updates the selected skills and their lock file, but refuses to overwrite locally modified skill files. Review those changes first; use --force only when replacing them intentionally. In automation, pass one location explicitly, for example yarn eufemia skills update --target .agents/skills.

Run this command in the project rather than through the MCP server. The hosted HTTP server cannot access a caller's project files, and the package-local MCP server intentionally exposes the same documentation-only tools.

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


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

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

Read Markdown documentation without MCP#

For tools that can read files or fetch URLs directly, use the Markdown documentation:

  • Prefer the documentation packaged with the project's installed @dnb/eufemia version. Start with node_modules/@dnb/eufemia/docs/web/get-started/quick-start.md and follow links within that package's docs directory. Older package versions may use different paths.
  • If packaged documentation is unavailable, start with Quick start in Markdown. The hosted documentation follows the latest release, so check the project's installed version before relying on version-specific APIs.

Retrieve the relevant documentation before generating or reviewing code. Use documented APIs and state when something cannot be verified.

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 for the general ownership guidance.

Suggest an edit