At the Umbraco's recent Winter Keynote we announced something we're really excited about: Umbraco CMS Backoffice Agent Skills in beta.
Here's what that means and why it matters for Umbraco developers.
What Are Agent Skills?
Agent Skills act as a helping hand for AI coding tools. These specific skills are designed to provide AI with structured, up-to-date knowledge about how to create extensions for the Umbraco backoffice correctly.
Think of them as expert guides that sit alongside your AI assistant. When you ask your AI to build a dashboard, a custom section, or a property editor, the relevant skill loads into context and gives the AI everything it needs: the concepts, the patterns, working code examples, and links to official documentation.
The Problem They Solve
AI is probabilistic. It learns from everything it's seen, and there's a lot of content out there about Umbraco; articles, tutorials, and documentation spanning versions 8-13, 14, 15, and 16.
When you ask an AI to build a backoffice extension without guidance, it might have a good stab at it. But it will often:
- Mix patterns from different Umbraco versions
- Use deprecated APIs or outdated component names
- Maybe even try to write angular js!?!!
These skills help to reduce that problem by giving the AI the right information at the right time.
What We're Aiming For
This project has several goals:
Help people learn how the backoffice works. Each skill contains details, documentation and working examples that demonstrate real patterns. You can ask the AI to explain how the code works, walk you through the patterns, and clarify why things are done a certain way. It's documentation that actually runs, with an expert on hand to explain it.
Code along with your AI assistant. These skills aren't just about generating code for you, they're about creating extensions together. Load the umbraco-backoffice skill, describe what you want to build, and the AI will guide you through the process step by step. You stay in control while learning as you go. It's pair programming with a partner who knows the Umbraco backoffice inside out.
Enable rapid prototyping. Got an idea for a custom admin area? A data management tool? A hierarchical content browser? These skills help you go from concept to working prototype quickly.
Assist with upgrades. Whilst there are no skills specifically for the AngularJS backoffice, the detailed descriptions of what each extension type does—and how it should behave—can help when upgrading. Describe your existing extension, provide specs or even screenshots, and let the AI help you rebuild it with the latest patterns.
How The Skills Work
The skills are organised as a collection, with over 50 individual skills covering many different aspects of backoffice development. This grouping matches the documentation for extension types in the back office.
Each skill provides:
- A brief description of what the extension type does and when you'd use it
- The fundamentals of how it works within the backoffice architecture
- Code examples showing minimal implementations
- Links to official Umbraco documentation for deeper detail
The key design principle is progressive discovery. Only the skills needed for your current task are loaded into the AI's context. When a skill is loaded, it contains links to related skills and other documents that provide more information as and when the AI needs it.
This matters because AI models have limited context windows. Loading everything at once would overwhelm the context and degrade quality. By loading information progressively
just what's needed, when it's needed
the AI can maintain focus and produce better results.
The Backoffice Routing Skill
At the heart of the collection is a routing skill called umbraco-backoffice. This is the "big picture" skill that explains how the backoffice works and how all the pieces fit together. It also routes down to relevant sub-skills for specific implementation.
It relates a crucial concept: backoffice customisations are combinations of extension types. For example:
- A custom admin area = Section + Menu + Dashboard
- A data management tool = Section + Menu + Workspace
- A hierarchical browser = Section + Menu + Tree + Workspace
The skill includes an extension map—an ASCII diagram showing where all 40+ extension types appear in the backoffice UI. This helps it to understand what it's building and where everything will appear.
Most importantly, this skill contains fully working, runnable, tested examples. These aren't snippets—they're complete extensions you can build and run. The AI can reference these examples to validate its output against known-good implementations.
The Quickstart Experience
The umbraco-quickstart skill wraps everything into a guided, end-to-end workflow.
Run it with a single command:
/umbraco-quickstart MyUmbracoDemoSite MyExtension
Here's what happens in this workflow:
- Creates an Umbraco instance using the Package Script Writer CLI—a working Umbraco installation ready for development
- Creates an extension project using the official dotnet template, with TypeScript, Vite, and all the tooling configured
- Joins them together by adding project references and registering the extension
- Enters planning mode where the AI asks questions about what you want to build.
- Creates a plan document with ASCII wireframes showing the proposed UI, lists of extension types to be used, and the components needed. This is presented for your review and approval. You can change anything that doesn't look right at this point.
- Builds the extension using the appropriate sub-skills, generating manifests, elements, and any supporting code.
- Reviews against known issues using an automated reviewer that checks for common mistakes—wrong element names, missing registrations, incorrect context usage
- Validates in the browser by actually driving Umbraco in Chrome and testing the extension as a developer would—clicking through the UI, checking that things appear where they should, verifying functionality works.
Validation Is Key
We've found that although these skills are good, they will still make mistakes. AI is non-deterministic, and even with excellent guidance, things can go wrong.
But here's where modern AI capabilities shine.
Because current models support long-running sessions, agents can stay on track and iterate on problems. When the reviewer finds an issue, the AI can fix it. When browser validation reveals a problem, the AI can debug it. The process continues until all requirements are satisfied.
This is a fundamental shift from "generate code and hope" to "generate, validate, and refine." The quickstart skill is designed to support this workflow, with clear validation checkpoints built in.
The Open Source Superpower
These skills works best when the AI is also connected to the Umbraco source code and the Umbraco UI component library. This is just another layer of progressive discovery.
This is a superpower of Umbraco, it's open source and available. When the AI needs to understand how a particular component works, it can look at the source. When it needs to see how the core team have implemented something, it can read the real code. When documentation is unclear, the source is the truth.
The skills are designed to work alongside the Umbraco repositories, guiding the AI to the right places and showing it how to learn from the source.
What About Testing?
As well as backoffice extension skills, there are also extension testing skills covering:
- End-to-end testing with Playwright
- Unit and component testing
- Mock Service Worker (MSW) patterns for API mocking
There's too much to go into here, we'll save that for another blog post.
Getting Started
These skills are designed to make it as easy as possible to create extensions for the Umbraco backoffice. They superpower your AI with the latest, most up-to-date information about how the Umbraco backoffice works.
The Agent Skills are available now and work with Claude Code and other AI development tools (with a little manipulation).
Ready to try the skills? Here's how to get up and running.
Install the Skills
The skills are available through the Claude Code marketplace.
Open Claude Code and run:
/plugin marketplace add umbraco/Umbraco-CMS-Backoffice-Skills
Then install the plugins:
/plugin install umbraco-cms-backoffice-skills@umbraco-backoffice-marketplace
For testing skills (optional):
/plugin install umbraco-cms-backoffice-testing-skills@umbraco-backoffice-marketplace
Option 1: Quickstart
The fastest way to get going. This creates an Umbraco instance, an extension project, wires them together, and guides you through building your first extension:
/umbraco-quickstart MyUmbracoSite MyExtension
The AI will set everything up, ask what you want to build, create a plan for your approval, build the extension, and validate it works.
Option 2: Describe What You Want to Build
Already have Umbraco set up?
Load the backoffice skill and describe what you want:
/umbraco-backoffice I want to build a custom section for managing
customer feedback, with a tree showing feedback categories and a
workspace for viewing individual items
The AI will identify the extension types needed, walk you through the approach, and help you build it step by step.
Supercharge It (Optional)
For best results, clone the Umbraco source repositories and add them as working directories:
git clone https://github.com/umbraco/Umbraco-CMS.git
git clone https://github.com/umbraco/Umbraco.UI.git
Then in Claude Code, add them to your session:
/add-dir /path/to/Umbraco-CMS/src/Umbraco.Web.UI.Client
/add-dir /path/to/Umbraco.UI
This gives the AI access to the actual implementations and patterns used in the core backoffice—the ultimate reference.
We're excited to hear what you're building with these skills. Share your creations with the community and let us know how the skills are working for you.
Top comments (0)