Yida Data Manage Ui logo

Yida Data Manage Ui

Organization
openyida
yida-data-manage-ui

宜搭数据管理页美化方法:从用户目标推导线条、容器、页签、操作层级、表头、配色、列强调和布局变化,定位实际 token 与局部 CSS,自由组合而非套固定风格。用于当前数据管理页换风格、突出操作或关键列、修复视觉异常,以及已授权的自定义管理页;保留数据、权限和业务动作。

Overview

Publisheropenyida
Repositoryopenyida
Skill nameyida-data-manage-ui
Stars
228
Forks
50
Bundled files
4
LicenseMIT
Links
  • Markdown instructions

    A SKILL.md file the model loads on demand, so it only costs tokens when a request actually matches.

  • Works with any LLM

    AI skills are plain Markdown, not provider-specific code, so this works with GPT, Claude, Gemini, Grok, or a local model.

  • 4 bundled files

    Scripts, templates, and references the model can read while it works. Files are read-only and never executed.

  • Open source

    Published by openyida on GitHub. Read the source before you install it.

Installation

Install the Yida Data Manage Ui AI skill in TypingMind to use it with any LLM, or drop it into another agent that reads SKILL.md.

1

Install in TypingMind

TypingMind installs a skill straight from its GitHub folder — it reads SKILL.md, bundles the resource files, and stores the result locally.

  1. Open the app and go to Plugins → Skills.
  2. Choose "Install from GitHub".
  3. Paste the skill folder URL below and confirm.
    https://github.com/openyida/openyida/tree/main/yida-skills/skills/yida-data-manage-ui
  4. Enable the skill in any chat where you want it available.
Plugins → Skills → Add skill → From GitHub URL, then paste the folder URL and press Continue.
2

Install in another agent

Any agent that reads the Agent Skills format can use this skill — copy the folder into that agent's skills directory.

Claude Code — .claude/skills
git clone --depth 1 https://github.com/openyida/openyida.git /tmp/openyida
mkdir -p .claude/skills
cp -r /tmp/openyida/yida-skills/skills/yida-data-manage-ui .claude/skills/yida-data-manage-ui
Restart Claude Code after copying so it picks up the new skill.

Use it in TypingMind

Enable Yida Data Manage Ui in any TypingMind chat and the model takes it from there. Its name and description sit in the system prompt, and the moment a request matches, the model loads the full instructions itself — you never invoke it by hand, and it costs no tokens until it is actually used.

The model loads Yida Data Manage Ui on its own as soon as a request matches it.

Works with any AI model

AI skills are plain Markdown instructions rather than provider-specific code, so Yida Data Manage Ui is not tied to the model it was written for. Install it once in TypingMind and use it with GPT-5, Claude, Gemini, Grok, DeepSeek, Mistral, Llama, or a local model you run yourself — all on your own API keys.

  • Loaded only when it is needed

    The system prompt carries just the name and description. The instructions are fetched on the first matching request, so an idle skill costs nothing.

  • Switch models mid-chat

    Because the skill is instructions rather than code, changing model does not break it — the next model reads the same SKILL.md.

Skill instructions

This is the SKILL.md content the model loads. Read it before installing — a skill is instructions your model will follow.

数据管理页 UI 提升

本技能沉淀的是怎么改,不是风格清单。先理解用户希望更容易看到什么、完成什么,再选择需要改变的视觉维度。可以产生未被命名、未收录的新样式;不要求先选 style ID,不要求运行配方生成器。已有明确风格、参考或方案授权时直接沿用,不重复选型;只有用户要求预览时展示方案,并区分示意与实际结果。

字段显隐、字段顺序、列宽、冻结列、默认筛选及多视图配置使用 yida-form-view 的原生配置命令;不要用 CSS 隐藏字段、改虚拟表格几何或重建列表来实现。

1. 定位当前页面与约束

从访问 URL、应用导航和浏览器定位 appType、formUuid、viewUuid。详情页 URL 不等于列表入口。用 get-schema、list-forms 和实际 DOM 核对原生/自定义类型、真实字段 ID、主题和源码;不能只看截图猜选择器。没有迁移要求时保留承载方式。

记录数据源、字段映射、查询/筛选/排序/分页、动作及目标 URL、权限、提交和详情打开方式。美化不重建表单、不造模拟数据、不改变这些业务行为。旧/未知主题不能自动升级。

查看普通、悬浮、选中、禁用、加载和空状态,以及窄容器、横向滚动、固定列与浮层。先指出具体问题:例如“新增与导出权重相同”“深色表头文字继承正文色”“操作列表头没有跟随背景”,而不是直接指定某套皮肤。

2. 推导可组合的调整方向

读 调整维度与取舍,按当前问题选择一项或多项组合。用户只改一处时不扩大范围;要求差异明显时,从页签、操作层级、边界、表头、容器关系等多个维度设计变化,不只换颜色。

  • 操作优先:突出实际主操作、分组次操作、保留批量状态及危险操作语义。
  • 阅读/对照优先:调整线条、隔行区分、文字层级、数字对齐;虚拟行高仍由组件计算。
  • 关键列优先:按真实字段定向修改表头、底色、字重或标签,见 列级强调。默认无侧边竖线,不伪造可点击性。
  • 颜色变化:按钮、链接、勾选、分页和各交互状态成套考虑,沿用应用视觉语言。
  • 应用壳随页面变化:仅在用户要求时扩展 CSS 作用范围,验证离开页面后恢复。
  • 自定义管理页:仅在已有自定义承载或用户授权时设计,见 布局方法;布局、配色与数据任务分别决定,不绑定固定风格。

3. 找到真正生效的 token / CSS

读 token、选择器与局部改写。CLI 可离线查询同类实施线索,无须风格编号:

