<< All versions
Skill v1.0.0
Trusted Publisher100/100microsoft/webui/create-example
──Details
PublishedJuly 8, 2026 at 12:10 AM
Content Hashsha256:6e6fcb62629c3d6e...
Git SHA
──Files
Files (1 file, 1.2 KB)
SKILL.md1.2 KBactive
SKILL.md · 16 lines · 1.2 KB
version: "1.0.0" name: create-example description: Create a runnable WebUI example with app structure, theme wiring, Playwright tests, demo metadata, and demo-shell registration.
Checklist
- Create the app folder with
src/,data/state.jsonwhen SSR state is needed,package.json,tsconfig.json, and a concisedemo.toml. - Use the shared theme for example UI: add
@microsoft/webui-examples-theme, pass--theme=@microsoft/webui-examples-theme, and inject/*{{{tokens.light}}}*/plus/*{{{tokens.dark}}}*/in the entry template. - Keep
package.jsonscripts consistent:build,start:client,start:server,start,test, andtest:update-snapshotswhen Playwright applies. - Add Playwright coverage in
tests/and aplaywright.config.tsusing the app's fixed dev port. Prefer behavior tests over screenshots unless the UI is the point. - Register the app in
xtask/src/e2e.rswhen it has Playwright tests. Usepre_script: Some("build")for custom build pipelines that the generic esbuild step cannot reproduce. - Add
demo.toml, copy the app intoexamples/demo/Dockerfile, and list it inexamples/README.md. - Run the focused app test, then
cargo xtask check.