diff --git a/pkg-py/docs/articles/agent-skills.qmd b/pkg-py/docs/articles/agent-skills.qmd
index 252b9360..03ad1288 100644
--- a/pkg-py/docs/articles/agent-skills.qmd
+++ b/pkg-py/docs/articles/agent-skills.qmd
@@ -30,3 +30,17 @@ btw::btw_skill_install_package("shinyreact")
```
:::
+
+## Starter prompt
+
+The skill doubles as the starter template: it knows the Vite setup, the file layout, and the hooks, so you do not need to read about build tools before your first app.
+With the shinyreact skills installed, paste this into your agent (swap in `R` if that is your server):
+
+```
+Using the `/shinyreact-build-app` skill, scaffold a new shinyreact app in this
+directory with a Python server. Set up the Vite build (src/ui.tsx compiled to
+www/ui.js) and a hello-world UI: a text input whose value the server greets by
+name. Run the build and start the app.
+```
+
+To port an existing app instead, point the agent at it: "Using the `/shinyreact-convert-app` skill, convert the Shiny app in `./app.py` to the shinyreact `ui.tsx` pattern."
diff --git a/pkg-py/docs/index.qmd b/pkg-py/docs/index.qmd
index fa65df02..2b18f20e 100644
--- a/pkg-py/docs/index.qmd
+++ b/pkg-py/docs/index.qmd
@@ -46,9 +46,9 @@ server <- function(input, output, session) {
shinyApp(page_react(), server)
```
-## JavaScript (`www/ui.js`)
+## JavaScript (`ui.tsx`)
-```js
+```jsx
const { React, ReactDOM, useShinyInput, useShinyOutputValue } = window.shinyreact;
function App() {
@@ -62,7 +62,8 @@ function App() {
);
}
-ReactDOM.createRoot(document.getElementById("root")).render();
+// No mount div in the generated page — append one to
.
+ReactDOM.createRoot(document.body.appendChild(document.createElement("div"))).render();
```
:::
@@ -91,6 +92,19 @@ pak::pak("posit-dev/shinyreact/pkg-r")
The JS hooks come with the server package — `set_react_page()` / `page_react()` serve `shinyreact.js`, which installs them at `window.shinyreact`.
Apps with a bundler can instead `npm install @posit/shinyreact` and pass `shinyreact_js="client"` to the page entry point.
+## Agent Skills
+
+Both packages ship two [Agent Skills](articles/agent-skills.qmd) so a coding agent can build a shinyreact app without you pasting documentation into it: `shinyreact-build-app` builds a `ui.tsx`-pattern app from scratch, and `shinyreact-convert-app` ports an existing Shiny app to the pattern.
+
+The fastest starter template is the skill itself. With the shinyreact skills installed, paste this into your agent (swap in `R` if that is your server):
+
+```
+Using the `/shinyreact-build-app` skill, scaffold a new shinyreact app in this
+directory with a Python server. Set up the Vite build (src/ui.tsx compiled to
+www/ui.js) and a hello-world UI: a text input whose value the server greets by
+name. Run the build and start the app.
+```
+
## Reference
| | |
diff --git a/pkg-r/vignettes/articles/agent-skills.Rmd b/pkg-r/vignettes/articles/agent-skills.Rmd
index 378b7e9d..6de7b526 100644
--- a/pkg-r/vignettes/articles/agent-skills.Rmd
+++ b/pkg-r/vignettes/articles/agent-skills.Rmd
@@ -27,6 +27,23 @@ btw::btw_skill_install_package("shinyreact")
The installed files live at `system.file("skills", package = "shinyreact")`.
+## Starter prompt
+
+The skill doubles as the starter template: it knows the Vite setup, the file
+layout, and the hooks, so you do not need to read about build tools before your
+first app. With the shinyreact skills installed, paste this into your agent:
+
+```
+Using the `/shinyreact-build-app` skill, scaffold a new shinyreact app in this
+directory with an R server. Set up the Vite build (src/ui.tsx compiled to
+www/ui.js) and a hello-world UI: a text input whose value the server greets by
+name. Run the build and start the app.
+```
+
+To port an existing app instead, point the agent at it: "Using the
+`/shinyreact-convert-app` skill, convert the Shiny app in `./app.R` to the
+shinyreact `ui.tsx` pattern."
+
## Python
The Python package ships the same two skills. Install them into a project with