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/mdrideout/junjo/studio-frontend-reactnpx skills add mdrideout/junjo --skill studio-frontend-reactgit clone --depth 1 https://github.com/mdrideout/junjoWhat 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.00038 | $0.00658 |
| Opus 5 | $0.00019 | $0.00329 |
| Sonnet 5 | $0.00008 | $0.00132 |
| Haiku 4.5 | $0.00004 | $0.00066 |
Grade A, and why
studio-frontend-react 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 2d 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 — 79 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Studio Frontend React
Use This Skill When
- The task touches
apps/studio/frontend/. - The task changes React component structure, state ownership, Redux Toolkit slices/listeners/selectors, frontend schemas, or frontend tests.
- The task changes frontend feature organization or a frontend-facing API contract.
Boundaries
- This skill owns the workflow for Studio frontend work, not the architecture itself.
apps/studio/docs/adr/002-redux-toolkit-listener-middleware-pattern.mdowns state placement, listener middleware, and feature file roles.apps/studio/docs/adr/004-events-json-contract.mdowns theevents_jsonshape.- Current code and tests own implementation details.
Before Changing State
Determine:
- Which component or feature semantically owns the value?
- Which consumers read or change it, and how closely related are they in the component tree?
- How long must the value live?
- Is there already an authoritative local, URL, Context, or Redux value?
- Do props still express a clear contract, or are unrelated components only forwarding them?
- Does the transition require only synchronous state mutation, or does it have an asynchronous or external consequence?
- Would broader ownership reduce more coordination than it adds?
Start with the narrowest correct owner. Do not move state into Redux merely because a request is asynchronous or because props cross a fixed number of components.
Redux Guardrails
- Use typed hooks from
apps/studio/frontend/src/root-store/hooks.ts. - State-transition action types mutate slice state. Listener-trigger action types do not. A single action type must never do both.
- Reducers own synchronous invariants. Listeners own consequences of Redux trigger actions, including Redux-owned async work and cross-feature effects.
- Fetch modules own HTTP transport, and schemas parse responses at the runtime contract boundary.
- Do not introduce RTK Query or TanStack Query.
- Do not treat existing code that conflicts with the accepted ADR as a new architectural precedent.
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.
- 2d ago First seen · 79 lines · 38 tokens per session scan A a7a398f3f91f
studio-frontend-react is a skill published in the GitHub repository mdrideout/junjo (20 stars, last pushed 2d ago), licensed Apache-2.0. It adds 38 tokens to every session and 658 once invoked, about $0.0002 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
agent-self-scheduling
Schedule AI agent runs with cron, loops, or external clocks while avoiding unsafe tight autonomous timers.
dagr-producer
Emit and maintain a dagr run file — a live, contract-valid JSON description of recursive projects, tasks, attempts, gates, evidence, policies, events, and operator-message resolutions that dagr view renders as a DAG. Use when orchestrating agents or tracking multi-step work that a dagr pane should display.
diataxis-docs-writer
Write or improve software documentation using the Diátaxis framework — four documentation types (tutorials, how-to guides, reference, explanation), each serving a different user need. Use it whenever you're about to write or revise documentation for a finished feature, implementation, API, library, CLI, service, or…
opensource-guide-coach
Use when a user wants guidance on starting, contributing to, growing, governing, funding, securing, or sustaining an open source project, or asks about contributor onboarding, community health, maintainer burnout, code of conduct, metrics, legal basics, or open source project adoption.
pytest-coverage
Run pytest tests with coverage, discover lines missing coverage, and increase coverage to 100%.
writing-workspace-jobs
Author FSM workspace jobs. Use when creating, editing, or debugging jobs, signals, or FSM workflows in workspace.yml.