devextreme-theming

devextreme-theming is a skill for Claude Code from DevExpress/agent-skills. It costs 176 tokens per session (3,471 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: names the AskUserQuestion tool; mentions Claude Code; $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 176 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 3,471 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.00176 $0.03471
Opus 5.5 $0.00070 $0.01388
Sonnet 5.5 $0.00035 $0.00694
Haiku 4.5 $0.00018 $0.00347

Measured 6d ago against content hash 44ea82e73447, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, 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 6d 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 · 223 lines

How it starts

The opening of the file, as written. The whole thing — 223 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

If the host agent has a structured question-asking tool available, use it to ask these questions one at a time with clear options — for example, Claude Code's AskUserQuestion tool or GitHub Copilot's askQuestions tool. If no such tool is available, ask the questions directly in the chat response before generating code.

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

  1. Which framework? Angular, React, Vue, jQuery, or ASP.NET Core Controls?
  2. Predefined theme or custom? A stock Generic/Material/Fluent theme, or a custom palette/swatch built with ThemeBuilder?
  3. Build-time CSS or runtime switching? A single fixed theme (CSS import) vs. letting the user toggle themes/swatches while the app is running?

Skip the framework question if the request or project already identifies the framework. If the reply leaves it unresolved, re-ask once with the list: Angular, React, Vue, jQuery, or ASP.NET Core Controls. If it remains unresolved, default to React + Vite + TypeScript and state that assumption.

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

Read the full file on GitHub · 223 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. 6d ago Changed · +83 lines · +124 tokens per session 44ea82e73447
  2. 1mo 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 (66 stars, last pushed 6d ago), licensed MIT. It adds 176 tokens to every session and 3,471 once invoked, about $0.0007 per session on Opus 5.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

TEMPLATE

../../../agents/personas/TEMPLATE.md.

alirezarezvani/claude-skills · 0 tokens

antislop-ui

UI and visual skill for antislop. Use when building or editing any interface: color, layout, components, motion. Load with the core.

miqdadbadjuber/anti-slop · 35 tokens

antislop-layoutmobile

Mobile layout skill for antislop. Use for layouts that reflow across screen sizes, phone to desktop: grids, overflow, tap targets. Load with the core.

miqdadbadjuber/anti-slop · 40 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

ardot-ui-design

A workflow for designing user interfaces in the Ardot canvas, including websites, web apps, dashboards, mobile screens, forms, tables, and design systems. A user interface is the screens and controls people use to operate software.

rojim666/SztuCode · 217 tokens

ardot-design-to-code

Use this skill for Ardot canvas tasks that convert a design into frontend code, or extract a design system / style guide from a website. Covers: design-to-code, design → HTML/CSS/JS, export as webpage, pixel-perfect reproduction, generate an Application from a design, slide transitions, responsive scaling; and website…

rojim666/SztuCode · 199 tokens