# Kendo Angular Validation

> Canonical Pre-Build API Verification source-and-brief grep checklist and unified Quality Audit checklist (Structure & API + Accessibility + Behavior & Quality) for Kendo UI for Angular code review.

- Skill: `telerik/kendo-angular-validation` (Agent Skill)
- Install (CLI): `npx skillmds@latest add telerik/kendo-angular-validation`
- Raw SKILL.md: https://api.skillmd.com/api/skills/telerik/kendo-angular-validation/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: telerik (https://skillmd.com/u/telerik)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/telerik/kendo-angular-validation

---


# Kendo UI for Angular — Validation & Audit Reference

This skill is the single source of truth for what to validate and audit in generated Kendo UI for Angular code.

There are **two checklists** in this file:

1. **Pre-Build API Verification** — source-and-brief grep checks to run before `ng build`. Catches API-level mistakes that the provided context brief documented correctly.
2. **Quality Audit** — checklist to run after the build is green, organized into three sections (Structure & API / Accessibility / Behavior & Quality).

Each checklist is self-contained — apply only the subsections whose dimension is in scope for the code under review.

---

## Part 1 — Pre-Build API Verification

All grep checks below MUST be emitted as parallel tool calls in a single assistant turn.

### Search scope

Include only:

- Changed/generated application source files and relevant first-party app files.
- Context briefs and addenda provided by the orchestrator.
- Developer, tester, and audit reports produced by the pipeline.
- `package.json`, lockfiles, `angular.json`, root styles, and `index.html` when validating dependency presence, theme setup, or project configuration.

Exclude:

- `node_modules`, dependency package source, package `.d.ts` declarations, source maps, generated declaration bundles, `.angular`, `dist`, and package caches.

Cross-checking against the component reference means cross-checking against the component facts in the provided context brief or explicit handoff facts. Do not grep `node_modules/@progress/**/**/*.d.ts` or other dependency declarations to recover missing Kendo API facts. If a required reference fact is absent, report a context-required gap instead of filling it from package internals.

### A. Import verification

For each generated file:
- Grep `^import` lines.
- Compare results to the imports specified in the context brief component reference (`Kendo package` and `Module / standalone symbol` entries) character-for-character.
- Flag every line not in the reference, every reference-required import missing from the file, and any package-name typos.

### B. Component API verification

For each Kendo component referenced in any generated file (look for `<kendo-*>` tags):
- Grep the component tag and binding usage (e.g. `<kendo-grid` and `\[height\]`, `\[data\]`).
- Cross-reference each binding/event against the per-component context brief reference (Key inputs / Key outputs).
- Flag bindings used in code that are NOT in the reference, required bindings missing from the code, and wrong binding syntax (`[height]="500"` when reference says `[height]="'500px'"`; missing `[]` or `()` brackets).

### C. Framework pattern verification

- Grep `standalone:` across generated component files; confirm every match aligns with the project's detected component style (Standalone vs NgModule).
- Grep `style="` (inline-style anti-pattern) — should be 0 matches.
- Grep the theme import path — confirm exactly one occurrence (no duplicate / conflicting theme).
- Grep `[height]` on every `<kendo-grid>` and `<kendo-chart>` usage; confirm explicit height present.
- **Layout prerequisite (run only when the layout dimension is active for this run):** validate `@progress/kendo-theme-utils` in two places. First, confirm `package.json` lists `@progress/kendo-theme-utils` in `dependencies` or `devDependencies`. Second, grep `@progress/kendo-theme-utils` across `angular.json`, `**/styles.{scss,css}`, and `**/index.html`; there must be **at least one** CSS reference using the project's existing theme import mechanism (see the Prerequisites block in the supplied layout facts). Missing package dependency or missing CSS reference = missing prerequisite. Skip both checks entirely if layout was not active.

### D. Component-decorator + binding shape verification

- Grep `imports:\s*\[` in each `@Component`-decorated file. For every standalone component, confirm `imports: [...]` contains every Kendo module the file actually uses.
- Grep `@ViewChild\(` and `@Output\(` declarations. Verify type generics match the documented payload types (no `<any>`).
- Grep input bindings `\[(\w+)\]=` and output bindings `\((\w+)\)=` on Kendo component tags. Cross-check each name against the context brief component reference.
- For any `<kendo-*>` tag found, confirm the component's `imports[]` array (Standalone) or NgModule `imports` array includes the corresponding Kendo module.

