Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add skills/kirodotdev/kirocrew/web-previewnpx skills add kirodotdev/KiroCrew --skill web-previewgit clone --depth 1 https://github.com/kirodotdev/KiroCrewWhat it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5 | $0.00079 | $0.00682 |
| Opus 5 | $0.00039 | $0.00341 |
| Sonnet 5 | $0.00016 | $0.00136 |
| Haiku 4.5 | $0.00008 | $0.00068 |
Grade A, and why
web-preview scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 3d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 62 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Web Preview marker
KiroCrew's chat right-side panel has a Browser tab (+ menu → Browser) that embeds a URL in a live iframe. When you start a local web server so the user can preview a site/app, tell the dashboard which URL to load by emitting a single hidden marker in your reply.
The marker
Emit exactly this, on its own line, once the server is confirmed listening:
<!-- kirocrew:preview url="http://127.0.0.1:PORT" -->
- It's an HTML comment, so the user never sees it in the rendered message — the dashboard parses it and auto-opens the Browser tab at that URL, contextual to the current session.
- Use the actual URL the server binds to, including the real port
(
http://localhost:5173,http://127.0.0.1:8080, …). Prefer127.0.0.1/localhost— only loopback URLs are embeddable. - Emit it after you've confirmed the server is up (e.g. it returned HTTP 200), not before.
- If you restart on a different port, emit a new marker with the new URL — the panel re-points to the newest one.
When NOT to emit it
- When you're only discussing previews, explaining this feature, or showing an example URL — emit it solely when a server is genuinely running for the user to view.
- You don't need it for public/remote URLs the user opens themselves; it's for the embedded local preview.
Fallback
If you forget the marker but mention a localhost URL in prose (e.g. "serving at http://localhost:5173"), the dashboard will still try to pick up the newest such URL — but the marker is precise, so prefer it.
The marker is for the user — verify it yourself too
The marker only points the user's panel at the URL; it gives you no pixels. If
the server is showing a front-end change you just made, also run the
web-verify skill: navigate the same loopback URL with the Playwright browser,
screenshot the surface you changed, read the frame, and embed it in chat. Don't
hand over a preview and call the change verified.
Example
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 3d ago First seen · 62 lines · 79 tokens per session scan A c159d3a622cd
web-preview is a skill published in the GitHub repository kirodotdev/KiroCrew (3,532 stars, last pushed yesterday), licensed Apache-2.0. It adds 79 tokens to every session and 682 once invoked, about $0.0004 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
browser-testing-with-screenshots
Use when testing web applications with visual verification - automates Chrome browser interactions, element selection, and screenshot capture for confirming UI functionality.
node-inspect-debugger
Debug Node.js via --inspect + Chrome DevTools Protocol.
reskin
Author a NEW skin for the reskinnable-demo app. A skin is a self-contained domain plugin under src/skins/ / that implements the frozen Skin contract (src/shell/skin-contract.ts) to swap the app's entire experience — brand, theme, layout, pages, tools, data, and agent — as a live sales demo. Use when the user says "add…
copilotkit-setup
Use when adding CopilotKit to an existing project or bootstrapping a new CopilotKit project from scratch. Covers framework detection, package installation, runtime wiring (managed Intelligence or self-hosted SSE), provider setup, and first working chat integration.
copilotkit-integrations
Use when wiring an external agent framework (LangGraph, CrewAI, PydanticAI, Mastra, ADK, LlamaIndex, Agno, Strands, Microsoft Agent Framework, or others) into a CopilotKit application via the AG-UI protocol.
a2ui-renderer
Render A2UI (Agent-to-UI declarative surfaces) in CopilotKit v2. Enable the runtime via CopilotRuntime({ a2ui: {...} }), then enable the provider via . Auto-activates via /info — do NOT manually pass renderActivityMessages. createA2UIMessageRenderer ships from @copilotkit/react-core/v2; low-level primitives…