Menu
Create the Umbraco home page structure, template, styling, and published root content. Use when asked to scaffold or build the home page.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Add hero images to blog posts and render image previews on list and detail pages. Use when asked to add blog media.
Ensure sufficient authored blog entries for the demo. Use when asked to generate or expand blog content.
Run the end-to-end Umbraco blogging-site demo as a Conductor multi-agent workflow. Use when asked to build the full demo site via Conductor (the orchestrated, workflow-driven variant of the umbraco-demo agent).
Create Blog List and Blog page document types and templates, plus exactly one starter blog post. Use when asked to set up blog pages in Umbraco.
Implement shared site navigation and validate rendering with Playwright. Use when asked to add or improve navigation.
Run accessibility checks and fix issues until passing. Use when asked to test or improve website accessibility.
| name | umb-homepage |
| description | Create the Umbraco home page structure, template, styling, and published root content. Use when asked to scaffold or build the home page. |
Git: Before making changes, verify you are on a
develop/*branch (seegit.instructions.md).
Create a single master Razor layout at src/MyProject/Views/_Layout.cshtml that holds the shared page shell — <!DOCTYPE html>, <head> (meta, <title>, the /css/site.css link, sitemap link), the navigation/header, the footer, and @RenderBody() for the page-specific content. Every page template (home.cshtml, blogList.cshtml, blog.cshtml, etc.) must then set Layout = "_Layout.cshtml"; and contain only its unique content — never its own <!DOCTYPE>/<head>/<body>/nav/footer.
Do NOT use
Layout = null;per page and copy the HTML shell into each template. Duplicating the shell forces you to re-edit the same<head>, CSS link, nav, and footer in 3+ files on the navigation, tag-cloud, sitemap, and accessibility steps — a large, avoidable time sink. Define the chrome once in_Layout.cshtml.
The _Layout.cshtml is a plain Razor layout authored directly on the filesystem (not an Umbraco template created via MCP). It should still start with @inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage so Umbraco helpers (e.g. Model.Root()) work inside it.
<img>)This site has HMAC-signed media URLs enabled. The moment you render any
image that needs resizing/cropping (a home hero, a logo, anything), you MUST use
GetCropUrl — never hand-build a query string. An unsigned
?width=...&height=...&mode=crop URL returns HTTP 400 Bad Request and the
image silently fails to load, which has repeatedly cost time on past runs.
var heroImage = Model.Value<Umbraco.Cms.Core.Models.PublishedContent.IPublishedContent>("heroImage");
var heroImageUrl = heroImage?.GetCropUrl(width: 1600, height: 600);
GetCropUrl generates the correctly signed URL automatically. This applies to
every template in the site, so adopt it from the very first image you render.
Use Playwright to navigate to SITE_BASE_URL. Confirm:
div#stackpage element).After validation passes, commit all changes before considering this step done:
git add -A
git commit -m "Step 1: Home page — <brief summary of what was created>"
This commit is mandatory. The step is not complete until the commit exists in the git log.