create-example Skill
Create a runnable WebUI example with app structure, theme wiring, Playwright tests, demo metadata, and demo-shell registration. Published by microsoft in webui.
What is create-example Skill?
Create a runnable WebUI example with app structure, theme wiring, Playwright tests, demo metadata, and demo-shell registration. Published by microsoft in webui. This profile combines repository metadata with install, compatibility, and usage signals so developers can quickly decide whether it fits their agent workflow before opening the source repository.
Automated repository signals based on public metadata such as recency, license, installation evidence, and adoption. These are not a security audit or endorsement.
Key capabilities
- Includes SKILL.md support
- Reusable instructions support
- Browser automation
- Testing
- Data analysis
- Design and media
- Browser automation use cases
Technical details
- Install or run with Copy skill directory
When to use create-example Skill
- Use it for browser automation.
- Use it for testing.
- Use it for data analysis.
- Use it for design and media.
Built with
Editorial notes
Source
- Creator: microsoft
- Repository: microsoft/webui
- Skill file: .github/skills/create-example/SKILL.md
What it does
Create a runnable WebUI example with app structure, theme wiring, Playwright tests, demo metadata, and demo-shell registration.
Skill instructions
Checklist 1. Create the app folder with src/, data/state.json when SSR state is needed, package.json, tsconfig.json, and a concise demo.toml. 2. 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. 3. Keep package.json scripts consistent: build, start:client, start:server, start, test, and test:update-snapshots when Playwright applies. 4. 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. 5. Register the app in xtask/src/e2e.rs when it has Playwright tests. Use prescript: Some("build") for custom build pipelines that the generic esbuild step cannot reproduce. 6. Add demo.toml, copy the app into examples/demo/Dockerfile, and list it in examples/README.md. 7. Run the focused app test, then cargo xtask check.
Explore related resources
Frequently asked questions
What is create-example?
create-example is a open-source AI agent skill with Copy skill directory. Create a runnable WebUI example with app structure, theme wiring, Playwright tests, demo metadata, and demo-shell registration.
Who is create-example best for?
create-example is best for reusing agent instructions, scripts, and references, browser automation workflows, testing workflows, data analysis workflows.
How do I install create-example?
Install or run create-example using Copy skill directory. Check create-example for the latest setup command.
Is create-example actively maintained?
create-example may need a closer maintenance check before production use.
Auto-fetched from GitHub.
