From 2669754ea8af51815d8bff2e3633217dfed50a5a Mon Sep 17 00:00:00 2001
From: Barret Schloerke <barret@posit.co>
Date: Thu, 10 Sep 2026 16:25:02 -0400
Subject: [PATCH] docs: ui.tsx tab title, body mount, Agent Skills starter
 prompt on the front page

---
 pkg-py/docs/articles/agent-skills.qmd     | 14 ++++++++++++++
 pkg-py/docs/index.qmd                     | 20 +++++++++++++++++---
 pkg-r/vignettes/articles/agent-skills.Rmd | 17 +++++++++++++++++
 3 files changed, 48 insertions(+), 3 deletions(-)

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(<App />);
+// No mount div in the generated page — append one to <body>.
+ReactDOM.createRoot(document.body.appendChild(document.createElement("div"))).render(<App />);
 ```
 
 :::
@@ -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