菜单
Author app-like designs in React/JSX and bundle them in-sandbox into the same single self-contained HTML artifact Design Studio delivers. Use when the design needs real state, complex interactivity, or component reuse beyond what vanilla JS comfortably handles.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/juspay/xyne-spaces --skill react-artifact命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
Create, regenerate, update, and review Xyne Spaces ticket Specifications by interviewing for requirement intent before drafting or writing the Specification.
Validate a Design Studio HTML artifact in the sandbox browser, fix rendering and runtime defects, then deliver exactly the tested file.
Build truthful self-contained dashboard snapshots from connected MCP/data tools or user-provided datasets. Use for /dashboard runs that query real metrics, render charts or operational summaries, and may be refreshed by scheduled jobs.
基于 SOC 职业分类
正在显示 SKILL.md
| name | react-artifact |
| description | Author app-like designs in React/JSX and bundle them in-sandbox into the same single self-contained HTML artifact Design Studio delivers. Use when the design needs real state, complex interactivity, or component reuse beyond what vanilla JS comfortably handles. |
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.
For static or lightly-interactive pages, plain HTML with a small inline script is smaller, faster to iterate, and easier to revise — prefer it.
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.)
Add a short README with bun install and run/build instructions, then archive
source without dependencies or generated output:
tar -czf "design-react-project.tar.gz" src package.json bun.lock README.md shell.html
<script src>, no external
CSS, no fetches to the internet at runtime. Charts: prefer hand-rolled SVG
or inline a small library through the same bundle.grep -c "createRoot\|react" index.html
must be ≥1 and the file size should reflect the bundle (React ~140KB min).
A 2KB index.html means you shipped the shell without the bundle.index.html in the sandbox
browser, exercise the interactions you built (click through state changes),
check desktop + mobile widths and the console.index.html and design-react-project.tar.gz in one
sandbox-deliver-files call. The attachment is canonical; do not repeat a
large inlined React bundle in the final chat response.