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/juspay/xyne-spaces/react-artifactnpx skills add juspay/xyne-spaces --skill react-artifactgit clone --depth 1 https://github.com/juspay/xyne-spacesWrote 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/juspay/xyne-spaces/react-artifact)<a href="https://agentmods.dev/skills/juspay/xyne-spaces/react-artifact"><img src="https://agentmods.dev/badge/skills/juspay/xyne-spaces/react-artifact.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.1 | $0.00053 | $0.00879 |
| Opus 5 | $0.00026 | $0.00439 |
| Sonnet 5 | $0.00011 | $0.00176 |
| Haiku 4.5 | $0.00005 | $0.00088 |
Grade A, and why
react-artifact 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 — 102 lines — stays where its author put it; the contents beside it link to each section on GitHub.
React artifacts — author in JSX, deliver HTML + source project
The primary artifact remains ONE self-contained .html file. React designs
also deliver a small source archive so the user can continue in an editor.
When to choose React over plain HTML+JS
- Real client state: multi-step forms, filters over data, undo, optimistic UI
- Many repeated components with varying props (cards, rows, chart panels)
- The user names React explicitly
For static or lightly-interactive pages, plain HTML with a small inline script is smaller, faster to iterate, and easier to revise — prefer it.
Recipe (bun is preinstalled; npm registry works in-sandbox via the
in-cluster mirror — the sandbox .npmrc already points at it)
mkdir -p /workspace/design && cd /workspace/design
bun init -y
bun add react@18 react-dom@18
Author the app as a normal small project. Keep source under src/, with the
entry at src/app.jsx:
// src/app.jsx
import { createRoot } from "react-dom/client";
import { useState } from "react";
function App() { /* ... */ }
createRoot(document.getElementById("root")).render(<App />);
Bundle to a single minified script, then inline it into the HTML shell:
bun build src/app.jsx --minify --outfile dist/bundle.js
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>…</title>
<style>/* all CSS inline here */</style>
</head>
<body>
<div id="root"></div>
<script>/* paste bundle.js contents here verbatim */</script>
</body>
</html>
Write the final file by concatenating — do NOT reference bundle.js by path;
the artifact must open from a single file with no siblings:
node -e '
const fs = require("fs");
const bundle = fs.readFileSync("dist/bundle.js", "utf8");
const shell = fs.readFileSync("shell.html", "utf8");
fs.writeFileSync("index.html", shell.replace("/*__BUNDLE__*/", () => bundle));
'
(Use a placeholder comment in the shell and replace with a function arg so
$ sequences in the bundle are not mangled.)
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 First seen · 102 lines · 53 tokens per session scan A 7d0ff330ba79
react-artifact is a skill published in the GitHub repository juspay/xyne-spaces (142 stars, last pushed today), licensed Apache-2.0. It adds 53 tokens to every session and 879 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-30.
Other skills, from other repositories
react-modern
Use this skill when writing or reviewing React 19+ code in WrongStack. Triggers: user mentions "React", "component", "useState", "useEffect", "Server Component", "Client Component", "Suspense", "useTransition", "use hook".
generic-react-feature-developer
Guide feature development for React applications with architecture focus. Covers Zustand/Redux patterns, IndexedDB usage, component systems, lazy loading strategies, and seamless integration. Use when adding new features, refactoring existing code, or planning major changes.
generic-react-ux-designer
Professional UI/UX design expertise for React applications. Covers design thinking, user psychology (Hick's/Fitts's/Jakob's Law), visual hierarchy, interaction patterns, accessibility, performance-driven design, and design critique. Use when designing features, improving UX, solving user problems, or conducting design…
generic-react-code-reviewer
Review React/TypeScript code for bugs, security vulnerabilities, performance issues, accessibility gaps, and CLAUDE.md workflow compliance. Enforces TypeScript strict mode, GPU-accelerated animations, WCAG AA accessibility, bundle size limits, and surgical simplicity. Use when completing features, before commits, or…
generic-react-design-system
Complete design system reference for React applications. Covers colors, typography, spacing, component patterns, glassmorphism effects, GPU-accelerated animations, and WCAG AA accessibility. Use when implementing UI, choosing colors, applying spacing, creating components, or ensuring brand consistency.
landing-page-generator
Generates high-converting landing pages as complete Next.js/React (TSX) components with Tailwind CSS. Creates hero sections, feature grids, pricing tables, FAQ accordions, testimonial blocks, and CTA sections using proven copy frameworks (PAS, AIDA, BAB). Outputs SEO meta tags, structured data, and…