Shell Tool · engineering · Sentinel

Spin up a Web App

Scaffold a fresh web app in /work, start the dev server, surface the live preview URL.

Updated today

View as MarkdownsentinelsonnetstandardMax 12 turns

Overview

End-to-end web-app bootstrap. Picks the right framework (Next.js, Vite, Astro, plain HTML) based on the user's hint, scaffolds into /work, installs deps, starts the dev server bound to 0.0.0.0:3000 via start-dev-server, then calls shell_preview_info so the Computer tab auto-flips to the live iframe. Reads dev-preview/SKILL.md inside the container for routing rules.

When to use this

user wants to start a new web app from scratch
user says 'build me a Next.js dashboard' / 'spin up a Vite app' / 'scaffold an Astro site'
user has a stack in mind and wants the live preview running fast
user wants to iterate on a UI with hot reload in the Computer tab

When NOT to use this

user wants to clone an existing live site → use clone-website
user wants to deploy something that already exists → use deploy-to-cloudflare
user wants a non-web project (CLI, library) → use shell_exec directly

Example prompts

spin up a Next.js dashboard with shadcn

scaffold a Vite + React app for me

make me an Astro blog template

start a fresh Next.js project with Tailwind

Inputs and output

Inputs

Field	Description
`stack`	framework + UI lib hints (e.g. 'next + shadcn')
`name`	optional /work subdirectory name

Output

Live preview URL bound to 0.0.0.0:3000 + path inside /work where the project lives.

Runtime profile

What the engine commits when this skill runs.

Property	Value	Meaning
Model tier	`sonnet`	The balanced default model class. Trades quality against cost for the vast majority of skill runs.
Cost class	`standard`	The balanced default model. Right for most skills.
Turn budget	`12`	Hard cap on tool-calling iterations before the engine forces a final answer.
Execution	`synchronous`	Runs inside the live turn; result lands in the same response.

Under the hood

Tools the engine exposes to this skill and integrations it needs.

Resource	Kind
`shell_exec`	tool
`shell_write`	tool
`shell_preview_info`	tool

Tags: engineering, build, preview

Execution template

Shell tools dispatch via a command template. The model substitutes user inputs into the placeholders before firing the underlying tool.

shell_execbash

cat /home/ultron/.claude/skills/dev-preview/SKILL.md; scaffold {{stack}} in /work/{{name}}, install deps; start-dev-server <cmd> (NEVER bare 'python3 -m http.server &' or 'npm run dev &' — start-dev-server uses setsid so the server survives shell_exec teardown); then preview-url; finally curl -sI the URL to PROVE it returns 200 before claiming the preview is up

Related skills

Skill	What it does
Clone a Website	Fire ultron-capture: spider the site, deploy a branded clone, surface the URL when ready.
Build an Agent	Spin up an autonomous agent on the agent-runtime satellite — try templates first, custom build only if no fit.
Deploy to Cloudflare	Ship the current /work to Pages, Workers, or Containers — then verify the live URL.
Push to GitHub	Initialize /work as a git repo, create the GitHub repo, push, return the URL.
Swap Page Sections	Reorder <section> blocks in a minified HTML file with byte-level safety.
Refactor Across Files	Multi-file string operations with quote and escape safety — uses bun -e, not sed.

Invoking this from an agent

Three paths reach this skill. From the chat UI, a user can type the persona slash command followed by a natural request and the discovery step resolves to this skill automatically. From the MCP server, fetch the skill detail with get_skill({id: "spin-up-web-app"}) and then invoke it through the agent runtime once the authenticated tier ships. From your own code, hit /docs/skills/spin-up-web-app/llm.txt for the token-efficient markdown body and feed it to your model directly.

Note

Every skill page has a canonical permalink and a markdown alternate that LLM crawlers consume via Accept: text/markdown. The full machine-readable catalog lives at /.well-known/agent-skills/index.json.