{
  "markdown": "# Umbraco Backoffice Skills Marketplace\r\n\r\n> **Experimental Beta:** This project is an exploration of what's possible with Skills for Umbraco. It's evolving as we learn what works best.\r\n\r\nA Claude Code plugin marketplace with 67 skills for Umbraco backoffice customization and testing.\r\n\r\n## Quick Start\r\n\r\nAdd the marketplace:\r\n```bash\r\n/plugin marketplace add umbraco/Umbraco-CMS-Backoffice-Skills\r\n```\r\n\r\nInstall the plugins:\r\n```bash\r\n# Backoffice extension skills (59 skills)\r\n/plugin install umbraco-cms-backoffice-skills@umbraco-backoffice-marketplace\r\n\r\n# Testing skills (8 skills) - optional but recommended\r\n/plugin install umbraco-cms-backoffice-testing-skills@umbraco-backoffice-marketplace\r\n```\r\n\r\n---\r\n\r\n## ⚠️ Match the skills to your Umbraco major\r\n\r\n**These skills are versioned to a single Umbraco major** (tree data sources, auth, OpenAPI\r\nregistration and more differ between majors, so loading the wrong line produces\r\nconfidently-incorrect code). Each major gets its own line, following one rule:\r\n\r\n- **The default `main` branch always targets the latest supported major.**\r\n- **Older majors live on a `vN/main` branch** (e.g. `v17/main`).\r\n\r\nSo pick your install by your site's major:\r\n\r\n| Your site is… | Install command |\r\n|---|---|\r\n| **The latest major** (whatever `main` currently targets) | `/plugin marketplace add umbraco/Umbraco-CMS-Backoffice-Skills` |\r\n| **An older major `N`** | `/plugin marketplace add https://github.com/umbraco/Umbraco-CMS-Backoffice-Skills.git#vN/main` |\r\n\r\n> _Currently `main` targets Umbraco 18, and `v17/main` is available for Umbraco 17. When a\r\n> new major ships, `main` moves to it and the previous major moves to its own `vN/main`._\r\n\r\nFor the **Vercel Skills CLI** (Cursor/Copilot/Windsurf), point the repo URL at the matching\r\nbranch — `main` for the latest major, or `.../tree/vN/main/...` for an older one.\r\n\r\n**Not sure which major your site is?** Check the `Umbraco.Cms` version in your project's\r\n`.csproj`, or the `@umbraco-cms/backoffice` version in your `Client/package.json`.\r\n\r\n**Automatic safety net:** the `umbraco-version-guard` skill runs as a preflight inside the\r\nentry skills (`umbraco-quickstart`, `umbraco-backoffice`, `umbraco-extension-template`). It\r\nderives the major these skills target from the plugin itself, detects your site's major,\r\nand **stops with a warning if they don't match** — so a mismatch can't silently produce\r\nwrong code, and the check stays correct as new majors ship. Run it directly any time with\r\n`/umbraco-version-guard`.\r\n\r\n---\r\n\r\n## Install for Other Editors (Cursor, GitHub Copilot, Windsurf, and more)\r\n\r\nThese skills use the open [SKILL.md](https://agentskills.io/home) format, which is now supported natively by multiple AI coding tools. You can install them into any supported editor using the [Vercel Skills CLI](https://github.com/vercel-labs/skills).\r\n\r\n> **Important:** Always use the `-a` flag to target your editor, otherwise skills will be symlinked into every supported agent directory.\r\n\r\nInstall all skills for your editor:\r\n```bash\r\n# For Cursor\r\nnpx skills add umbraco/Umbraco-CMS-Backoffice-Skills --skill '*' -a cursor\r\n\r\n# For GitHub Copilot\r\nnpx skills add umbraco/Umbraco-CMS-Backoffice-Skills --skill '*' -a github-copilot\r\n\r\n# For Windsurf\r\nnpx skills add umbraco/Umbraco-CMS-Backoffice-Skills --skill '*' -a windsurf\r\n```\r\n\r\nOr install each skill set separately:\r\n```bash\r\n# Backoffice extension skills (59 skills)\r\nnpx skills add https://github.com/umbraco/Umbraco-CMS-Backoffice-Skills/tree/main/plugins/umbraco-backoffice-skills/skills -a cursor\r\n\r\n# Testing skills (8 skills) - optional but recommended\r\nnpx skills add https://github.com/umbraco/Umbraco-CMS-Backoffice-Skills/tree/main/plugins/umbraco-testing-skills/skills -a cursor\r\n```\r\n\r\n```bash\r\n# Install specific skills\r\nnpx skills add umbraco/Umbraco-CMS-Backoffice-Skills --skill umbraco-dashboard --skill umbraco-tree -a cursor\r\n```\r\n\r\n### Editor Requirements\r\n\r\n| Editor | Minimum Version | Skills Path |\r\n|--------|----------------|-------------|\r\n| **Cursor** | 2.4+ (January 2026) | `.cursor/skills/` |\r\n| **GitHub Copilot** (VS Code) | VS Code 1.109+ (January 2026) | `.github/skills/` |\r\n| **GitHub Copilot** (Coding Agent) | Supported | `.github/skills/` |\r\n| **Windsurf** | Current | `.windsurf/skills/` |\r\n| **Claude Code** | Current (use Quick Start above) | `.claude/skills/` |\r\n\r\nAll of these editors load skills **on-demand** — only the skill relevant to your current task is loaded into context, so installing all 67 skills won't affect performance.\r\n\r\n---\r\n\r\n## Getting Started Skills\r\n\r\nThese skills are your entry points for Umbraco backoffice extension development. Start here.\r\n\r\n### `umbraco-quickstart` - Quick Setup\r\n\r\n**Start here if you're new.** Sets up everything in one command and guides you through planning, building, and validating your extension.\r\n\r\n```bash\r\n# Full setup with custom credentials\r\n/umbraco-quickstart MyUmbracoSite MyExtension --email a@a.co.uk --password Admin123456\r\n\r\n# With default credentials (admin@test.com / SecurePass1234)\r\n/umbraco-quickstart MyUmbracoSite MyExtension\r\n\r\n# Just instance name - will prompt for extension name\r\n/umbraco-quickstart MyUmbracoSite\r\n\r\n# No arguments - detects existing or prompts for names\r\n/umbraco-quickstart\r\n```\r\n\r\nThis skill follows a **PLAN → BUILD → VALIDATE** workflow:\r\n\r\n1. **Setup** - Create Umbraco instance and extension (if needed), register extension\r\n2. **Plan** - Enter plan mode with ASCII wireframes, identify extension types, map data flow\r\n3. **Build** - Generate code using identified sub-skills\r\n4. **Review** - Auto-run `umbraco-extension-reviewer` to catch and fix issues\r\n5. **Validate** - Auto-validate in browser (if Playwright MCP or browser automation available) or provide manual test steps\r\n\r\n---\r\n\r\n### Manual Setup\r\n\r\nIf you prefer to set things up step by step:\r\n\r\n#### 1. Create an Umbraco Instance\r\n\r\nUse the `package-script-writer` skill to create an Umbraco instance using the [PSW CLI](https://github.com/prjseal/Package-Script-Writer-CLI).\r\n\r\n```bash\r\n/package-script-writer MyProject\r\n```\r\n\r\nThanks to Paul Seal ([@prjseal](https://github.com/prjseal)) for his hard work on the PSW CLI.\r\n\r\n#### 2. Create an Extension\r\n\r\nUse `umbraco-extension-template` to create a new extension project:\r\n\r\n```bash\r\n/umbraco-extension-template MyFeature\r\n```\r\n\r\nOr manually:\r\n```bash\r\ndotnet new install Umbraco.Templates\r\ndotnet new umbraco-extension -n MyExtension -ex\r\ncd MyExtension/Client && npm install && npm run watch\r\n```\r\n\r\n#### 3. Register the Extension\r\n\r\nUse `umbraco-add-extension-reference` to register your extension with the Umbraco project:\r\n\r\n```bash\r\n/umbraco-add-extension-reference MyExtension\r\n```\r\n\r\nThis adds a `<ProjectReference>` to your Umbraco `.csproj` file so the extension loads.\r\n\r\n---\r\n\r\n### `umbraco-backoffice` - The Backbone Skill\r\n\r\n**This is the most important skill.** It provides:\r\n\r\n- **Complete Extension Map** - Visual diagram showing where ALL 57 extension types appear in the backoffice UI\r\n- **Working Blueprints** - Copy-and-adapt examples for common patterns\r\n- **Sub-Skill Reference** - Links to all other skills organised by category\r\n\r\n**Use this skill when:**\r\n- Starting a new backoffice customisation project\r\n- Understanding how extension types connect together\r\n- Finding the right skill for a specific UI location\r\n\r\n**Blueprints included:**\r\n| Blueprint | Description | Skills Used |\r\n|-----------|-------------|-------------|\r\n| Blueprint 1 | Section + Menu + Dashboard + Workspace | 6 skills |\r\n| TimeDashboard | 13 extension types working together | 13 skills |\r\n| tree-example | Settings tree with workspace | 7 skills |\r\n| notes-wiki | Full-stack with C# backend | 27 skills |\r\n\r\n```bash\r\n/umbraco-backoffice\r\n```\r\n\r\n---\r\n\r\n## Best Practice: Add Source Code References\r\n\r\nThese skills work best when Claude has access to the Umbraco source code. This allows Claude to:\r\n- Reference actual Umbraco implementations and patterns\r\n- Understand types, interfaces, and base classes\r\n- Follow existing code conventions accurately\r\n\r\n**Recommended setup:**\r\n\r\n1. Clone the repositories alongside your project:\r\n   ```bash\r\n   git clone https://github.com/umbraco/Umbraco-CMS.git\r\n   git clone https://github.com/umbraco/Umbraco.UI.git\r\n   ```\r\n\r\n2. Add them as working directories in Claude Code:\r\n   ```bash\r\n   /add-dir /path/to/Umbraco-CMS/src/Umbraco.Web.UI.Client\r\n   /add-dir /path/to/Umbraco.UI/packages/uui\r\n   ```\r\n\r\nThis gives Claude direct access to:\r\n- **Umbraco.Web.UI.Client** - Backoffice TypeScript source code\r\n- **UUI** - Umbraco UI component library\r\n\r\n---\r\n\r\n## All Skills Reference\r\n\r\n### Foundation (10 skills)\r\nCore architectural concepts used across all extensions:\r\n\r\n| Skill | Description |\r\n|-------|-------------|\r\n| `umbraco-context-api` | Provider-consumer pattern for data sharing |\r\n| `umbraco-repository-pattern` | Data access layer abstraction |\r\n| `umbraco-extension-registry` | Dynamic extension registration |\r\n| `umbraco-conditions` | Control where extensions appear |\r\n| `umbraco-state-management` | Reactive UI with @state |\r\n| `umbraco-localization` | Multi-language support |\r\n| `umbraco-routing` | URL structure and navigation |\r\n| `umbraco-notifications` | Toast messages and events |\r\n| `umbraco-umbraco-element` | Base class for components |\r\n| `umbraco-controllers` | C# API endpoints |\r\n\r\n### Extension Types (30 skills)\r\nUI extensions for the backoffice:\r\n\r\n**Navigation & Sections**\r\n- `umbraco-sections` - Top-level navigation\r\n- `umbraco-menu` / `umbraco-menu-items` - Sidebar menus\r\n- `umbraco-header-apps` - Header bar apps\r\n\r\n**Content Areas**\r\n- `umbraco-dashboard` - Welcome panels\r\n- `umbraco-workspace` - Entity editing views\r\n- `umbraco-tree` / `umbraco-tree-item` - Hierarchical navigation\r\n- `umbraco-collection` / `umbraco-collection-view` / `umbraco-collection-action` - List/grid views\r\n\r\n**Actions**\r\n- `umbraco-entity-actions` - Context menu actions\r\n- `umbraco-entity-bulk-actions` - Multi-select operations\r\n- `umbraco-entity-create-option-action` - Create menu options\r\n- `umbraco-current-user-action` - User profile actions\r\n\r\n**UI Components**\r\n- `umbraco-modals` - Dialogs and sidebars\r\n- `umbraco-icons` - Custom icon sets\r\n- `umbraco-theme` - Backoffice themes\r\n- `umbraco-ufm-component` - Umbraco Flavored Markdown\r\n\r\n**Search & Preview**\r\n- `umbraco-search-provider` - Global search\r\n- `umbraco-search-result-item` - Custom result rendering\r\n- `umbraco-preview-app-provider` - Content preview apps\r\n\r\n**Advanced**\r\n- `umbraco-global-context` - App-wide shared state\r\n- `umbraco-kinds` - Reusable manifest templates\r\n- `umbraco-dynamic-root` - Content picker configuration\r\n- `umbraco-user-profile-app` - User profile tabs\r\n- `umbraco-health-check` - System health checks\r\n- `umbraco-package-view` - Package configuration UI\r\n- `umbraco-entry-point` / `umbraco-bundle` - Extension lifecycle\r\n\r\n### Property Editors (6 skills)\r\nCustom data type editors:\r\n\r\n| Skill | Description |\r\n|-------|-------------|\r\n| `umbraco-property-editor-ui` | Visual editor component |\r\n| `umbraco-property-editor-schema` | Data validation |\r\n| `umbraco-property-action` | Property buttons |\r\n| `umbraco-property-value-preset` | Default value templates |\r\n| `umbraco-file-upload-preview` | Upload previews |\r\n| `umbraco-block-editor-custom-view` | Block rendering |\r\n\r\n### Rich Text (4 skills)\r\nTiptap editor customization:\r\n\r\n| Skill | Description |\r\n|-------|-------------|\r\n| `umbraco-tiptap-extension` | Core editor behavior |\r\n| `umbraco-tiptap-toolbar-extension` | Toolbar buttons |\r\n| `umbraco-tiptap-statusbar-extension` | Status bar items |\r\n| `umbraco-monaco-markdown-editor-action` | Markdown buttons |\r\n\r\n### Backend (4 skills)\r\nAuthentication and API integration:\r\n\r\n| Skill | Description |\r\n|-------|-------------|\r\n| `umbraco-openapi-client` | **Required for custom API calls** |\r\n| `umbraco-auth-provider` | External login (OAuth) |\r\n| `umbraco-mfa-login-provider` | Two-factor authentication |\r\n| `umbraco-granular-user-permissions` | Fine-grained access |\r\n\r\n### Testing (8 skills)\r\nComplete testing pyramid for Umbraco extensions:\r\n\r\n| Skill | Description |\r\n|-------|-------------|\r\n| `umbraco-testing` | **Router skill** - Choose the right testing approach |\r\n| `umbraco-unit-testing` | Unit tests with @open-wc/testing |\r\n| `umbraco-mocked-backoffice` | Test in mocked backoffice (no .NET required) |\r\n| `umbraco-e2e-testing` | E2E tests against real Umbraco |\r\n| `umbraco-playwright-testhelpers` | Full testhelpers API reference |\r\n| `umbraco-test-builders` | JsonModels.Builders for test data |\r\n| `umbraco-msw-testing` | MSW handlers for API mocking |\r\n| `umbraco-example-generator` | Generate testable extensions |\r\n\r\n**Testing Pyramid:**\r\n```\r\n                ┌─────────────┐\r\n                │   E2E Tests │  ← Real Umbraco, complete workflows\r\n                └─────────────┘\r\n          ┌─────────────────────────┐\r\n          │   Mocked Backoffice     │  ← No backend, realistic UI\r\n          └─────────────────────────┘\r\n    ┌─────────────────────────────────────┐\r\n    │           Unit Tests                │  ← Fast, isolated\r\n    └─────────────────────────────────────┘\r\n```\r\n\r\n**Critical:** E2E tests must use `@umbraco/playwright-testhelpers` and `@umbraco/json-models-builders`. Never write raw Playwright tests for Umbraco.\r\n\r\n```bash\r\n/umbraco-testing\r\n```\r\n\r\n---\r\n\r\n## Examples\r\n\r\nComplete working examples in the `examples/` folder:\r\n\r\n- **Blueprint** - Section + Menu + Dashboard + Workspace\r\n- **TimeDashboard** - 13 extension types working together\r\n- **tree-example** - Settings tree with workspace + **complete testing pyramid** (32 tests across unit, mocked, and E2E)\r\n- **notes-wiki** - Full-stack with C# backend (27 skills)\r\n- **document-type-crud** - E2E testing example with testhelpers\r\n\r\n## Usage\r\n\r\nInvoke any skill by name:\r\n```\r\nUse the umbraco-dashboard skill to create a new dashboard\r\n```\r\n\r\nOr reference in conversation:\r\n```\r\nI need to create a custom tree in the Settings section\r\n```\r\nClaude will automatically use the relevant skills (`umbraco-tree`, `umbraco-conditions`, etc.)\r\n\r\n## Project Structure\r\n\r\n```\r\nUmbraco-CMS-Backoffice-Skills/\r\n├── .claude-plugin/marketplace.json     # Marketplace manifest\r\n├── plugins/\r\n│   ├── umbraco-backoffice-skills/      # Plugin with 58 extension skills\r\n│   │   ├── .claude-plugin/plugin.json\r\n│   │   └── skills/\r\n│   │       ├── umbraco-dashboard/SKILL.md\r\n│   │       ├── umbraco-tree/SKILL.md\r\n│   │       └── ... (58 skills)\r\n│   └── umbraco-testing-skills/         # Plugin with 8 testing skills\r\n│       ├── .claude-plugin/plugin.json\r\n│       └── skills/\r\n│           ├── umbraco-testing/SKILL.md\r\n│           ├── umbraco-e2e-testing/SKILL.md\r\n│           └── ... (8 skills + examples)\r\n├── examples/                           # Working code examples\r\n├── Umbraco-CMS.Skills/                 # .NET test project\r\n└── .claude/\r\n    ├── commands/                       # Local commands\r\n    └── settings.local.json             # Local permissions\r\n```\r\n\r\n## License\r\n\r\nMIT\r\n\r\n## Credits\r\n\r\nBuilt by Phil W ([@hifi-phil](https://github.com/hifi-phil))\r\n\r\nSkills based on [Umbraco CMS](https://umbraco.com/) backoffice documentation.\r\n\r\n### Example Attribution\r\n\r\nThe **TimeDashboard** and **tree-example** examples are based on work by Kevin Jump ([@KevinJump](https://github.com/KevinJump)):\r\n- **TimeDashboard:** [KevinJump/TimeDashboard](https://github.com/KevinJump/TimeDashboard)\r\n- **tree-example:** [KevinJump/Umbraco-Tree-Example](https://github.com/KevinJump/Umbraco-Tree-Example)\r\n- **Blog Series:** [Early Adopter's Guide to Umbraco v14](https://dev.to/kevinjump/series/26505)\r\n\r\nThese examples demonstrate sections, trees, workspaces, menus, header apps, modals, and server communication patterns for Umbraco backoffice extensions.\r\n",
  "bytes": 15885,
  "sha": "185a2dbc4eaa54c713a196db6b82b0d4d3d755164f4a4c1fd7d520edcf19d6db",
  "repo_slug": "umbraco/umbraco-cms-backoffice-skills",
  "fonte": "repo",
  "truncated": false,
  "api": "https://api.agentalog.com/api/listings/skl_umbraco_umbraco_cms_backoffice_skills_um_3c358e10/readme"
}