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 skills add kouroshez/coding-os --skill react-vite-hubgit clone --depth 1 https://github.com/kouroshez/coding-osWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/kouroshez/coding-os/react-vite-hub)<a href="https://agentmods.dev/skills/kouroshez/coding-os/react-vite-hub"><img src="https://agentmods.dev/badge/skills/kouroshez/coding-os/react-vite-hub/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/kouroshez/coding-os/react-vite-hub"><img src="https://agentmods.dev/badge/skills/kouroshez/coding-os/react-vite-hub.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What 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.1 | $0.00119 | $0.01546 |
| Opus 5 | $0.00060 | $0.00773 |
| Sonnet 5 | $0.00024 | $0.00309 |
| Haiku 4.5 | $0.00012 | $0.00155 |
Grade A, and why
react-vite-hub 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 5d 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 — 141 lines — stays where its author put it; the contents beside it link to each section on GitHub.
react-vite-hub
Purpose: Edit the Hub UI safely — the SPA at src/core/web/ui/ that
serves http://127.0.0.1:9188 and is the visual face of the entire
coding-os system. Without this skill, agents break the build,
introduce hydration mismatches, or invent endpoints that don't exist.
Read when: editing any of:
src/core/web/ui/src/**/*.{ts,tsx}— components, pages, hooks, store.src/core/web/ui/src/lib/api-client.ts— the API contract.src/core/web/ui/vite.config.ts,tailwind.config.js— build config.src/core/web/server.py,src/core/web/routes/**/*.py— when changing API shape.
Skip when: editing tests (*.test.ts), pure docs, or src/core/web/ui/dist/ (build output).
Stack
React 18 + TypeScript + Vite + TailwindCSS + Sigma.js (graph canvas)
+ Graphology (graph data) + zustand (state) + react-router-dom
+ shadcn/ui-style component primitives in src/components/
Architecture (single-page, single-server)
http://127.0.0.1:9188
├─ /api/<router>/* ← FastAPI routes from src/core/web/routes/
├─ /api/stream/events ← SSE stream from src/core/web/routes/stream.py
├─ / ← Vite-built SPA (index.html → React)
└─ /assets/* ← Vite-emitted JS/CSS bundles
The SPA is served by FastAPI's StaticFiles mount at the root. Anything
the agent adds to the API must go in src/core/web/routes/<area>.py,
include the router in src/core/web/server.py, and be matched by a typed
client method in src/lib/api-client.ts.
Hub propagation — multi-project
Each registered project is reachable via /api/p/<slug>/* — a thin
proxy that targets the same routes but scoped to that project's
.coding-os/ state. UI uses ProjectSwitcher to set the slug; all
hooks read from useProjectStore.getState().slug before composing
URLs. NEVER hardcode a project path.
Hard rules
1. URL is the source of truth
react-router-dom URL = source of truth for "which root node is selected,"
"which project is active," "which view." Components read URL, mutators
call useNavigate() — bidirectional useEffect pairs cause render
loops (TASK-117).
What ships with it
2 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
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.
- 5d ago First seen · 141 lines · 119 tokens per session scan A df9fd03b3185
react-vite-hub is a skill published in the GitHub repository kouroshez/coding-os (6 stars, last pushed yesterday), licensed Apache-2.0. It adds 119 tokens to every session and 1,546 once invoked, about $0.0006 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-09-03.
Other skills, from other repositories
trpc
Skill "trpc" from claude-dev-suite/claude-dev-suite, covering trpc core knowledge, router definition, client usage (react), protected procedures and with next.js.
fastreact
Scaffold and build a full-stack web app: FastAPI backend (Python, uv, SQLModel, Postgres, Alembic, JWT + Google OAuth, boto3/S3) + React frontend (Vite, TypeScript, shadcn/ui + Tailwind, TanStack Router/Query/Table, Zod, Axios), wired with Docker Compose. Use this skill whenever the user wants to spin up, bootstrap…
Cursor rules for building custom frontends with Momen
Cursor rules for building custom frontends with Momen.app as headless BaaS with GraphQL API, actionflows, AI agents, and Stripe integration.
Cursor rules for Next
Cursor rules for Next.js development with Vercel and Supabase integration.
Cursor rules for Next
Cursor rules for Next.js development with TypeScript integration.
nextjs-best-practices
Next.js App Router principles. Server Components, data fetching, routing patterns.