Borrowing it
Nothing to install: this file belongs to mdrideout/junjo. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.
curl -O https://raw.githubusercontent.com/mdrideout/junjo/master/.agents/skills/studio-frontend-react/SKILL.mdgit clone --depth 1 https://github.com/mdrideout/junjoWrote 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/mdrideout/junjo/studio-frontend-react)<a href="https://agentmods.dev/skills/mdrideout/junjo/studio-frontend-react"><img src="https://agentmods.dev/badge/skills/mdrideout/junjo/studio-frontend-react/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/mdrideout/junjo/studio-frontend-react"><img src="https://agentmods.dev/badge/skills/mdrideout/junjo/studio-frontend-react.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.00038 | $0.00658 |
| Opus 5.5 | $0.00015 | $0.00263 |
| Sonnet 5.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 1mo 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.
- 1mo 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 17d ago), licensed Apache-2.0. It adds 38 tokens to every session and 658 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-08-30.
Other skills, from other repositories
decocms-ui
Build or style React UI with the decocms product design system (@decocms/ui). Use when creating a new screen, page, or component that should look like decocms products, when the user mentions "design system", "@decocms/ui", "decocms style", or asks to make UI consistent with Studio. Covers screen layout (width…
design-to-code
Mockup-to-component pipeline using Google Stitch, 21st.dev, and Storybook MCP. Accepts a screenshot, a description, or a URL and produces production-ready React components, checking existing Storybook components before generating anything new. Use when implementing UI from a mockup or screenshot. To call the MCP tool…
multi-surface-render
Multi-surface rendering with json-render — one JSON spec produces React web, Next.js, React Native, Ink terminal UIs, PDFs, emails, Remotion videos, OG images, and 3D scenes. Covers renderer target selection, registry mapping, and platform APIs (renderToBuffer, renderToStream, renderToFile). Use when generating output…
ai-ui-generation
AI-assisted UI generation patterns for json-render, v0.app, Google Stitch, Bolt Cloud, and Cursor workflows. Covers prompt engineering for component and full-stack app generation, review checklists for AI-generated code, design token injection, refactoring for design system conformance, and CI gates for quality…
design-import
Scaffolds React components from a Claude Design handoff bundle and stops at files on disk: no stories, no tests, no pull request. Use when handed a claude.ai/design URL or a local bundle file; when that same scaffold should carry on through test generation, browser verification and an opened PR, run /ork:design-ship…
i18n-date-patterns
Implements internationalization (i18n) in React applications. Covers user-facing strings, date/time handling, locale-aware formatting, ICU MessageFormat, and RTL support. Use when building multilingual UIs or formatting dates/currency.