How do I install the Vaadin Check Theme Mixing skill?

Run npx skillmds@latest add vaadin/vaadin-check-theme-mixing in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Vaadin Check Theme Mixing safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Vaadin Check Theme Mixing?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Vaadin Check Theme Mixing free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Vaadin Check Theme Mixing?

vaadin (@vaadin) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Vaadin Check Theme Mixing by vaadin

Name: Vaadin Check Theme Mixing
Author: vaadin

Vaadin Check Theme Mixing

Detect whether a Vaadin project mixes the Aura and Lumo base themes, which produces conflicting styles and unresolved CSS custom properties. Use when reviewing or building a Vaadin UI, switching or configuring a theme, applying theme variants, importing theme stylesheets, or when the user reports styles or --lumo-* / --aura-* custom properties not resolving.

vaadin Updated Sep 17, 2026

File contents

vaadin-check-theme-mixing

Run the bundled checker against a Vaadin project and report what it finds.

Run it

The launcher is a self-contained native binary bundled in this plugin's bin/ — no Node.js and no JVM are required, and it does not download or search the machine for a runtime. Claude Code puts the plugin's bin/ on PATH, so run it by name (use . for <project-dir> if the user did not name one):

vaadin-agent-tools check-theme-mixing <project-dir> --json

If it is not on PATH, invoke it by its full path instead: "${CLAUDE_PLUGIN_ROOT}/bin/vaadin-agent-tools" check-theme-mixing <project-dir> --json.

Read the result

The JSON envelope is:

{ "tool": "check-theme-mixing", "ok": true, "themesLoaded": [], "filesScanned": 0, "findings": [] }

Exit code: 0 = no error-level findings · 1 = mixing detected · 2 = usage error (e.g. the directory does not exist).

Report each entry in findings with its code, message, and evidence (each item is file + line + snippet). The codes:

MULTIPLE_BASE_THEMES (error) — both Aura and Lumo are loaded. Keep exactly one base theme.
LUMO_UTILITY_WITHOUT_LUMO_THEME (error) — LumoUtility is used while Aura is the loaded theme; its utility classes are undefined under Aura.
MISMATCHED_THEME_TOKENS (warning) — --<other>-* custom properties are used under a different base theme and will not resolve.
THEME_INDETERMINATE (info) — no base theme is explicitly loaded, so the theme-dependent checks were skipped. This is not a pass; say so, and suggest confirming which base theme the project loads.
LEGACY_THEME_ANNOTATION (info) — a legacy @Theme annotation sits alongside @StyleSheet-based theming; worth confirming during a Vaadin 24→25 upgrade.

Treat error findings as blocking; surface warning/info findings for the user to judge rather than failing the task on them.

---name: vaadin-check-theme-mixingdescription: Detect whether a Vaadin project mixes the Aura and Lumo base themes, which produces conflicting styles and unresolved CSS custom properties. Use when reviewing or building a Vaadin UI, switching or configuring a theme, applying theme variants, importing theme stylesheets, or when the user reports styles or --lumo-* / --aura-* custom properties not resolving.---# vaadin-check-theme-mixingRun the bundled checker against a Vaadin project and report what it finds.## Run itThe launcher is a self-contained native binary bundled in this plugin's `bin/` —no Node.js and no JVM are required, and it does not download or search themachine for a runtime. Claude Code puts the plugin's `bin/` on `PATH`, so run itby name (use `.` for `<project-dir>` if the user did not name one):```bashvaadin-agent-tools check-theme-mixing <project-dir> --json```If it is not on `PATH`, invoke it by its full path instead:`"${CLAUDE_PLUGIN_ROOT}/bin/vaadin-agent-tools" check-theme-mixing <project-dir> --json`.## Read the resultThe JSON envelope is:```json{ "tool": "check-theme-mixing", "ok": true, "themesLoaded": [], "filesScanned": 0, "findings": [] }```Exit code: `0` = no error-level findings · `1` = mixing detected · `2` = usageerror (e.g. the directory does not exist).Report each entry in `findings` with its `code`, `message`, and `evidence`(each item is `file` + `line` + `snippet`). The codes:- `MULTIPLE_BASE_THEMES` (error) — both Aura and Lumo are loaded. Keep exactly one base theme.- `LUMO_UTILITY_WITHOUT_LUMO_THEME` (error) — `LumoUtility` is used while Aura is the loaded theme; its utility classes are undefined under Aura.- `MISMATCHED_THEME_TOKENS` (warning) — `--<other>-*` custom properties are used under a different base theme and will not resolve.- `THEME_INDETERMINATE` (info) — no base theme is explicitly loaded, so the theme-dependent checks were **skipped**. This is not a pass; say so, and suggest confirming which base theme the project loads.- `LEGACY_THEME_ANNOTATION` (info) — a legacy `@Theme` annotation sits alongside `@StyleSheet`-based theming; worth confirming during a Vaadin 24→25 upgrade.Treat `error` findings as blocking; surface `warning`/`info` findings for theuser to judge rather than failing the task on them.

Frequently asked questions