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/nikzlabs/shipit/client-architecturenpx skills add nikzlabs/shipit --skill client-architecturegit clone --depth 1 https://github.com/nikzlabs/shipitWrote 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/nikzlabs/shipit/client-architecture)<a href="https://agentmods.dev/skills/nikzlabs/shipit/client-architecture"><img src="https://agentmods.dev/badge/skills/nikzlabs/shipit/client-architecture.svg" alt="Measured on agentmods" 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 | $0.00054 | $0.02684 |
| Opus 5 | $0.00027 | $0.01342 |
| Sonnet 5 | $0.00011 | $0.00537 |
| Haiku 4.5 | $0.00005 | $0.00268 |
Grade A, and why
client-architecture 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 — 223 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Client Architecture
The client is a React 19 SPA built with Vite and Tailwind CSS v4. State management uses Zustand stores. Communication with the server uses three channels: HTTP for reads/mutations, per-session WebSocket for streaming and real-time interaction, and SSE for global broadcasts.
Entry Point
src/client/main.tsx renders the app inside a BrowserRouter with an ErrorBoundary. Two route patterns:
/session/:sessionId— session view*— catch-all (home screen,/{slug}/newfor new repo sessions)
src/client/App.tsx (~800 lines) is the main component. It wires together all hooks, stores, and UI components. Layout is a three-panel design: sidebar (sessions), center (chat), right (preview/files/git/terminal).
State Management (Zustand)
11 domain-specific stores in src/client/stores/:
The main stores (partial — ls src/client/stores/ for the full set, currently ~21):
| Store | File | Key State |
|---|---|---|
| Session | session-store.ts |
sessionId, messages[], isLoading, activity, sessions[], authUrl, queuedMessages[] |
| Git | git-store.ts |
commits[], identity, turnDiff, lastCommitPair |
| File | file-store.ts |
tree[], viewingFile, viewingFileContent, docFiles[] |
| Preview | preview-store.ts |
status, selectedPort, installStatus, crashInfo |
| Terminal | terminal-store.ts |
entries[], mode, shellStarted |
| PR | pr-store.ts |
result, status, descGenerating |
| Settings | settings-store.ts |
permissionMode, systemPromptContent, githubStatus, pendingFiles[] |
| UI | ui-store.ts |
rightTab, templates[], agentList, modelInfo, toast, features[] |
| Repo | repo-store.ts |
repos[], addRepoDialogOpen |
Patterns
- Stores are created with
create<StateType>((set, get) => ({...})). - Each store has a
reset()method for clearing session-specific state during session switching. - Components subscribe to individual fields via selectors:
useSessionStore((s) => s.messages). - Stores are updated directly — no centralized dispatcher. Handlers call
store.getState().setX(value).
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 · 223 lines · 54 tokens per session scan A eaa5b378a264
client-architecture is a skill published in the GitHub repository nikzlabs/shipit (6 stars, last pushed today), licensed Apache-2.0. It adds 54 tokens to every session and 2,684 once invoked, about $0.0003 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-31.
Other skills, from other repositories
moai-design-tools
Design tool integration specialist covering Figma MCP, Pencil renderer, and Pencil-to-code export. Use when fetching design context from Figma, rendering Pencil designs, or exporting to React/Tailwind code.
moai-ref-react-patterns
React/Next.js component design patterns, state management strategies, and project structure reference for frontend development. Agent-extending skill that amplifies frontend domain work (spawned via Agent(general-purpose) with frontend instructions) with production-grade React patterns. NOT for: backend API design…
moai-domain-uiux
UI/UX design systems specialist covering accessibility, icons, theming, design tokens, and user experience patterns. Use when working on design systems, WCAG compliance, ARIA patterns, or dark mode theming.
moai-domain-frontend
Frontend development specialist covering React 19, Next.js 16, Vue 3.5, and modern UI/UX patterns with component architecture. Use when building web UIs, implementing components, optimizing frontend performance, or integrating state management.
loom-react
Modern client-side React development patterns.
web-3d-react-three-fiber
React Three Fiber (R3F) 3D rendering — Canvas, meshes, materials, lights, cameras, animations, events, physics, post-processing, performance.