telerik/ai-plugins/telerik-blazor-orchestrator

Claude Code and agent skill by telerik/ai-plugins

Trust tier 3
  • community
Source check pending

Checking that the SKILL.md file is still in the repository.

Main entry point for building or refining UI with Telerik UI for Blazor. Orchestrates the full workflow including accessibility, layout, components, theming, icons, and validation. Use when the user wants to build or modify a complete page, section, or UI feature with Telerik Blazor components. Trigger on "build a page", "create a dashboard", "implement a UI", "generate a form", "build UI with Telerik", "create a Blazor page", "#telerik_ui_generator".

Install

npx vskill@latest install telerik/ai-plugins/telerik-blazor-orchestrator

SKILL.md

Telerik UI for Blazor — Execution Plan

IMPORTANT — MCP Tools: All telerik_* tools referenced in this plan are provided by the Telerik.Blazor.MCP MCP server. They are NOT deferred tools and must NOT be searched for with tool_search. Call them directly by name once the MCP server is running. If any tool is unavailable, the MCP server may not be started — inform the user to start it via the notification banner in their editor.

Current Goal:

$ARGUMENTS


Step 1: Assess the Request

Before executing any phase, assess the user's request and decide which conditional phases apply. Use the table below as your guide, then load only the relevant supporting files.

PhaseInclude whenSupporting file
Component IntegrationAPI reference or component docs are needed — default yes unless purely layout/theming workphase-components.md
Layout FoundationPage structure, sections, or explicit layout work is requestedphase-layout.md
Responsive BehaviorLayout is needed AND responsive behavior across devices is requiredphase-responsive.md
Custom ThemingInclude when the request explicitly mentions colors, brand, visual style, mood, aesthetic, dark/light mode, or theme preferences. Skip for small isolated additions, or when the domain gives no meaningful styling signal.phase-theming.md
IconographyIcons are referenced or clearly needed for navigation/actionsphase-icons.md

Also read ux-guidelines.md for UX/UI design defaults that apply throughout the entire implementation.


Requirements Summary:

  • Framework: Blazor
  • Component Library: Telerik UI for Blazor — use ONLY Telerik components. Use telerik_component_assistant for all docs and code snippets. Do not substitute another tool even if one appears relevant.
  • Layout Mode: Kendo Design System CSS Utilities — use Kendo utility classes for layout, spacing, and positioning when they satisfy the requirement. Custom CSS is allowed for theme variables, component-scoped styling, visual requirements not covered by utilities, and existing project conventions. Avoid inline styles and unrelated CSS framework classes unless explicitly required by the component API, existing project convention, or user request.
  • Accessibility: WCAG 2.2 Level AA. WCAG guidelines are loaded in Phase 0 from the supporting file. Call telerik_accessibility_assistant with includeGeneralGuidelines=false on ALL calls.
  • Validation: Use telerik_validator_assistant after every code generation step. Fix all errors before continuing. For errors found, use telerik_component_assistant to find the correct members.
  • Razor Note: Escape @ as @@ in .razor files (e.g., @@media, CDN URLs containing @@progress/...).

Phase 0: CRITICAL — Accessibility Foundation (ALWAYS FIRST)

Step 1 — Load WCAG 2.2 Level AA guidelines:

Read ../telerik-blazor-accessibility/wcag-guidelines.md. These apply to ALL components throughout the entire implementation.

Step 2 — Retrieve component-specific accessibility information:

MANDATORY: Before implementing ANY components, call the accessibility assistant for each primary component you plan to use. The WCAG general guidelines are already loaded above, so always use includeGeneralGuidelines=false.

First component:

telerik_accessibility_assistant({
query="What are the accessibility requirements for [COMPONENT_NAME]?",
component="[COMPONENT_NAME]",
includeGeneralGuidelines=false
})

Each additional component:

telerik_accessibility_assistant({
query="What are the accessibility features and requirements for [COMPONENT_NAME]? Include ARIA attributes, keyboard navigation, and screen reader support.",
component="[COMPONENT_NAME]",
includeGeneralGuidelines=false
})

Conditional Phases

Load and execute only the files that matched your Step 1 assessment:


Final Phase: Validation & Quality Assurance

Read validation-steps.md and execute all validation steps before considering the task complete.


✅ Completion Checklist

Before considering the task complete, ensure:

  • [ ] Accessibility guidelines retrieved and applied to all components
  • [ ] All Telerik UI for Blazor components validated using telerik_validator_assistant
  • [ ] Kendo Design System utilities applied correctly (if layout phase ran)
  • [ ] Custom theme implemented and applied (if theming phase ran)
  • [ ] Icons properly integrated (if icons phase ran)
  • [ ] Responsive behavior works across all devices (if responsive phase ran)
  • [ ] All validation checks passed

Remember: Quality over speed. Validate each step before moving forward.

Security

  • Security scanPassed, 90 of 100Pattern checks on the skill's files.
  • Model reviewPassed

Quality evaluation

  • Task evaluationNot runNo evaluation yet. Run one in Skill Studio.

Source

Popularity

7-day trend score
0

Not refreshed yet.

Works with

Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.

  • Claude Code
  • Cursor
  • GitHub Copilot
  • Windsurf
  • Codex
  • Gemini CLI
  • Cline
  • Amp
  • Roo Code
  • Goose
  • Continue
  • Kilo Code
  • Junie
  • Trae
  • OpenHands
  • Qwen Code
  • AI Agent
  • Tabnine Chat
  • Sourcegraph Cody
  • Amazon Q
  • Firebase Genkit
  • Sweep
  • Devin
  • Phind
  • Mentat
  • Claude Desktop
  • Aider
  • GPT Pilot
  • Plandex
  • bolt.new
  • v0
  • Replit Agent
  • Anse
  • TypingMind
  • BetterChatGPT
  • LibreChat
  • Warp AI
  • Pieces
  • Fig AI
Embed badge
vskill VERIFIED badge
[![vskill VERIFIED](https://verified-skill.com/api/v1/skills/telerik/ai-plugins/telerik-blazor-orchestrator/badge)](https://verified-skill.com/skills/telerik/ai-plugins/telerik-blazor-orchestrator)

Something wrong with this skill or its page? Tell us.