> For the complete documentation index, see [llms.txt](https://docs.umbraco.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.umbraco.com/umbraco-in-ai/agent-skills/backoffice-skills/quickstart.md).

# Quickstart

Use the quickstart skill to set up your development environment, then follow the Plan, Build, Validate workflow to create extensions.

## Setup

The `umbraco-quickstart` skill handles the full setup for you. It creates an Umbraco instance and extension project, registers the extension, and guides you through the development workflow:

```bash
# Full setup with custom credentials
/umbraco-quickstart MyUmbracoSite MyExtension --email a@a.co.uk --password Admin123456

# With default credentials (admin@test.com / SecurePass1234)
/umbraco-quickstart MyUmbracoSite MyExtension

# No arguments — detects existing or prompts for names
/umbraco-quickstart
```

{% hint style="info" %}
The `/` syntax is for Claude Code. In other editors, describe the task in natural language and the agent loads the skill automatically.
{% endhint %}

## The **Plan**, **Build**, **Validate** Workflow

All extension development follows this workflow.

### **Plan**

Before writing any code:

1. **Describe what you want to build:** "A dashboard that shows recent content changes", "A tree in Settings for managing custom data."
2. **Draw a wireframe:** The AI creates ASCII wireframes showing where UI elements appear in the backoffice.
3. **Identify extension types:** Label each part of the wireframe: section, dashboard, workspace, tree.
4. **Identify Umbraco UI Library (UUI) components:** Map out which `uui-*` components you need (buttons, inputs, boxes, tables).
5. **Map data flow:** How does data move? Which contexts, repositories, and APIs are involved?

```
┌─────────────────────────────────────────────────────┐
│ [Header]                          [headerApp]       │
├──────────┬──────────────────────────────────────────┤
│ [Section]│ [Dashboard/Workspace]                    │
│  │       │  ┌────────────────────────────────────┐  │
│  ├─[Menu]│  │   Your content area                │  │
│  │  │    │  │   [uui-button] [uui-input]         │  │
│  │  └─[X]│  │   [uui-box]                        │  │
│  └─[Tree]│  └────────────────────────────────────┘  │
└──────────┴──────────────────────────────────────────┘
```

Planning prevents building the wrong extension type. You approve the plan before any code is written.

### **Build**

With the plan approved:

1. **Load the `umbraco-backoffice` skill** for best practices and example blueprints.
2. **Invoke the identified sub-skills:** each extension type has its own skill with correct patterns.
3. **Follow the examples:** Copy from the closest blueprint and adapt.

### **Validate**

After building, validation is mandatory:

1. **Build:** Run `npm run build` in the extension directory. Must compile without errors.
2. **Code review:** The `umbraco-extension-reviewer` agent checks for correct extension type usage, proper imports, context patterns, and manifest registration.
3. **Fix issues:** High and medium-severity issues are auto-fixed.
4. **Rebuild** if fixes were made.
5. **Restart Umbraco:** Stop and restart `dotnet run`.
6. **Browser test:** The coding assistant drives the browser to navigate to your extension in the backoffice. It checks for console errors, verifies the UI renders, and validates that interactions work as expected.

## Optional: Add Source Code References

For better code generation, give your coding assistant access to the Umbraco source:

```bash
git clone https://github.com/umbraco/Umbraco-CMS.git
git clone https://github.com/umbraco/Umbraco.UI.git

/add-dir /path/to/Umbraco-CMS/src/Umbraco.Web.UI.Client
/add-dir /path/to/Umbraco.UI/packages/uui
```

For more information, see [Tips for Best Results](/umbraco-in-ai/agent-skills/backoffice-skills/tips.md) article.

## Next Steps

* [**Backoffice Skills Overview**](/umbraco-in-ai/agent-skills/backoffice-skills/backoffice-skills.md)**:** Explore the different extension skills.
* [**Testing Skills**](/umbraco-in-ai/agent-skills/backoffice-skills/testing-skills.md)**:** Add tests to your extension.
* [**Tips for Best Results**](/umbraco-in-ai/agent-skills/backoffice-skills/tips.md)**:** Get better results from your AI assistant.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.umbraco.com/umbraco-in-ai/agent-skills/backoffice-skills/quickstart.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.