Agent skill

Yida Rechart

by openyida in openyida/openyida

自定义页面 Recharts 高级图表技能。使用 YidaCodeCanvas 组件和 Recharts 实现可视化、看板图表、趋势图、组合图等现代 React 图表页面;聚合数据必须来自宜搭原生报表或已聚合接口,不在前端拉全量明细自行聚合。明确要求 ECharts、维护旧 ECharts 页面或 Recharts 无法覆盖的复杂 option 时改用 yida-chart。

MITAuto-check passedFrontend & Design

Install Yida Rechart

skills CLI
$ npx skills add openyida/openyida --skill yida-rechart -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install openyida/openyida yida-rechart --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ 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-src

Use ~/.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/

Facts

Skill name
yida-rechart
GitHub stars
220
Token cost
~970 tokens
SKILL.md length
162 words
Files
1
Skills in repo
58
Repo updated
First seen
Licence
MIT

At a glance

自定义页面 Recharts 高级图表技能。使用 YidaCodeCanvas 组件和 Recharts 实现可视化、看板图表、趋势图、组合图等现代 React 图表页面;聚合数据必须来自宜搭原生报表或已聚合接口,不在前端拉全量明细自行聚合。明确要求 ECharts、维护旧 ECharts 页面或 Recharts 无法覆盖的复杂 option 时改用 yida-chart。

  • Works in 6 steps: 禁止前端全量聚合:不得拉取全量表单明细后在浏览器中 reduce /… → 聚合口径有来源:统计数据必须来自 yida-report… → YidaCodeCanvas 组件契约正确:源码使用 .canvas.jsx /… → …
  • Tasks that involve React components
  • SKILL.md covers 核心定位, 路由边界, 致命规则(FATAL) and 数据边界, plus 4 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

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.

When your agent uses it

  • Tasks that involve React components

Example prompts

  • “/yida-rechart”

Workflow steps

6 steps, taken from the first numbered list in SKILL.md.

  1. 禁止前端全量聚合:不得拉取全量表单明细后在浏览器中 reduce / groupBy 计算 KPI、趋势、占比或排名。
  2. 聚合口径有来源:统计数据必须来自 yida-report 原生报表接口,或经过验证、已完成权限与聚合的后端/连接器接口。
  3. YidaCodeCanvas 组件契约正确:源码使用 .canvas.jsx / .canvas.tsx,主入口是 YidaComp 函数组件,使用 hooks,不使用 renderJsx、didMount 或 this.utils.yida.*。
  4. 依赖只用可用资源清单:从 recharts、react、antd 等 YidaCodeCanvas 可用资源清单内的包导入;不通过脚本标签加载 Recharts。
  5. 错误与空态真实:接口失败、无权限、字段不匹配和无数据分别展示明确状态,不用 seed 数据伪装真实成功。
  6. 源码修改后才可声明发布:真实交付中创建或修改页面源码后,只有成功执行 openyida publish 才能说“页面已发布”;本地编译只能说明“源码可发布”。

What it can do on your machine

Read from SKILL.md and the folder at commit b52e65e. 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 (its code samples are javascript and bash).

    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 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.

Always · name and description, kept in context so the agent knows when to use it
~51
When it runs · the whole SKILL.md, loaded when a task matches
~970

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 b52e65e, republished under its MIT licence (© openyida). 162 words, ~970 tokens.

