Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Une commande directe contourne le prompt de vérification. Examinez la source avant de l'exécuter.
If arguments not provided, check what exists and prompt for missing names.
2. Check what exists
Version guard (run first): Before building anything, invoke umbraco-version-guard
to confirm the site's Umbraco major matches the major these skills target. On a mismatch,
stop and point the user at the matching skill line — do not generate code.
find . -name "umbraco-package.json" 2>/dev/null | head -10
3. Take action
If no Umbraco instance:
Use the provided name (first argument) or prompt for one
Create with /package-script-writer [ProjectName]
If no extension:
Use the provided name (second argument) or prompt for one
Create with /umbraco-extension-template [ExtensionName]
If extension not registered:
Register with /umbraco-add-extension-reference [ExtensionName]
4. Warn about optional resources
Check extended workspace (including /add-dir directories) and warn if missing:
If CMS source not found:
⚠ Umbraco CMS source not found in extended workspace.
For better code generation, add it:
git clone https://github.com/umbraco/Umbraco-CMS
/add-dir /path/to/Umbraco-CMS/src/Umbraco.Web.UI.Client
If UUI source not found:
⚠ UUI library source not found in extended workspace.
For UI component reference, add it:
git clone https://github.com/umbraco/Umbraco.UI
/add-dir /path/to/Umbraco.UI/packages/uui
If testing skills not installed:
⚠ Testing skills not installed.
To add testing capabilities:
/plugin install umbraco-cms-backoffice-testing-skills@umbraco-backoffice-marketplace
5. MANDATORY: Enter Plan Mode
Do NOT proceed to building until this step is complete.
Tell the user setup is complete and show the login credentials
Read PRE-BUILD-PLANNING.md from the umbraco-backoffice skill
Ask the user what they want to build
✅ Setup complete! Your extension is ready.
Login: admin@test.com / SecurePass1234
What would you like to build? Describe your idea and I'll help you plan the implementation.
Examples:
- "A dashboard that shows recent content changes"
- "A property editor for picking colours"
- "A tree in Settings for managing custom data"
Include these MANDATORY sections in the plan document (they will be actioned after plan approval):
## Pre-Build Setup- [ ] Load `/umbraco-backoffice` skill for best practices and examples
## Implementation
[Your implementation steps here - skills to invoke, files to create]
## Post-Build Validation (REQUIRED - DO NOT SKIP)### Step 1: Initial Build- [ ] Run `npm run build` in extension directory
- [ ] Verify build completes without errors
### Step 2: Code Review- [ ] Spawn `umbraco-extension-reviewer` agent
- [ ] Fix all Critical/High severity issues
### Step 3: Rebuild (if fixes were made)- [ ] Run `npm run build` again
- [ ] Verify build still succeeds
### Step 4: Restart Umbraco- [ ] Stop the running Umbraco instance
- [ ] Run `dotnet run` to restart
- [ ] Wait for startup to complete
### Step 5: Browser Validation
Check if browser automation is available (any of: `dev-browser` skill, Playwright MCP, Claude computer use).
If validating with **Claude-in-Chrome** (`mcp__claude-in-chrome` tools): load the
`umbraco-chrome-navigation` skill first — the backoffice is Lit/shadow-DOM, so the built-in
find/read_page tools and raw screenshots are unreliable; that skill provides the
shadow-DOM-piercing helpers and navigation playbook needed to validate it.
If browser automation IS available:
- [ ] Navigate to backoffice login (http://localhost:5000/umbraco)
- [ ] Login with credentials
- [ ] Navigate to extension location
- [ ] Verify: no console errors, UI renders, interactions work
- [ ] Take screenshot of working extension
If NO browser automation available, output manual testing steps for user.
Exit plan mode only when wireframe AND all validation sections are in the plan
⚠️ Do NOT generate code until planning is complete and approved by the user.
Goal
Get the user to a working, validated extension. Follow the workflow: PLAN → BUILD → VALIDATE. Don't just report - take action.
Default Credentials
When creating an Umbraco instance, these defaults are used:
Email:admin@test.com
Password:SecurePass1234
These are safe for local development and don't contain special characters that cause escaping issues.
Example
/umbraco-quickstart MyUmbracoSite MyDashboard
This will:
Create Umbraco instance (e.g. "MyUmbracoSite") if not exists
Create extension (e.g. "MyDashboard")
Register the extension with the Umbraco project
Warn about missing CMS/UUI source if applicable
Enter plan mode to design the extension (wireframe, extension types, validation steps)
Build using identified sub-skills
Run npm run build
Run umbraco-extension-reviewer and fix issues
Rebuild if fixes were made
Restart Umbraco
Browser validation (automatic if browser automation available, manual steps otherwise)
