Web Artifacts Builder
anthropics/skills
Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.
将基于 JSX 组件 的自定义页面升级/迁移为使用 YidaCodeCanvas 组件实现的宜搭自定义页面。适用于用户要求“.oyd.jsx / .oyb.jsx / Jsx 页面转 YidaCodeCanvas”“renderJsx 页面迁移到 YidaCodeCanvas”“把发布产物改为 runtimeCode + importedModules”。不要用于从零编写自定义页面。
Install Yida Canvas Upgrade
$ npx skills add openyida/openyida --skill yida-canvas-upgrade -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install openyida/openyida yida-canvas-upgrade --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/openyida/openyida.git skills-src && mkdir -p .claude/skills && cp -r skills-src/yida-skills/skills/yida-canvas-upgrade .claude/skills/yida-canvas-upgrade && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "yida-canvas-upgrade" agent skill from https://github.com/openyida/openyida/tree/main/yida-skills/skills/yida-canvas-upgrade into .claude/skills/yida-canvas-upgrade/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "yida-canvas-upgrade", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/openyida/openyida/tree/main/yida-skills/skills/yida-canvas-upgradeType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add openyida/openyida --skill yida-canvas-upgrade -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install openyida/openyida yida-canvas-upgrade --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/openyida/openyida.git skills-src && mkdir -p .agents/skills && cp -r skills-src/yida-skills/skills/yida-canvas-upgrade .agents/skills/yida-canvas-upgrade && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "yida-canvas-upgrade" agent skill from https://github.com/openyida/openyida/tree/main/yida-skills/skills/yida-canvas-upgrade into .agents/skills/yida-canvas-upgrade/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "yida-canvas-upgrade", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add openyida/openyida --skill yida-canvas-upgrade -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install openyida/openyida yida-canvas-upgrade --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/openyida/openyida.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/yida-skills/skills/yida-canvas-upgrade .cursor/skills/yida-canvas-upgrade && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "yida-canvas-upgrade" agent skill from https://github.com/openyida/openyida/tree/main/yida-skills/skills/yida-canvas-upgrade into .cursor/skills/yida-canvas-upgrade/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "yida-canvas-upgrade", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/openyida/openyida.git --path yida-skills/skills/yida-canvas-upgrade--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add openyida/openyida --skill yida-canvas-upgrade -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install openyida/openyida yida-canvas-upgrade --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/openyida/openyida.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/yida-skills/skills/yida-canvas-upgrade .gemini/skills/yida-canvas-upgrade && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "yida-canvas-upgrade" agent skill from https://github.com/openyida/openyida/tree/main/yida-skills/skills/yida-canvas-upgrade into .gemini/skills/yida-canvas-upgrade/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "yida-canvas-upgrade", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install openyida/openyida yida-canvas-upgradeInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add openyida/openyida --skill yida-canvas-upgrade -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/openyida/openyida.git skills-src && mkdir -p .github/skills && cp -r skills-src/yida-skills/skills/yida-canvas-upgrade .github/skills/yida-canvas-upgrade && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "yida-canvas-upgrade" agent skill from https://github.com/openyida/openyida/tree/main/yida-skills/skills/yida-canvas-upgrade into .github/skills/yida-canvas-upgrade/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "yida-canvas-upgrade", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add openyida/openyida --skill yida-canvas-upgrade -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install openyida/openyida yida-canvas-upgrade --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/openyida/openyida.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/yida-skills/skills/yida-canvas-upgrade .opencode/skills/yida-canvas-upgrade && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "yida-canvas-upgrade" agent skill from https://github.com/openyida/openyida/tree/main/yida-skills/skills/yida-canvas-upgrade into .opencode/skills/yida-canvas-upgrade/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "yida-canvas-upgrade", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
yida-canvas-upgrade- GitHub stars
- 221
- Token cost
- ~1.3k tokens
- SKILL.md length
- 376 words
- Files
- 2 (incl. references)
- Skills in repo
- 59
- Repo updated
- First seen
- Licence
- MIT
At a glance
将基于 JSX 组件 的自定义页面升级/迁移为使用 YidaCodeCanvas 组件实现的宜搭自定义页面。适用于用户要求“.oyd.jsx / .oyb.jsx / Jsx 页面转 YidaCodeCanvas”“renderJsx 页面迁移到 YidaCodeCanvas”“把发布产物改为 runtimeCode + importedModules”。不要用于从零编写自定义页面。
- Works in 6 steps: 盘点原页面 → 判断是否能自动升级 → 生成 .canvas.jsx 源码 → …
- Tasks that involve React components
- SKILL.md covers 核心定位, 从老应用主题升级进入, 迁移前必须确认 and 可迁移性分级, plus 4 more sections
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Yida Canvas Upgrade is an agent skill from openyida/openyida. 将基于 JSX 组件 的自定义页面升级/迁移为使用 YidaCodeCanvas 组件实现的宜搭自定义页面。适用于用户要求“.oyd.jsx / .oyb.jsx / Jsx 页面转 YidaCodeCanvas”“renderJsx 页面迁移到 YidaCodeCanvas”“把发布产物改为 runtimeCode + importedModules”。不要用于从零编写自定义页面。
Its SKILL.md is about 1.3k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files, including reference files (for example `references/migration-examples.md`).
It sits in Frontend & Design, covering React components. The repository describes itself as: Your own personal YiDA AI assistant! The licence is MIT.
When your agent uses it
- Tasks that involve React components
Example prompts
- “.oyd.jsx / .oyb.jsx / Jsx 页面转 YidaCodeCanvas”
- “renderJsx 页面迁移到 YidaCodeCanvas”
- “把发布产物改为 runtimeCode + importedModules”
- “/yida-canvas-upgrade”
Workflow steps
6 steps, taken from the first numbered list in SKILL.md.
- 盘点原页面
- 判断是否能自动升级
- 生成 .canvas.jsx 源码
- 处理依赖
- 发布 / 验证 Schema
- 运行验收
What it can do on your machine
Read from SKILL.md and the folder at commit 4932d0b. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Yida Canvas Upgrade loads about 1.3k tokens when it runs, and up to ~1.7k if it reads all its reference files. Until then it costs about 54 tokens; SKILL.md has 376 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from openyida/openyida at commit 4932d0b, republished under its MIT licence (© openyida). 376 words, ~1,263 tokens.
Download SKILL.mdSave it as
.claude/skills/yida-canvas-upgrade/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.- name
- yida-canvas-upgrade
- description
- 将基于 JSX 组件 的自定义页面升级/迁移为使用 `YidaCodeCanvas` 组件实现的宜搭自定义页面。适用于用户要求“.oyd.jsx / .oyb.jsx / Jsx 页面转 YidaCodeCanvas”“renderJsx 页面迁移到 YidaCodeCanvas”“把发布产物改为 runtimeCode + importedModules”。不要用于从零编写自定义页面。
平台 JSX 组件页面迁移到 YidaCodeCanvas 组件实现
核心定位
本技能用于迁移存量页面：把已有的 JSX 组件页面转换为使用 YidaCodeCanvas 组件实现的页面，产出等价的 React18 函数组件源码并承载到 YidaCodeCanvas。
- 迁移前页面：OpenYida 平台 JSX 组件页面，通常是
project/pages/src/*.oyd.jsx、export function renderJsx()、_customState、this.utils.yida.*，openyida publish发布为Jsx组件；用户称.oyb.jsx时先按平台 JSX 组件页面需求识别，再确认实际源码后缀。 - 目标实现：页面 Schema 中承载
YidaCodeCanvas组件，组件属性包含code、runtimeCode、importedModules，运行时执行YidaComp。
从老应用主题升级进入
从 yida-upgrade-app-theme 进入时，复用已备份的 Schema、源码和已确认的目标页面清单，逐页进行等价迁移。保持原业务逻辑、主要区块结构、字段 ID、请求参数、权限和跳转行为，不借迁移重做页面或更换业务模板。平台数据能力按当前 Canvas 数据桥规范适配，无法证明等价时停止发布，在应用升级清单记录未完成项。源码注入历史表单详情主题时，按已确认范围清理样式及专属监听，保留业务事件。
迁移前必须确认
| 检查项 | 命令 / 做法 |
|---|---|
| 登录态只读验证 | openyida env --json + openyida login --check-only --json |
| 原页面源码 | 找到 .oyd.jsx / .jsx 源文件；不要只看 dist 编译产物 |
| 目标页面 Schema | 先执行 openyida get-schema <appType> <formUuid>，再用 create_file / Write / file edit tool 按需保存到 <projectRoot>/.cache/openyida/canvas-upgrade/<name>-schema.json；不要用 shell 重定向 |
| YidaCodeCanvas 发布能力 | 已内置：产出的 .canvas.jsx 用 openyida publish <源文件> <appType> <formUuid> 即自动写入 YidaCodeCanvas Schema（.canvas.jsx 扩展名识别，CLI 本地用 Babel 编译出 runtimeCode + importedModules），无需设计器手工添加 |
| 原页面数据依赖 | 列出 this.utils.yida.*、this.dataSourceMap.*、连接器、外部脚本、全局变量 |
openyida publish 已能把 .canvas.jsx 发布为 YidaCodeCanvas 组件页面；升级的真正门槛在源码等价改写（尤其 this.utils.yida.* / dataSourceMap 在 YidaCodeCanvas 组件内没有平台 JSX 组件实例桥对应物），而非发布能力。改写受阻、无法保证等价时，只交付源码草案和迁移报告，不要声称已完成升级。
可迁移性分级
| 原页面能力 | 迁移建议 |
|---|---|
| 纯展示 UI、静态数据、轻交互 | 可直接迁为 YidaComp 函数组件 |
普通 React 状态 / _customState | 改为 useState / useMemo / useEffect |
didMount / didUnmount | 改为 useEffect(() => { ...; return cleanup; }, []) |
| ECharts / d3 / recharts | 优先使用 YidaCodeCanvas 可用资源清单；不在清单内则先补依赖或降级 |
this.utils.yida.* 表单 API | 不能默认照搬；需要通过 props、数据源注入；无法等价迁移时保留历史页面并输出阻塞点 |
this.dataSourceMap.* | 需要确认 YidaCodeCanvas props 是否透传数据源；未验证前不要迁移为可运行承诺 |
this.utils.toast/dialog/router | 改为 antd Message/Modal 或由 props 注入的能力；需验证 |
字段组件如 EmployeeField | 按 YidaCodeCanvas 组件依赖映射规则先做最小验证 |
openyida publish | 仍是最终发布方式：.oyd.jsx / .openyida.jsx 等平台 JSX 源码发布为 Jsx 组件，.canvas.jsx 源码（或加 --canvas）发布为 YidaCodeCanvas 组件。迁移就是把源码改写成 .canvas.jsx 后重新 publish |
输出产物位置
- 可维护的
.canvas.jsx源码放在project/pages/src/<页面名>.canvas.jsx。 - 临时分析、Schema 回读、编译返回值、依赖清单放在
.cache/openyida/canvas-upgrade/。 - 不要把一次性
runtimeCode、接口抓包、调试 JSON 放到仓库根目录。
Show full SKILL.md (183 more words)Show less
迁移步骤
盘点原页面
- 读取源文件，不从
project/pages/dist/*.js反推。 - 列出导出的函数、顶层常量、
_customState字段、生命周期、API 调用、第三方脚本。 - 标记依赖
this的能力：this.utils、this.dataSourceMap、this.state、this.setState。
- 读取源文件，不从
判断是否能自动升级
- 如果页面主要是 UI + 本地状态 + 白名单图表库，可以继续生成
.canvas.jsx源码。 - 如果页面强依赖
this.utils.yida.*或设计器数据源，但 YidaCodeCanvas props 未验证，先输出阻塞点和迁移计划。 - 如果目标诉求其实是字段结构、流程、报表、权限，停止迁移，切到对应配置型技能。
- 如果页面主要是 UI + 本地状态 + 白名单图表库，可以继续生成
生成
.canvas.jsx源码- 把
export function renderJsx()的 JSX 提取到function YidaComp(props)。 - 把
_customState拆为 React state；复杂派生数据用useMemo。 - 把生命周期副作用放进
useEffect并返回 cleanup。 - 把普通页面 API 适配逻辑抽成 props 调用或明确的 TODO，不要假装可用。
- 保持 UI 结构和文案尽量不变，先做等价迁移，再考虑重构。
- 把
处理依赖
- import 只使用
YidaCodeCanvas可用资源清单内的包（能被 CLI 编译识别并注入importedModules）。 - 对照
YidaCodeCanvas依赖规则检查importedModules。 - 外部 CDN 脚本要么换成白名单依赖，要么在最小验证页确认可加载。
- import 只使用
发布 / 验证 Schema
- 用
openyida publish project/pages/src/<页面名>.canvas.jsx <appType> <formUuid>发布：.canvas.jsx自动写入YidaCodeCanvasSchema，CLI 本地用 Babel 编译出runtimeCode+importedModules（code/runtimeCode/importedModules由 CLI 填充，无需手工拼 Schema）。 - 源码改写受阻、无法保证等价时，只交付
.canvas.jsx草案和升级报告，不要发布覆盖线上页。 - 发布后回读 Schema，确认组件树中存在
YidaCodeCanvas，且runtimeCode不是空。
- 用
运行验收
- 打开真实页面，确认首屏非空。
- 控制台无依赖缺失、
YidaComp未定义、CSS 缺失等错误。 - 核心交互能触发；移动端至少做一次宽度/弹层检查。
- 如涉及
EmployeeField，按 EmployeeField 验收点逐项验证。
转换模式与升级报告
- 转换核心：
_customState→useState/useMemo；didMount/didUnmount→useEffect+ cleanup；删掉forceUpdate/timestamp 强刷；this.utils.yida.*/dataSourceMap抽成 props 或明确 TODO（YidaCodeCanvas组件没有平台 JSX 组件实例桥，不要假装可用）；JSX 从renderJsx()提到function YidaComp(props)并export default。 - 迁移完成或受阻时输出简短升级报告（含 source/target、status、依赖、schema write path、blockers、验收勾选项）。
📖 before/after 完整转换 JSX 示例 + 升级报告模板 → references/migration-examples.md
常见阻塞
| 阻塞 | 处理 |
|---|---|
源码无法等价改写（this.utils.yida.* / dataSourceMap 深度耦合） | YidaCodeCanvas 组件没有平台 JSX 组件实例桥，需重写为自建 HTTP 桥或 props；未验证前只交付草案和迁移报告，不发布覆盖 |
依赖不在 YidaCodeCanvas 可用资源清单 | 补依赖映射、换已支持库，或保留原实现 |
原页面强依赖 this.utils.yida.* | 需要 props / 数据源注入方案；未验证前不要承诺可运行 |
| 原页面使用宜搭原生字段组件 | 先做最小验证 |
Schema 回读不是 YidaCodeCanvas | 说明 Schema 仍是 Jsx 组件，升级未完成 |
© openyida, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 1 other file (references) in yida-skills/skills/yida-canvas-upgrade of openyida/openyida.
- SKILL.md
- references/migration-examples.md
Open the folder on GitHubat commit 4932d0b
Compare with similar skills
Yida Canvas Upgrade next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Yida Canvas Upgrade this skillopenyida/openyida | 221 | — | ~1.3k | Automated safety check: Pass | MIT | |
| Web Artifacts Builderanthropics/skills | 180k | 40 repos | ~769 | Automated safety check: Pass | Apache-2.0 | |
| Tailwindcss Developmentanonaddy/anonaddy | 4.9k | 10 repos | ~865 | Automated safety check: Pass | MIT | |
| Core Component Library PatternsChrisWiles/claude-code-showcase | 6.1k | 8 repos | ~1.2k | Automated safety check: Pass | None | |
| React Router Developmentremix-run/react-router | 57k | 1 repos | ~1.5k | Automated safety check: Pass | MIT | |
| React UI State PatternsChrisWiles/claude-code-showcase | 6.1k | 8 repos | ~1.6k | Automated safety check: Pass | None |
Similar skills
- Official
Tailwindcss Development
anonaddy/anonaddy
Always invoke when the user's message includes 'tailwind' in any form.
Core Component Library Patterns
ChrisWiles/claude-code-showcase
Reference for building UI with a token-based core component library: spacing, color and typography tokens, Box, stacks, Text, Button, Input and Card, plus layout patterns.
React Router Development
remix-run/react-router
Guides work on React Router apps by first identifying whether the app uses Framework, Data or Declarative mode, then loading the matching reference and the installed package docs.
React UI State Patterns
ChrisWiles/claude-code-showcase
Sets patterns for React interfaces: when to show loading spinners or skeletons, how to surface errors, how to disable buttons during async work and how to handle empty lists.
Chakra UI v3 Builder
chakra-ui/chakra-ui
Builds responsive, accessible Chakra UI v3 components and layouts, sets up Chakra in new or existing projects, and designs themes with tokens, semantic tokens and recipes.
More from openyida/openyida
All 59 skills in this repoYida Canvas Custom Page
openyida/openyida
宜搭自定义页面开发规范，使用 YidaCodeCanvas 组件实现现代 React18 自定义页面。用于官网、看板、工作台、列表、详情、门户壳、可视化、hooks 交互、表单入口，以及需要门户组件、数据管理视图、成员、部门或上传组件的场景；发布层自动注入 yida/utils window 桥。
Openyida Release
openyida/openyida
快速发布 OpenYida npm 正式版或测试版。用户说“发布正式版”“发布测试版”“发 beta”或要求按当天日期生成版本 tag 时使用；不用于宜搭应用或自定义页面发布。
Yida Design Plan
openyida/openyida
Plan 模式的视觉设计分支。基于需求选择视觉方向，再结合业务页面规划维护 build-plan.json 的 visualStyle，供 CLI 派生 design.md。
Yida Openyida Publish Guard
openyida/openyida
Prevent stale local OpenYida custom page source from overwriting live designer edits.
Codemap
openyida/openyida
Generate, update, or drift-check agent-facing CodeMaps as progressive code terrain indexes for projects, features, capabilities, functions, modules, or bug chains.
Sdd Riper One Light
openyida/openyida
面向 GPT-5.5 等强模型和熟练用户的轻量 AI Agent Harness / checkpoint-driven coding skill。默认用户已经把任务切到基本可执行的最小混沌单元；模型自行分解、探索与推进，人类通过最终目标、最小 spec、复述、checkpoint、证据验证与回写来低干扰控盘。
Related
Categories
Questions about Yida Canvas Upgrade
What does Yida Canvas Upgrade do?
将基于 JSX 组件 的自定义页面升级/迁移为使用 YidaCodeCanvas 组件实现的宜搭自定义页面。适用于用户要求“.oyd.jsx / .oyb.jsx / Jsx 页面转 YidaCodeCanvas”“renderJsx 页面迁移到 YidaCodeCanvas”“把发布产物改为 runtimeCode + importedModules”。不要用于从零编写自定义页面。. Yida Canvas Upgrade is an agent skill from openyida/openyida.
When should I use Yida Canvas Upgrade?
Yida Canvas Upgrade fits situations like: tasks that involve React components.
How do I install Yida Canvas Upgrade in Claude Code?
Run `npx skills add openyida/openyida --skill yida-canvas-upgrade -a claude-code`. Or copy the skill folder (yida-skills/skills/yida-canvas-upgrade in openyida/openyida) into .claude/skills/yida-canvas-upgrade in your project. Claude Code loads it when a task matches its description.
How do I install Yida Canvas Upgrade in Codex?
Run `npx skills add openyida/openyida --skill yida-canvas-upgrade -a codex`. Or copy the skill folder (yida-skills/skills/yida-canvas-upgrade in openyida/openyida) into .agents/skills/yida-canvas-upgrade in your project. Codex loads it when a task matches its description.
Can I use Yida Canvas Upgrade in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add openyida/openyida --skill yida-canvas-upgrade -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/yida-canvas-upgrade, .gemini/skills/yida-canvas-upgrade, .github/skills/yida-canvas-upgrade and .opencode/skills/yida-canvas-upgrade in your project.
What does Yida Canvas Upgrade need to run?
SKILL.md names no scripts, command-line tools or credentials: Yida Canvas Upgrade is instructions for the agent only.
Does Yida Canvas Upgrade access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Yida Canvas Upgrade safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Yida Canvas Upgrade use?
Yida Canvas Upgrade is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Yida Canvas Upgrade use?
About 1.3k tokens (SKILL.md is roughly 5.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 484 tokens, read only when the agent opens those files.
What are the alternatives to Yida Canvas Upgrade?
Skills that share tags, products or a category with Yida Canvas Upgrade: Web Artifacts Builder (anthropics/skills, 180k stars), Tailwindcss Development (anonaddy/anonaddy, 4.9k stars), Core Component Library Patterns (ChrisWiles/claude-code-showcase, 6.1k stars) and React Router Development (remix-run/react-router, 57k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Yida Canvas Upgrade?
openyida (a GitHub organization) maintains it in openyida/openyida, which has 221 GitHub stars. The repository holds 59 skills in this directory. The repository was last updated on October 10, 2026.
Source: openyida/openyida on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.