How do I install the Create Example skill?

Run npx skillmds@latest add microsoft/create-example in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Create Example skill do?

Create a runnable WebUI example with app structure, theme wiring, Playwright tests, demo metadata, and demo-shell registration. It is listed under Coding & Dev Tools on SkillMD.

Is Create Example safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Create Example?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Create Example free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Create Example?

Microsoft (@microsoft) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Create Example by microsoft — Agent Skill

Name: Create Example
Author: Microsoft

File contents

Checklist

Create the app folder with src/, data/state.json when SSR state is needed, package.json, tsconfig.json, and a concise demo.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.json scripts consistent: build, start:client, start:server, start, test, and test:update-snapshots when Playwright applies.
Add Playwright coverage in tests/ and a playwright.config.ts using the app's fixed dev port. Prefer behavior tests over screenshots unless the UI is the point.
Register the app in xtask/src/e2e.rs when it has Playwright tests. Use pre_script: Some("build") for custom build pipelines that the generic esbuild step cannot reproduce.
Add demo.toml, copy the app into examples/demo/Dockerfile, and list it in examples/README.md.
Run the focused app test, then cargo xtask check.

Frequently asked questions

Create Example