---

## Part 2 — Quality Audit

Three labeled sections. Apply only the subsections whose dimension is in scope for the code under review.

### Section: Structure & API

#### Angular component validation
- Proper `@Component` decorator configuration.
- If using NgModule setup, `@Component` declares `standalone: false` and the component is in the NgModule `declarations` array.
- Selector follows kebab-case naming convention.
- Template and style file organization is appropriate.

#### Kendo UI for Angular setup
- Modules / standalone imports correct for every Kendo component used.
- Exactly **one** Kendo theme is referenced across `angular.json` and styles files — never mix theme packages.
- Theme import mechanism is consistent with existing project setup.
- Animations configured: `provideAnimations()` (Standalone) or `BrowserAnimationsModule` (NgModule).
- Globalization / localization providers configured when used.
- Required Kendo dependencies present in import statements.
- Kendo UI for Angular license activated (`npx kendo-ui-license activate` has been run for the project).

#### Grid-specific validation
- Grid uses `kendoGridBinding` for standard data binding (or correct manual binding with event handlers).
- Grid has an explicit height binding, e.g. `[height]="'500px'"` or `flex: 1; min-height: 0` inside a flex column. Without it the Grid renders all rows and grows unbounded.
- No `kendoButton` combined with Grid command directives on the same element.

#### Theme & styling
- Layout uses Kendo Design System utilities (`k-*` classes) — not Tailwind, Bootstrap, or custom CSS frameworks.
- No inline `style=""` attributes.
- Custom colors use Kendo CSS variables, not hardcoded hex.
- `html, body` set `background-color: var(--kendo-body-bg)` and `color: var(--kendo-body-text)` for dark-theme completeness.
- Theme application is consistent across all generated components (no per-component theme overrides).

### Section: Accessibility

#### Cross-cutting accessibility rules
- WCAG 2.2 AA contrast ratios met.
- Focus indicators visible; keyboard navigation works for every interactive control.
- ARIA labels present on icon-only controls and dynamic regions.
- Per-component a11y rules (ARIA / keyboard / focus) are reflected in template markup, not just comments.
- Semantic landmarks (`<main>`, `<nav>`, `<aside>`) used where appropriate.
- Heading hierarchy is monotonic (no skipped levels).

(Per-component ARIA / keyboard / focus specifics come from the context brief component reference being audited against.)

### Section: Behavior & Quality

#### Performance
- `OnPush` change detection where appropriate; minimize unnecessary change-detection cycles.
- `trackBy` functions on `*ngFor` over Kendo collections.
- Virtualization enabled for large datasets in Grid / ListView / similar components.
- Lazy loading of Kendo UI for Angular components / routes where appropriate.
- Only required Kendo modules / standalone imports — tree-shaken.
- Chart data bound to class properties, never to getter methods (getters re-run every change-detection cycle).
- Chart has explicit height (e.g. `style="height: 300px"` or container with fixed height).

#### Behavior
- NgModule vs Standalone choice consistent across all generated files (must match the project's detected component style).
- Responsive breakpoints applied where the user goal requires multi-viewport behavior.
- No getter-bound Chart data; no inline lambda bindings inside hot template paths.
- Interactive elements (buttons, links, form controls) have stable focus and keyboard handlers — no `(click)` on non-interactive elements.

#### File organization
- Components, services, and styles live in conventional Angular folders (`src/app/<feature>/...`).
- File names match selectors and class names (kebab-case file → PascalCase class → kebab-case selector).
- Routes registered in the appropriate `app.routes.ts` / lazy route file rather than hard-wired in `main.ts`.

#### Error handling & security
- User-facing errors handled via Kendo `Notification` / `Dialog` or framework-level error interceptors — not silent `console.log`.
- Forms use Angular validators (`Validators.required`, `Validators.email`, etc.) where the field semantics call for them.
- No template binding of unsanitized HTML via `[innerHTML]` without `DomSanitizer`.
- Secrets / API keys never inlined into client code.

---

## Severity ranking (audit only)

- **Critical** — blocks task completion (security flaw, crash, missing required ARIA on interactive control, build-breaking pattern).
- **Important** — should be fixed before declaring done (missing `trackBy` on a long list, wrong heading hierarchy, single-theme rule violated).
- **Minor / Suggestion** — nice to have (variable-name clarity, optional `OnPush` opportunity).