Download SKILL.mdSave it as .claude/skills/yida-rechart/SKILL.md (or your agent's skills folder).
name
yida-rechart
description
自定义页面 Recharts 高级图表技能。使用 `YidaCodeCanvas` 组件和 Recharts 实现可视化、看板图表、趋势图、组合图等现代 React 图表页面;聚合数据必须来自宜搭原生报表或已聚合接口,不在前端拉全量明细自行聚合。明确要求 ECharts、维护旧 ECharts 页面或 Recharts 无法覆盖的复杂 option 时改用 yida-chart。

自定义页面 Recharts 图表

核心定位

本技能是“高级图表 / 可视化 / 看板图表”的默认实现链路:

  • 页面使用 .canvas.jsx / .canvas.tsx。
  • 入口使用 YidaComp React 函数组件。
  • 状态、筛选和生命周期使用 React hooks。
  • 图表使用白名单依赖 recharts,页面组件优先使用 antd。
  • 数据读取与错误态遵循 yida-canvas-data-binding。

本技能负责图表展示和交互,不替代服务端聚合能力。KPI、分组、求和、平均、趋势、占比等统计口径仍由 yida-report 或已验证的聚合接口产生。

路由边界

用户意图选择
高级图表、可视化、看板图表、趋势组合图,没有指定技术栈yida-rechart
标准统计报表、原生筛选器、指标卡和表格报表yida-report
明确指定 EChartsyida-chart
维护已有 ECharts / 普通自定义页面yida-chart
地图、graph、custom series、复杂 option 等 Recharts 无法覆盖yida-chart
自定义页面图表接真实数据、CSRF、同源 fetch、错误态同时遵循 yida-canvas-data-binding

不要仅因为用户说“高级”“好看”“大屏”就切到 ECharts。默认先用本技能;只有明确技术要求、维护平台 JSX 组件页面或能力缺口才使用 yida-chart。

致命规则(FATAL)

  1. 禁止前端全量聚合:不得拉取全量表单明细后在浏览器中 reduce / groupBy 计算 KPI、趋势、占比或排名。
  2. 聚合口径有来源:统计数据必须来自 yida-report 原生报表接口,或经过验证、已完成权限与聚合的后端/连接器接口。
  3. YidaCodeCanvas 组件契约正确:源码使用 .canvas.jsx / .canvas.tsx,主入口是 YidaComp 函数组件,使用 hooks,不使用 renderJsx、didMount 或 this.utils.yida.*。
  4. 依赖只用可用资源清单:从 recharts、react、antd 等 YidaCodeCanvas 可用资源清单内的包导入;不通过脚本标签加载 Recharts。
  5. 错误与空态真实:接口失败、无权限、字段不匹配和无数据分别展示明确状态,不用 seed 数据伪装真实成功。
  6. 源码修改后才可声明发布:真实交付中创建或修改页面源码后,只有成功执行 openyida publish <source> <appType> <displayPageFormUuid> 才能说“页面已发布”;本地编译只能说明“源码可发布”。

数据边界

数据类型正确来源页面允许做什么
KPI、求和、平均、分组、趋势、占比、排名yida-report 或已聚合接口格式化、排序已聚合点、切换展示窗口
已聚合时间序列报表组件接口或聚合 API映射字段、过滤当前展示范围、渲染组合图
明细记录分页表单查询展示明细、跳转详情,不在前端转成聚合指标
seed 数据本地演示必须显式标注未接真实报表

如果需求同时包含“创建统计口径”和“做定制图表”,先用 yida-report 形成聚合数据源,再用本技能展示。已有聚合 API 时,先用 yida-canvas-data-binding 验证请求、鉴权、返回体和错误态。

推荐实现结构

jsx
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/...。

bash
# 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。
  • 图表消费的是报表结果或已聚合接口,不是全量明细前端聚合。
  • 筛选控件受控,并真正改变展示数据或请求参数。
  • loading、空态、错误态、无权限状态可区分。
  • 响应式容器有明确高度,Tooltip、坐标轴和图例可读。
  • seed 数据有可见标识;真实交付不把 seed 当真实数据。
  • 只有真实 publish 成功后才声明页面已发布。

完成证据

  • 本地样例或源码:compileCanvasLocal 成功且依赖清单正确。
  • 真实交付:聚合数据源已验证,页面发布成功并返回目标页面 URL。
  • 若本轮没有远程写入,只能报告“技能/源码/样例已完成本地验证,尚未发布”。

© 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

Just SKILL.md in yida-skills/skills/yida-rechart of openyida/openyida.

Open the folder on GitHubat commit b52e65e

Compare with similar skills

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.

Yida Rechart compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Yida Rechart this skillopenyida/openyida220—~970Automated safety check: PassMIT
Feature SyncNG-ZORRO/ng-zorro-antd9.2k—~840Automated safety check: PassMIT
South Admin CRUD Generatorsouthliu/south-admin-react580—~1.7kAutomated safety check: PassMIT
LobeHub React Component Guidelobehub/lobehub83k—~1.7kAutomated safety check: PassCustom licence
Frontendstreamband/hydra-srt147—~582Automated safety check: PassApache-2.0
Faasjs React Ant Designfaasjs/faasjs121—~693Automated safety check: PassMIT

Similar skills

  • Feature Sync

    NG-ZORRO/ng-zorro-antd

    Sync an Ant Design React component or feature into NG-ZORRO.

    9.2k GitHub stars~840 tokensUpdated yesterday
    Frontend & DesignAuto-check passed
  • South Admin CRUD Generator

    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.

    580 GitHub stars~1.7k tokensUpdated 19 days ago
    Frontend & DesignAuto-check passed
  • Sets out how to write React components in LobeHub: which styling approach to use, which component libraries to prefer and in what order.

    83k GitHub stars~1.7k tokensUpdated today
    Frontend & DesignAuto-check passed
  • Frontend

    streamband/hydra-srt

    A skill your agent uses for frontend work in webapp (React/TypeScript, UI implementation, tests, and refactors).

    147 GitHub stars~582 tokensUpdated 22 days ago
    Frontend & DesignAuto-check passed
  • 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…

    121 GitHub stars~693 tokensUpdated 1 mo ago
    Backend & APIsAuto-check passed
  • Web Artifacts Builder

    anthropics/skills

    Official

    Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.

    180k GitHub starsUsed in 41 repos~769 tokens
    Frontend & DesignAuto-check passed

More from openyida/openyida

All 58 skills in this repo
  • Yida Canvas Custom Page

    openyida/openyida

    宜搭自定义页面开发规范,使用 YidaCodeCanvas 组件实现现代 React18 自定义页面。用于官网、看板、工作台、列表、详情、门户壳、可视化、hooks 交互、表单入口,以及需要门户组件、数据管理视图、成员、部门或上传组件的场景;发布层自动注入 yida/utils window 桥。

    220 GitHub stars~4.3k tokensUpdated today
    Auto-check passed
  • Openyida Release

    openyida/openyida

    快速发布 OpenYida npm 正式版或测试版。用户说“发布正式版”“发布测试版”“发 beta”或要求按当天日期生成版本 tag 时使用;不用于宜搭应用或自定义页面发布。

    220 GitHub stars~520 tokensUpdated today
    Auto-check passed
  • Yida Design Plan

    openyida/openyida

    Plan 模式的视觉设计分支。基于需求选择视觉方向,再结合业务页面规划维护 build-plan.json 的 visualStyle,供 CLI 派生 design.md。

    220 GitHub stars~756 tokensUpdated today
    Auto-check passed
  • Prevent stale local OpenYida custom page source from overwriting live designer edits.

    220 GitHub stars~1.2k tokensUpdated today
    Auto-check passed
  • 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.

    220 GitHub stars~1k tokensUpdated today
    Auto-check passed
  • Sdd Riper One Light

    openyida/openyida

    面向 GPT-5.5 等强模型和熟练用户的轻量 AI Agent Harness / checkpoint-driven coding skill。默认用户已经把任务切到基本可执行的最小混沌单元;模型自行分解、探索与推进,人类通过最终目标、最小 spec、复述、checkpoint、证据验证与回写来低干扰控盘。

    220 GitHub stars~1.5k tokensUpdated today
    Auto-check passed

Works with

Questions about Yida Rechart

What does Yida Rechart do?

自定义页面 Recharts 高级图表技能。使用 YidaCodeCanvas 组件和 Recharts 实现可视化、看板图表、趋势图、组合图等现代 React 图表页面;聚合数据必须来自宜搭原生报表或已聚合接口,不在前端拉全量明细自行聚合。明确要求 ECharts、维护旧 ECharts 页面或 Recharts 无法覆盖的复杂 option 时改用 yida-chart。. Yida Rechart is an agent skill from openyida/openyida.

When should I use Yida Rechart?

Yida Rechart fits situations like: tasks that involve React components.

How do I install Yida Rechart in Claude Code?

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.

How do I install Yida Rechart in Codex?

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.

Can I use Yida Rechart 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-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.

What does Yida Rechart need to run?

SKILL.md names no scripts, command-line tools or credentials: Yida Rechart is instructions for the agent only.

Does Yida Rechart 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 Rechart 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 Rechart use?

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.

How many tokens does Yida Rechart use?

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.

What are the alternatives to Yida Rechart?

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.

Who maintains Yida Rechart?

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.