kendo-themes

Create or update ARIA accessibility annotations and validate WCAG compliance for a Kendo UI component. Reads the component spec, writes @aria/@keyboard/@ux/@see JSDoc annotations, applies attributes to TSX templates, and validates with the axe-core test runner. Use this skill when the user wants to add accessibility support, fix ARIA violations, document keyboard shortcuts, or ensure WCAG 2.2 Level AA compliance.

Create or update an HTML component specification (.spec.tsx) in the HTML package. Defines the component's TypeScript types, options, states, render function, constants, and index exports. Use this skill when the user wants to create a new HTML spec, add states/options to a component, or modify a component's HTML structure.

Create or update reusable HTML templates for a Kendo UI component in the HTML package. Templates are preset configurations of a component spec, used by visual tests and documentation. Use this skill when the user wants to add a template variant, create a preset configuration, or add a reusable component shorthand.

Create or update visual test scenarios for a Kendo UI component in the HTML package. Creates TSX test files that exercise component states, variants, and edge cases for screenshot-based visual regression testing. Use this skill when the user wants to add test coverage, create visual tests, or ensure a component has proper test scenarios.

Audit and report on design token usage (color, spacing, typography, elevation, border-radius) across SCSS packages. Scans for hardcoded values (hex colors, raw px/rem, font stacks, literal box-shadows) that should use design token functions like k-spacing(), k-color(), k-elevation(), k-border-radius(), or $kendo-* variables. Use this skill when the user wants to find hardcoded colors, audit spacing tokens, check typography consistency, or enforce token usage.

Create or update a Kendo UI component across kendo-themes packages. For new components, scaffolds core skeleton with null variables, theme overrides for targeted themes, HTML spec, templates, visual tests, and unit tests. For existing components, audits the current state, produces a change plan, and applies SCSS variable changes, layout/theme updates, HTML spec modifications, and test additions. Use this skill when the user wants to add a new component, update a component's design, change styling values, add new states or options, or align a component with design assets.

Create or update design system foundation modules — spacing, color-system, typography, elevation, border-radii, motion, and z-index. These modules live in packages/core/scss/ and are re-exported by each theme via packages/{theme}/scss/core/. Use this skill when the user wants to add a spacing token, color constant, font size, elevation level, border-radius scale value, or animation timing.

Create or update SCSS layout mixins, theme mixins, module entry points (_index.scss), and registration in theme entry points for a Kendo UI component. Covers the full component SCSS lifecycle — structural styles, visual styles, wiring, and registration. Use this skill when the user wants to change a component's CSS structure, add visual states, create the style skeleton for a new component, wire up dependencies, or register a component in a theme.

Create or update SCSS variables for a Kendo UI component — null declarations in core and concrete overrides in targeted theme packages. Handles SassDoc comments, @forward maps, and theme-specific conventions (Fluent CSS custom properties). Use this skill when the user wants to add, change, or remove a component variable.

Create a new Kendo UI theme package from scratch or update an existing theme's design tokens, swatches, and component overrides. Handles package scaffolding, core re-exports, swatch configuration, design token changes (spacing, colors, elevation, typography, border-radii), and component-level variable/style overrides. Use this skill when the user wants to create a new theme, change a theme's design tokens, add or edit swatches, or apply broad styling changes across components in a theme.

Styling reference for Kendo and Telerik UI components with Kendo theme packages. Relevant for Kendo/Telerik appearance, theme installation, CSS/SCSS token properties and theme customization, design tokens, swatches, Tailwind token mapping, component selectors, and visual consistency between Kendo components and application UI.