Feature Sync
NG-ZORRO/ng-zorro-antd
Sync an Ant Design React component or feature into NG-ZORRO.
自定义页面 Recharts 高级图表技能。使用 YidaCodeCanvas 组件和 Recharts 实现可视化、看板图表、趋势图、组合图等现代 React 图表页面;聚合数据必须来自宜搭原生报表或已聚合接口,不在前端拉全量明细自行聚合。明确要求 ECharts、维护旧 ECharts 页面或 Recharts 无法覆盖的复杂 option 时改用 yida-chart。
$ npx skills add openyida/openyida --skill yida-rechart -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install openyida/openyida yida-rechart --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-rechart .claude/skills/yida-rechart && 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-rechart" agent skill from https://github.com/openyida/openyida/tree/main/yida-skills/skills/yida-rechart into .claude/skills/yida-rechart/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "yida-rechart", 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-rechartType 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-rechart -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install openyida/openyida yida-rechart --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-rechart .agents/skills/yida-rechart && 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-rechart" agent skill from https://github.com/openyida/openyida/tree/main/yida-skills/skills/yida-rechart into .agents/skills/yida-rechart/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "yida-rechart", 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-rechart -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install openyida/openyida yida-rechart --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-rechart .cursor/skills/yida-rechart && 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-rechart" agent skill from https://github.com/openyida/openyida/tree/main/yida-skills/skills/yida-rechart into .cursor/skills/yida-rechart/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "yida-rechart", 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-rechart--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-rechart -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install openyida/openyida yida-rechart --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-rechart .gemini/skills/yida-rechart && 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-rechart" agent skill from https://github.com/openyida/openyida/tree/main/yida-skills/skills/yida-rechart into .gemini/skills/yida-rechart/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "yida-rechart", 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-rechartInstalls 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-rechart -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-rechart .github/skills/yida-rechart && 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-rechart" agent skill from https://github.com/openyida/openyida/tree/main/yida-skills/skills/yida-rechart into .github/skills/yida-rechart/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "yida-rechart", 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-rechart -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-rechart --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-rechart .opencode/skills/yida-rechart && 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-rechart" agent skill from https://github.com/openyida/openyida/tree/main/yida-skills/skills/yida-rechart into .opencode/skills/yida-rechart/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "yida-rechart", 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.
yida-rechart自定义页面 Recharts 高级图表技能。使用 YidaCodeCanvas 组件和 Recharts 实现可视化、看板图表、趋势图、组合图等现代 React 图表页面;聚合数据必须来自宜搭原生报表或已聚合接口,不在前端拉全量明细自行聚合。明确要求 ECharts、维护旧 ECharts 页面或 Recharts 无法覆盖的复杂 option 时改用 yida-chart。
Yida Rechart is an agent skill from openyida/openyida. 自定义页面 Recharts 高级图表技能。使用 YidaCodeCanvas 组件和 Recharts 实现可视化、看板图表、趋势图、组合图等现代 React 图表页面;聚合数据必须来自宜搭原生报表或已聚合接口,不在前端拉全量明细自行聚合。明确要求 ECharts、维护旧 ECharts 页面或 Recharts 无法覆盖的复杂 option 时改用 yida-chart。
Its SKILL.md is about 970 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Frontend & Design, covering React components. It works with React and Ant Design. The repository describes itself as: Your own personal YiDA AI assistant! The licence is MIT.
6 steps, taken from the first numbered list in SKILL.md.
Read from SKILL.md and the folder at commit b52e65e. It shows what the files ask for, not the result of running them.
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.
No scripts in the folder and no shell commands in SKILL.md (its code samples are javascript and bash).
From the folder's file list and the shell code blocks in SKILL.md.
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Yida Rechart loads about 970 tokens when it runs. Until then it costs about 51 tokens; SKILL.md has 162 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.
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.
The full file from openyida/openyida at commit b52e65e, republished under its MIT licence (© openyida). 162 words, ~970 tokens.
.claude/skills/yida-rechart/SKILL.md (or your agent's skills folder).本技能是“高级图表 / 可视化 / 看板图表”的默认实现链路:
.canvas.jsx / .canvas.tsx。YidaComp React 函数组件。recharts,页面组件优先使用 antd。yida-canvas-data-binding。本技能负责图表展示和交互,不替代服务端聚合能力。KPI、分组、求和、平均、趋势、占比等统计口径仍由 yida-report 或已验证的聚合接口产生。
| 用户意图 | 选择 |
|---|---|
| 高级图表、可视化、看板图表、趋势组合图,没有指定技术栈 | yida-rechart |
| 标准统计报表、原生筛选器、指标卡和表格报表 | yida-report |
| 明确指定 ECharts | yida-chart |
| 维护已有 ECharts / 普通自定义页面 | yida-chart |
| 地图、graph、custom series、复杂 option 等 Recharts 无法覆盖 | yida-chart |
| 自定义页面图表接真实数据、CSRF、同源 fetch、错误态 | 同时遵循 yida-canvas-data-binding |
不要仅因为用户说“高级”“好看”“大屏”就切到 ECharts。默认先用本技能;只有明确技术要求、维护平台 JSX 组件页面或能力缺口才使用 yida-chart。
reduce / groupBy 计算 KPI、趋势、占比或排名。yida-report 原生报表接口,或经过验证、已完成权限与聚合的后端/连接器接口。.canvas.jsx / .canvas.tsx,主入口是 YidaComp 函数组件,使用 hooks,不使用 renderJsx、didMount 或 this.utils.yida.*。recharts、react、antd 等 YidaCodeCanvas 可用资源清单内的包导入;不通过脚本标签加载 Recharts。openyida publish <source> <appType> <displayPageFormUuid> 才能说“页面已发布”;本地编译只能说明“源码可发布”。| 数据类型 | 正确来源 | 页面允许做什么 |
|---|---|---|
| KPI、求和、平均、分组、趋势、占比、排名 | yida-report 或已聚合接口 | 格式化、排序已聚合点、切换展示窗口 |
| 已聚合时间序列 | 报表组件接口或聚合 API | 映射字段、过滤当前展示范围、渲染组合图 |
| 明细记录 | 分页表单查询 | 展示明细、跳转详情,不在前端转成聚合指标 |
| seed 数据 | 本地演示 | 必须显式标注未接真实报表 |
如果需求同时包含“创建统计口径”和“做定制图表”,先用 yida-report 形成聚合数据源,再用本技能展示。已有聚合 API 时,先用 yida-canvas-data-binding 验证请求、鉴权、返回体和错误态。
import React, { useMemo, useState } from 'react';
import { Segmented } from 'antd';
import {
Bar,
CartesianGrid,
ComposedChart,
Line,
ResponsiveContainer,
Tooltip,
XAxis,
YAxis,
} from 'recharts';
function YidaComp(props) {
const [windowSize, setWindowSize] = useState(7);
const aggregatedRows = Array.isArray(props.aggregatedRows)
? props.aggregatedRows
: [];
const visibleRows = useMemo(
() => aggregatedRows.slice(-windowSize),
[aggregatedRows, windowSize]
);
return (
<div>
<Segmented value={windowSize} onChange={setWindowSize} options={[7, 30]} />
<ResponsiveContainer width="100%" height={320}>
<ComposedChart data={visibleRows}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="label" />
<YAxis />
<Tooltip />
<Bar dataKey="amount" fill="#1677ff" />
<Line dataKey="target" stroke="#fa8c16" />
</ComposedChart>
</ResponsiveContainer>
</div>
);
}
export default YidaComp;这段结构只消费已聚合行;不要在 useMemo 中把原始明细聚合成图表点。
下面命令以仓库根为视角;如果 cwd 已是 <workspace>/project,把 project/pages/src/... 改成 pages/src/...。
# 1. 如需真实统计,先创建/确认原生报表或已聚合接口
# yida-report 负责统计口径;yida-canvas-data-binding 负责接口接入
# 2. 本地快检
openyida compile project/pages/src/trend-combo.canvas.jsx --json
# 3. 真实交付时发布
openyida publish project/pages/src/trend-combo.canvas.jsx <appType> <displayPageFormUuid>.canvas.jsx / .canvas.tsx,入口是 YidaComp。compileCanvasLocal 返回的依赖包含 react、recharts,使用 antd 时包含 antd。publish 成功后才声明页面已发布。compileCanvasLocal 成功且依赖清单正确。© openyida, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Just SKILL.md in yida-skills/skills/yida-rechart of openyida/openyida.
Open the folder on GitHubat commit b52e65e
Yida Rechart 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 Rechart this skillopenyida/openyida | 220 | — | ~970 | Automated safety check: Pass | MIT | |
| Feature SyncNG-ZORRO/ng-zorro-antd | 9.2k | — | ~840 | Automated safety check: Pass | MIT | |
| South Admin CRUD Generatorsouthliu/south-admin-react | 580 | — | ~1.7k | Automated safety check: Pass | MIT | |
| LobeHub React Component Guidelobehub/lobehub | 83k | — | ~1.7k | Automated safety check: Pass | Custom licence | |
| Frontendstreamband/hydra-srt | 147 | — | ~582 | Automated safety check: Pass | Apache-2.0 | |
| Faasjs React Ant Designfaasjs/faasjs | 121 | — | ~693 | Automated safety check: Pass | MIT |
NG-ZORRO/ng-zorro-antd
Sync an Ant Design React component or feature into NG-ZORRO.
southliu/south-admin-react
Generates a full CRUD page - page component, data model and API client - from the south-admin-react project's own VS Code snippet templates.
lobehub/lobehub
Sets out how to write React components in LobeHub: which styling approach to use, which component libraries to prefer and in what order.
streamband/hydra-srt
A skill your agent uses for frontend work in webapp (React/TypeScript, UI implementation, tests, and refactors).
faasjs/faasjs
A skill your agent uses when building or reviewing FaasJS React UI, especially @faasjs/ant-design pages, useFaas, useFaasStream, faas requests, CRUD screens, Table faasData, Description faasData…
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.
openyida/openyida
宜搭自定义页面开发规范,使用 YidaCodeCanvas 组件实现现代 React18 自定义页面。用于官网、看板、工作台、列表、详情、门户壳、可视化、hooks 交互、表单入口,以及需要门户组件、数据管理视图、成员、部门或上传组件的场景;发布层自动注入 yida/utils window 桥。
openyida/openyida
快速发布 OpenYida npm 正式版或测试版。用户说“发布正式版”“发布测试版”“发 beta”或要求按当天日期生成版本 tag 时使用;不用于宜搭应用或自定义页面发布。
openyida/openyida
Plan 模式的视觉设计分支。基于需求选择视觉方向,再结合业务页面规划维护 build-plan.json 的 visualStyle,供 CLI 派生 design.md。
openyida/openyida
Prevent stale local OpenYida custom page source from overwriting live designer edits.
openyida/openyida
Generate, update, or drift-check agent-facing CodeMaps as progressive code terrain indexes for projects, features, capabilities, functions, modules, or bug chains.
openyida/openyida
面向 GPT-5.5 等强模型和熟练用户的轻量 AI Agent Harness / checkpoint-driven coding skill。默认用户已经把任务切到基本可执行的最小混沌单元;模型自行分解、探索与推进,人类通过最终目标、最小 spec、复述、checkpoint、证据验证与回写来低干扰控盘。
Works with
Categories
自定义页面 Recharts 高级图表技能。使用 YidaCodeCanvas 组件和 Recharts 实现可视化、看板图表、趋势图、组合图等现代 React 图表页面;聚合数据必须来自宜搭原生报表或已聚合接口,不在前端拉全量明细自行聚合。明确要求 ECharts、维护旧 ECharts 页面或 Recharts 无法覆盖的复杂 option 时改用 yida-chart。. Yida Rechart is an agent skill from openyida/openyida.
Yida Rechart fits situations like: tasks that involve React components.
Run `npx skills add openyida/openyida --skill yida-rechart -a claude-code`. Or copy the skill folder (yida-skills/skills/yida-rechart in openyida/openyida) into .claude/skills/yida-rechart in your project. Claude Code loads it when a task matches its description.
Run `npx skills add openyida/openyida --skill yida-rechart -a codex`. Or copy the skill folder (yida-skills/skills/yida-rechart in openyida/openyida) into .agents/skills/yida-rechart in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add openyida/openyida --skill yida-rechart -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-rechart, .gemini/skills/yida-rechart, .github/skills/yida-rechart and .opencode/skills/yida-rechart in your project.
SKILL.md names no scripts, command-line tools or credentials: Yida Rechart is instructions for the agent only.
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.
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.
Yida Rechart is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
About 970 tokens (SKILL.md is roughly 3.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
Skills that share tags, products or a category with Yida Rechart: Feature Sync (NG-ZORRO/ng-zorro-antd, 9.2k stars), South Admin CRUD Generator (southliu/south-admin-react, 580 stars), LobeHub React Component Guide (lobehub/lobehub, 83k stars) and Frontend (streamband/hydra-srt, 147 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
openyida (a GitHub organization) maintains it in openyida/openyida, which has 220 GitHub stars. The repository holds 58 skills in this directory. The repository was last updated on October 8, 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.