devextreme-theming

devextreme-theming is a skill for Claude Code from DevExpress/agent-skills. It costs 52 tokens per session (1,765 once invoked), scanned A, original, MIT.

A set of instructions for applying and customizing DevExtreme’s visual themes, including Generic, Material, and Fluent styles. It also covers switching themes while an application is running.

In plain words
What is it for?
Use it to add a predefined theme, create a custom theme with ThemeBuilder, override component styles, use color swatches, or switch themes at runtime.
Why use it?
It removes the need to work out theme imports, custom colors, style overrides, and light/dark mode setup from scattered documentation.

Skill for Claude Code

Written for Claude Code: shipped in a Claude Code plugin. Also seen: $skill-name invocation.

Part of the dx-devextreme plugin — 13 skills shipped together

Good fit Use it to add a predefined theme, create a custom theme with ThemeBuilder, override component styles, use color swatches, or switch themes at runtime.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/devexpress/agent-skills/devextreme-theming
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add DevExpress/agent-skills --skill devextreme-theming
Clone the repo
git clone --depth 1 https://github.com/DevExpress/agent-skills

Made for: Claude Code.

Or install dx-devextreme, the plugin that ships this one along with the rest of its 13 skills.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for devextreme-theming

README.md
[![agentmods](https://agentmods.dev/badge/skills/devexpress/agent-skills/devextreme-theming/github.svg)](https://agentmods.dev/skills/devexpress/agent-skills/devextreme-theming)
Your own site
<a href="https://agentmods.dev/skills/devexpress/agent-skills/devextreme-theming"><img src="https://agentmods.dev/badge/skills/devexpress/agent-skills/devextreme-theming/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for devextreme-theming

Your own site · 80×15
<a href="https://agentmods.dev/skills/devexpress/agent-skills/devextreme-theming"><img src="https://agentmods.dev/badge/skills/devexpress/agent-skills/devextreme-theming.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 52 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 1,765 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe. Third-party audits
  • NVIDIA SkillSpector warn 7 Sept 2026
SkillSpector: 1 finding, up to medium

These are SkillSpector’s own severities. On a checked sample its high-severity flags on skills were ~96% false positives — a documented command, a public API, a “never do X” rule — so we show them as a caution to read, not a verdict. Why →

  • medium MCP Rug Pull · line 126
    npx commands without a version suffix (e.g. @1.0.0) create a rug-pull risk if the upstream server is compromised and publishes a malicious update.
    Fix: Pin the version: npx @scope/[email protected]
How audits are shown
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00052 $0.01765
Opus 5 $0.00026 $0.00882
Sonnet 5 $0.00010 $0.00353
Haiku 4.5 $0.00005 $0.00177

Measured 10d ago against content hash 79187c4b32a3, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-10, from the pricing page.

Security

Grade A, and why

devextreme-theming scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 10d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

plugins/dx-devextreme/skills/devextreme-theming/SKILL.md · 140 lines

How it starts

The opening of the file, as written. The whole thing — 140 lines — stays where its author put it; the contents beside it link to each section on GitHub.

DevExtreme Theming Skill

When to Use This Skill

  • Applying a predefined DevExtreme theme to a project.
  • Creating a custom theme with ThemeBuilder (UI or CLI).
  • Overriding theme styles with CSS classes or component elementAttr.
  • Implementing dark/light mode or runtime theme switching.
  • Using color swatches for mixed-theme layouts.
  • Setting up SCSS-based theme imports.

Before You Start

⚠️ Always use DevExtreme theme CSS imports and themes.current() from devextreme/ui/themes for runtime switching. Never manually swap CSS classes on document.body, use Bootstrap, Ant Design, Material UI, or any other theming system. For scoped section overrides, use .dx-swatch-* wrapper classes — do not edit DevExtreme's internal CSS files directly.

Architecture Overview

DevExtreme Theme Pipeline
──────────────────────────────────────────────────────────────────
  Option A │ Import prebuilt CSS  →  dx.[theme].css
  Option B │ SCSS import  →  devextreme/scss/bundles/dx.[theme].scss
  Option C │ ThemeBuilder UI/CLI  →  export dx.[base].[color].css
──────────────────────────────────────────────────────────────────
  Runtime  │ DevExpress.ui.themes.current(name)  — same theme family
  Swatch   │ .dx-swatch-xxx wrapper class  — section-level overrides
  CSS API  │ .dx-* classes / elementAttr / wrapperAttr  — component-level

Theme Families

Family Base name pattern Notes
Generic generic.light, generic.dark, generic.contrast, generic.carmine, etc. Also compact variants: generic.light.compact
Material Design material.blue.light, material.blue.dark, material.teal.light, etc. Color + mode segments
Fluent fluent.blue.light, fluent.blue.dark, etc. Requires icon archive when exporting

CSS file name pattern: dx.[theme-family].[color-variant].css
Examples: dx.light.css, dx.dark.css, dx.material.blue.light.css, dx.fluent.blue.light.css

Compact themes reduce all component sizes. Use these instead of zoom/transform CSS — DevExtreme does not support those properties.

Read the full file on GitHub · 140 lines

Files

What ships with it

5 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 10d ago First seen · 140 lines · 52 tokens per session scan A 79187c4b32a3

Subscribe to this mod's changes

devextreme-theming is a skill published in the GitHub repository DevExpress/agent-skills (52 stars, last pushed 23d ago), licensed MIT. It adds 52 tokens to every session and 1,765 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Related

Other skills, from other repositories

gsd-ui-phase

Generate UI design contract (UI-SPEC.md) for frontend phases.

SpillwaveSolutions/agent-brain · 18 tokens

uicraft

Create, improve, audit, and polish distinctive production-grade web interfaces, including marketing/landing pages and personal portfolio sites. Use for UI or frontend design, responsive layouts, typography, color, motion, UX copy, accessibility, performance, design-system alignment, onboarding, edge cases, or visual…

rojim666/SztuCode · 152 tokens

design-system

DESIGN.md integration for Forge — ensures visual consistency across all UI tasks through standardized design specifications.

LucasDuys/forge · 21 tokens

ux-modern-app-feel

Use when you want a Shopify embedded app to feel modern, fast, and opinionated like Linear, Notion, Vercel, or Cron — speed-first, keyboard-first, calm UI, opinionated defaults, no-config success path. Covers keyboard shortcuts inside App Bridge, command palette patterns, micro-interactions Polaris allows, density vs…

khadinakbarlabs/shopify-app-builder · 162 tokens

angular-ui-ux-consistency

Reviews visual/UI-UX implementation consistency in Angular apps — spacing/typography scale discipline, mobile-first responsive layout, visual hierarchy between primary/secondary actions, cross-feature component consistency, and a design-to-code fidelity check. Distinct from angular-a11y (ARIA/keyboard)…

AgenticPawan/FullStack-Pilot · 85 tokens

angular-theming

Multi-theme support in Angular apps — light/dark/brand and per-tenant theming via CSS custom property design tokens, runtime theme switching without reload, Angular Material M3 theming (v17+), persisted theme preference with flash-of-wrong-theme prevention, and WCAG contrast validation across theme variants.

AgenticPawan/FullStack-Pilot · 67 tokens