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 roedyrustam/vibes-plug --skill spa-orchestratorgit clone --depth 1 https://github.com/roedyrustam/vibes-plugWrote 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/roedyrustam/vibes-plug/spa-orchestrator)<a href="https://agentmods.dev/skills/roedyrustam/vibes-plug/spa-orchestrator"><img src="https://agentmods.dev/badge/skills/roedyrustam/vibes-plug/spa-orchestrator/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/roedyrustam/vibes-plug/spa-orchestrator"><img src="https://agentmods.dev/badge/skills/roedyrustam/vibes-plug/spa-orchestrator.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
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.00053 | $0.03411 |
| Opus 5.5 | $0.00021 | $0.01364 |
| Sonnet 5.5 | $0.00011 | $0.00682 |
| Haiku 4.5 | $0.00005 | $0.00341 |
Grade A, and why
spa-orchestrator 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 6d 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 — 329 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Single-Page Application (SPA) Orchestrator (2026 Edition)
English
Orchestration & Integration
Connects and orchestrates with relevant domain skills:
modern-web-guidance: HTML5/CSS standards, modern browser APIs, and accessibility guidelines.senior-frontend: Primary UI craftsmanship, React 19 component trees, and Vite setups.design-system-architect: Headless primitives and unified design tokens for SPA interfaces.modern-css-native-expert: Native CSS anchor positioning, View Transitions, and container queries.tailwind-expert: Tailwind CSS v4 design tokens and responsive utility classes.state-management-expert: Client-side state separation (Zustand/Jotai) from server state.tanstack-query-expert: Data caching, optimistic updates, and declarative async state.ui-ux-pro-max: Dashboard composition, data table layouts, and navigation feedback.visual-ui-auditor: Multimodal vision auditing of rendered SPA routes and dialogs.anti-slop: Anti-slop frontend architecture, eliminating broken stubs and excessive loading spinners.- MANDATORY: Execute
senior-frontendFIRST for all HTML/CSS and client-side JS tasks to ensure modern web standards.
Description
Structured orchestration guide for building modern Single-Page Applications (SPAs). Coordinates frontend architecture (TanStack Router, React 19, TanStack Query v5) with decoupled API backends (Hono RPC, tRPC). Covers state management strategy, routing patterns, API layer design, build tooling (Vite + TanStack Start), and deployment strategies.
Trigger Conditions
- Building a highly interactive dashboard, admin panel, or data-heavy web application as a SPA.
- Choosing between SPA vs SSR vs MPA for a new project.
- Setting up client-side routing with TanStack Router (type-safe routes, loaders).
- Structuring state management: server state (TanStack Query) vs client state (Zustand/Jotai).
- Building a decoupled frontend that communicates with a separate backend via Hono RPC or tRPC.
- Deploying a SPA to Cloudflare Pages, Vercel, or a CDN.
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.
- 6d ago Changed · +19 lines · +53 tokens per session f51fb6e6e141
- 7d ago Changed · +2 lines · -53 tokens per session 75019fbcb650
- 8d ago Changed 8b1219bcddb3
- 10d ago Changed d3cfa63a53d6
- 19d ago Changed 73b85d988156
- 24d ago Changed 8b2c148b5729
- 25d ago Changed 26e091b953d5
- 27d ago Changed · -6 lines · +42 tokens per session f8b01b5b68b0
- 29d ago Changed · +6 lines · -42 tokens per session cef75d957792
- 1mo ago First seen · 308 lines · 53 tokens per session scan A 1da38521628b
spa-orchestrator is a skill published in the GitHub repository roedyrustam/vibes-plug (115 stars, last pushed yesterday), licensed MIT. It adds 53 tokens to every session and 3,411 once invoked, about $0.0002 per session on Opus 5.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
nodejs-backend-patterns
Build production-ready Node.js backend services with Express/Fastify, implementing middleware patterns, error handling, authentication, database integration, and API design best practices. Use when creating Node.js servers, REST APIs, GraphQL backends, or microservices architectures.
api-design-principles
Master REST and GraphQL API design principles to build intuitive, scalable, and maintainable APIs that delight developers. Use when designing new APIs, reviewing API specifications, or establishing API design standards.
builder
Implementing robust business logic, API integrations, data models, and reproducible AI image-generation code with type safety. Use for production implementation, Gemini image API pipelines, or interactive pair programming.
system-and-data-design
Decide whether the system will hold, and where the data lives: requirements and load first, then back-of-the-envelope numbers, building blocks (cache, queue, load balancer, CDN), and the data layer in depth — storage engines, indexes, replication, partitioning, transactions and consistency, batch vs stream. Use when…
evolutionary-modular-architecture
Guides design and implementation of evolutionary modular-monolith platforms with DDD (strategic + tactical), flat-by-aggregate organization, an Anti-Corruption Layer for vendor independence, a transactional outbox for events, smart resilience (backoff with jitter, circuit breakers, idempotency), and a polished…
langgraph-patterns
Production-grade agentic workflows with LangGraph — graph orchestration, state machines, human-in-the-loop, and advanced control flow. Use when building or debugging a LangGraph app, modeling agent state, or adding checkpoints and human approval steps.