Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.
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)
