Menu
Canonical Blazor activity-page layout shell for SentenceStudio webapp. Copy VocabQuiz verbatim; only swap inner content.
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
| name | blazor-activity-layout-shell |
| description | Canonical Blazor activity-page layout shell for SentenceStudio webapp. Copy VocabQuiz verbatim; only swap inner content. |
| domain | blazor-hybrid-ui |
| confidence | medium |
| source | earned (publishes #5–#9, NumberDrill Phase 1, 2026-05-06 / 2026-05-07) |
When building a new activity page in src/SentenceStudio.UI/Pages/*.razor (Blazor Hybrid webapp), there is exactly one canonical layout shell. Copy it verbatim from VocabQuiz.razor. Only swap inner content. Do not invent your own outer structure.
This rule was earned by failing it three times. Across publishes #7, #8, and #9, NumberDrill kept getting rebuilt with subtly-different outer markup; each rebuild produced a different visual defect (footer not pinned, card wrapper around content, empty input-bar div rendering as chrome strip). The fix every time was "make it look like VocabQuiz." There is no good reason to deviate.
Apply this skill when: authoring a new activity page, refactoring an existing activity page's outer shell, or diagnosing why an activity page's footer/chrome looks different from VocabQuiz.
Reference: src/SentenceStudio.UI/Pages/VocabQuiz.razor lines 8–27, 382.
<div class="activity-page-wrapper">
<PageHeader Title='@Localize["YourActivityTitle"]' ShowBack="true" OnBack="GoBack" />
<div class="activity-content">
@* === your scrolling activity content goes here === *@
@* The .activity-content div is the only thing that scrolls. *@
@* Everything outside it is fixed chrome. *@
</div>
@* OPTIONAL — pinned footer. Omit entirely if you don't need one. *@
<div class="activity-footer d-flex justify-content-between align-items-center">
@* footer controls *@
</div>
@* OPTIONAL — pinned input bar. Omit entirely if you don't need one. *@
<div class="activity-input-bar">
@* input UI *@
</div>
</div>
src/SentenceStudio.UI/wwwroot/css/app.css lines ~1381–1424 define the contract:
| Class | Behavior |
|---|---|
.activity-page-wrapper | display: flex; flex-direction: column; height: calc(100% + 2rem) — fills the main content area edge-to-edge |
.activity-content | flex: 1; overflow-y: auto; min-height: 0 — the ONLY scrolling region |
.activity-footer | flex-shrink: 0; border-top; padding-bottom: safe-area-inset-bottom — pinned to bottom |
.activity-input-bar | flex-shrink: 0; border-top; padding-bottom: safe-area-inset-bottom — also pinned, same chrome |
Both .activity-footer and .activity-input-bar paint visible chrome unconditionally. The flex-shrink:0 + border-top + safe-area-inset-bottom triad is what pins them to the bottom edge correctly.
.activity-footer..activity-input-bar..activity-page-wrapper.<div class="activity-input-bar"> left behindObserved: Publish #9 (NumberDrill).
@* WRONG — empty div will render a visible chrome strip *@
<div class="activity-input-bar">
@* nothing here for this activity mode *@
</div>
The class paints border-top + padding + safe-area-inset-bottom regardless of children. On iPhone with home-indicator, that's a ~50px visible strip below your footer.
Fix: omit the div entirely. Do not leave it "for symmetry."
Observed: Publishes #7 and #8 (NumberDrill).
@* WRONG — VocabQuiz does NOT have a card wrapper *@
<div class="activity-page-wrapper">
<div class="card card-ss"> <!-- ← bug -->
<div class="activity-content">
...
</div>
<div class="activity-footer">...</div>
</div>
</div>
A card wrapper breaks the flex-column chain on .activity-page-wrapper → .activity-content (flex: 1) → .activity-footer (flex-shrink: 0). The footer un-pins from the bottom edge because the card now constrains its sizing.
Fix: no card wrapper. Use .card.card-ss ONLY for setup screens / inline cards INSIDE .activity-content, never around the whole shell.
Observed: Publish #7 (NumberDrill).
Causes:
.activity-content instead of as a sibling.flex-shrink: 0 or safe-area padding.Fix: footer is a sibling of .activity-content inside .activity-page-wrapper. Use the canonical .activity-footer class. Don't reinvent.
If you find yourself naming a new class like .numberdrill-shell or .my-activity-wrapper, stop. The contract is shared CSS. Diverging means future activity pages won't share the same chrome behavior across iOS / Android / desktop.
src/SentenceStudio.UI/Pages/VocabQuiz.razor
src/SentenceStudio.UI/Pages/NumberDrill.razor — after Publish #9 fix, lines 26–29 and 465 mirror the VocabQuiz shell.
Build and run the new page on iPhone. Take a screenshot. Take a screenshot of VocabQuiz on the same device. Compare side-by-side using the maui-visual-review skill — focus on the strip immediately below the footer (chrome height + safe-area padding should be identical).
.squad/decisions.md — Publish #7, #8, #9 entries (2026-05-07)src/SentenceStudio.UI/wwwroot/css/app.css lines 1381–1424 (with anti-pattern #1 warning comment added 2026-05-07)~/.copilot/skills/maui-visual-review/SKILL.md — for side-by-side parity checks.squad/skills/available-copilot-skills/SKILL.md{what this skill teaches agents}
Use when working with an Aspire distributed application and operating the AppHost or its resources through the Aspire CLI: start/restart/stop/wait on the app; iterate via watch, rebuild, hot reload, or resource commands; inspect resources, logs, traces, docs, or health; add integrations; manage secrets/config; publish, deploy, or rerun a named pipeline step; initialize Aspire in an existing app; recover missing `.modules` files in a TypeScript AppHost; discover the frontend URL for Playwright from Aspire state; expose custom dashboard/resource commands; or understand Aspire AppHost APIs in C# or TypeScript. Use it even if the task is described in terms of AppHost, resources, dashboard, app bootstrap, missing generated modules, Playwright URL discovery, or local distributed app workflow without naming Aspire. Do not use for non-Aspire .NET apps, container-only repos with no AppHost, or ordinary build and test tasks.
Systematic recovery procedure for Aspire AppHost failures caused by orphaned processes holding critical ports (especially 22070). Covers diagnostics, two-pass cleanup (AppHost + dcp tree, then orphaned services), verification, and restart validation. USE FOR: "aspire won't start", "cannot access disposed object", "address already in use", "aspire dashboard not loading", "port 22070 in use", "aspire restart failed", "orphaned dcp processes", dashboard stuck on "starting", build succeeds but services won't start, previous Aspire session crashed and won't restart. DO NOT USE FOR: initial Aspire setup, configuration changes, deployment issues, or general Aspire CLI usage (use the aspire skill instead).
End-to-end testing and verification for SentenceStudio. USE THIS SKILL whenever the user says "test", "verify", "check", "validate", "confirm it works", "smoke test", "run the app and check", "does it work", "try it", "make sure", or any variation of testing a feature or fix in a running app. Also use after EVERY bug fix or feature implementation as a mandatory final verification step — even if you think a build check is enough. Covers: launching via Aspire, interacting with Playwright (webapp) or maui-devflow-debug (native), verifying UI state, checking database records, and reading structured logs. If someone asks you to test anything in this app, or to verify a fix works, or to run a smoke test, or to check that CRUD operations work, or to confirm audio/quiz/import/activity features behave correctly — this is the skill to use. Do NOT skip this skill when verification is needed.
Run build, deploy, inspect, and fix loops for .NET MAUI apps that already have MAUI DevFlow integrated. USE FOR: launching MAUI apps, selecting devices or emulators, waiting for or recovering agent connections, broker/port/adb connectivity issues, visual tree inspection, screenshots, UI interaction, Blazor WebView CDP debugging, reading DevFlow logs, and iterative app debugging. DO NOT USE FOR: first-time DevFlow package setup (use maui-devflow-onboard), or generic desktop automation unrelated to MAUI. INVOKES: maui devflow CLI, dotnet CLI, Android adb/android tools, and Apple simctl tools.
Add MAUI DevFlow to a .NET MAUI project with agent package references, MauiProgram.cs registration, Blazor WebView support, GTK variants, Central Package Management guidance, and verification commands. USE FOR: first-time DevFlow setup, reviewing what files to edit, choosing DevFlow packages, or continuing after `maui devflow init` installs skills. DO NOT USE FOR: troubleshooting an already-integrated app that cannot connect, iterative app debugging, UI inspection, or generic MAUI build failures (use maui-devflow-debug). INVOKES: maui devflow CLI and dotnet CLI.