bash
openyida data-manage-style guide --json

按“目标 → 生效节点/状态 → 现有 token → 最小 CSS 补充”工作。优先在目标页面作用域覆盖平台已有 token;缺少消费点时写可解释的局部 CSS。用 DevTools 的 computed style 核实来源、继承和优先级;声明变量但没有组件消费,不算完成。

默认页级;列级调整进一步收窄到真实 fieldId。不能为了命中当前页改全局 :root、无范围 .next-btn 或所有 div,不能使用哈希 class。原生表格行高、top、transform、定位和滚动高度属于虚拟布局,不能靠 CSS 装饰改写。

data-manage-style list/generate 仅为可选的历史配方参考。只有它与目标匹配且本来就希望套用整块配方时才用;--focus actions、--emphasize-field 等也只是该生成器的快捷能力。自由设计直接在最新完整主题上编写有范围的 CSS,不必先生成最接近的配方再堆叠覆盖。已有配方内部 --lab-native-* 不是平台标准 token。

4. 备份、最小改动与发布

先按 备份和恢复 核实恢复能力:

bash
openyida app-theme snapshot <appType> --output-dir <run>/before --json

基于快照中的完整主题 CSS 创建新 candidate 文件,保留无关字节;将本轮局部规则放在可识别的 app/form 注释区块中,后续只维护该区块。沿用已有受管块时,先看生成标记及原参数,避免被下一次配方生成覆盖。只改一列时不重建整页样式。没有原主题文件时按主题技能核对当前设置和恢复边界,不用局部补丁覆盖整个应用主题。

发布前比较最新线上配置和备份,审查选择器范围、级联、主题模式和图标等非目标设置。只有已授权 UI 差异可发布:

bash
openyida update-app <appType> --theme-file <run>/candidate.css
openyida app-theme snapshot <appType> --output-dir <run>/after --json
openyida app-theme restore <appType> --snapshot <run>/before/snapshot.json --expected-current <run>/after/snapshot.json --check --json

--check 只检查恢复,不执行恢复。发布结果不明先回读,不盲目重试。自定义页按其 Canvas/JSX 流程维护源码、编译及发布,页面源码与 Schema 单独备份;应用主题快照不能替代页面备份。

5. 验证变化而非配方名

  • 表头文字、排序图标、复选框、横滚空白区和固定操作列顶部连续且可读;固定列外壳不能遮住表头。
  • 页签无多余全宽空框;操作区有明确主次,不重复堆叠卡片、胶囊和投影。
  • 行与操作对齐,横滚、列显隐、分页、勾选和筛选有效。正常、hover、选中与区域选中可区分,禁用语义保留。
  • 原有新增/详情等入口可打开;验证不提交业务数据、不执行删除。
  • 宽屏与窄容器检查换行、裁切及滚动;默认单页修改检查邻页无变化。联动应用壳时同标签切页并返回,检查恢复。
  • 保存发布回读、实际截图及恢复证据;说明未实测尺寸或状态,不能把生成成功当视觉验收。用户明确要求恢复时执行恢复,不继续叠加风格。

Bundled files

The model reads these on demand while the skill is loaded. They are exposed as readable files and are never executed.

Frequently asked questions

What does the Yida Data Manage Ui AI skill do?

宜搭数据管理页美化方法:从用户目标推导线条、容器、页签、操作层级、表头、配色、列强调和布局变化,定位实际 token 与局部 CSS,自由组合而非套固定风格。用于当前数据管理页换风格、突出操作或关键列、修复视觉异常,以及已授权的自定义管理页;保留数据、权限和业务动作。

Why use Yida Data Manage Ui on TypingMind?

Because you install it once and use it with any model. Yida Data Manage Ui is plain Markdown rather than provider-specific code, so the same skill runs on GPT-5, Claude, Gemini, Grok, or a local model — and you can switch model mid-chat without it breaking. TypingMind runs on your own API keys, so you pay providers directly instead of a per-seat subscription, and your skills and chats stay in your own storage.

How do I install Yida Data Manage Ui in TypingMind?

Open Plugins → Skills → Install from GitHub in TypingMind and paste https://github.com/openyida/openyida/tree/main/yida-skills/skills/yida-data-manage-ui. TypingMind reads its SKILL.md and bundles its files and installs it as a skill you can enable per chat.

Which AI models can use Yida Data Manage Ui?

Any model you connect in TypingMind. AI skills are plain Markdown instructions rather than provider-specific code, so GPT, Claude, Gemini, Grok, and local models can all load this skill when a request matches it.

How many AI models can I use with Yida Data Manage Ui?

As many as you like. As long as a model supports skills, you can use Yida Data Manage Ui with it — GPT, Claude, Gemini, Grok, DeepSeek, Mistral, Llama and more — all on TypingMind with your own API keys.

Is the Yida Data Manage Ui AI skill free?

Yes. It is published on GitHub by openyida under the MIT license. You only pay your own AI provider for the tokens you use.

What are AI skills?

An AI skill is a reusable instruction bundle that teaches an AI model how to do one specific task. It follows the open Agent Skills format: a SKILL.md file with a name and description, plus any scripts, templates or reference files the model may need. The model reads the instructions only when your request matches the skill, so an installed skill costs nothing until it is used.

How are AI skills different from plugins or MCP servers?

A plugin or MCP server gives a model new tools to call — code that runs somewhere and returns a result. An AI skill gives the model knowledge and process instead: how to approach a task, which steps to follow, what good output looks like. Skills are plain Markdown, so they need no server, no API key and no runtime, and they work with any model.

View all

Set up your own AI workspace now

Get notified about new features and future giveaways by subscribing to our newsletter 👇