Agent skill

Yida Density

自定义页面信息密度设计规范。提供紧凑、舒适、宽松三种模式、切换 UI 和响应式降级；平台 JSX 组件页面的 didMount/this.utils.isMobile 仅作存量维护示例。

Install Yida Density

skills CLI

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

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

GitHub CLI

$ gh skill install openyida/openyida yida-density --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-density .claude/skills/yida-density && 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/

Paste into Claude Code

Install the "yida-density" agent skill from https://github.com/openyida/openyida/tree/main/yida-skills/skills/yida-density into .claude/skills/yida-density/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "yida-density", 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

$skill-installer install https://github.com/openyida/openyida/tree/main/yida-skills/skills/yida-density

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

skills CLI

$ npx skills add openyida/openyida --skill yida-density -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install openyida/openyida yida-density --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/openyida/openyida.git skills-src && mkdir -p .agents/skills && cp -r skills-src/yida-skills/skills/yida-density .agents/skills/yida-density && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "yida-density" agent skill from https://github.com/openyida/openyida/tree/main/yida-skills/skills/yida-density into .agents/skills/yida-density/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "yida-density", 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.

skills CLI

$ npx skills add openyida/openyida --skill yida-density -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install openyida/openyida yida-density --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/openyida/openyida.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/yida-skills/skills/yida-density .cursor/skills/yida-density && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "yida-density" agent skill from https://github.com/openyida/openyida/tree/main/yida-skills/skills/yida-density into .cursor/skills/yida-density/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "yida-density", 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

$ gemini skills install https://github.com/openyida/openyida.git --path yida-skills/skills/yida-density

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add openyida/openyida --skill yida-density -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install openyida/openyida yida-density --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/openyida/openyida.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/yida-skills/skills/yida-density .gemini/skills/yida-density && rm -rf skills-src

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

Paste into Gemini CLI

Install the "yida-density" agent skill from https://github.com/openyida/openyida/tree/main/yida-skills/skills/yida-density into .gemini/skills/yida-density/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "yida-density", 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.

GitHub CLI

$ gh skill install openyida/openyida yida-density

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

skills CLI

$ npx skills add openyida/openyida --skill yida-density -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/openyida/openyida.git skills-src && mkdir -p .github/skills && cp -r skills-src/yida-skills/skills/yida-density .github/skills/yida-density && rm -rf skills-src

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

Paste into GitHub Copilot

Install the "yida-density" agent skill from https://github.com/openyida/openyida/tree/main/yida-skills/skills/yida-density into .github/skills/yida-density/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "yida-density", 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.

skills CLI

$ npx skills add openyida/openyida --skill yida-density -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install openyida/openyida yida-density --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/openyida/openyida.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/yida-skills/skills/yida-density .opencode/skills/yida-density && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "yida-density" agent skill from https://github.com/openyida/openyida/tree/main/yida-skills/skills/yida-density into .opencode/skills/yida-density/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "yida-density", 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-density
GitHub stars: 220
Token cost: ~971 tokens
SKILL.md length: 168 words
Files: 1
Skills in repo: 58
Repo updated: Sep 30, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

Tasks that involve React components
SKILL.md covers 核心定位, 严格要求, 场景选择 and 密度 token, plus 6 more sections
Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Yida Density is an agent skill from openyida/openyida. 自定义页面信息密度设计规范。提供紧凑、舒适、宽松三种模式、切换 UI 和响应式降级；平台 JSX 组件页面的 didMount/this.utils.isMobile 仅作存量维护示例。

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

What it can do on your machine

Read from SKILL.md and the folder at commit 3dd4693. 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).
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 Density loads about 971 tokens when it runs. Until then it costs about 27 tokens; SKILL.md has 168 words of instructions outside code blocks.

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

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 3dd4693, republished under its MIT licence (© openyida). 168 words, ~971 tokens.

Download SKILL.mdSave it as .claude/skills/yida-density/SKILL.md (or your agent's skills folder).

name: yida-density
description: 自定义页面信息密度设计规范。提供紧凑、舒适、宽松三种模式、切换 UI 和响应式降级；平台 JSX 组件页面的 didMount/this.utils.isMobile 仅作存量维护示例。

宜搭自定义页面信息密度设计规范

核心定位

信息密度是页面密度配置。DENSITY_CONFIG、场景选择、移动端降级和无障碍要求对自定义页面都适用；实现示例使用 React hooks。

维护已检测到的 .oyd.jsx / .oyb.jsx / renderJsx / 平台 Jsx 组件页面时，才参考 didMount / this.utils.isMobile() 的平台 JSX 组件写法。

严格要求

每次生成列表/表格类自定义页面时都考虑密度，无需用户主动提及。
PC 列表/表格默认 comfortable，可提供紧凑/舒适切换。
移动端固定 spacious，不显示密度切换 UI。
固定展示大屏使用 spacious，不显示密度切换 UI。
表单填写页交原生表单；若只讨论密度，固定 comfortable，不提供切换。
间距、字号、行高、控件高度统一从密度 token 派生，避免散落魔法值。
密度状态是页面本地状态，不依赖跨会话 memory。

场景选择

场景	默认密度	切换 UI
专业后台、运营列表、大数据表格	`compact` 或 `comfortable`	PC 提供
常规任务管理、审批列表	`comfortable`	PC 提供
引导页、展示页、固定大屏	`spacious`	不提供
移动端	`spacious`	不提供
原生表单填写	`comfortable`	不提供

用户明确说“紧凑/密集/一屏更多”时选 compact；说“宽松/大字体/更易读”时选 spacious。用户未指定时按页面类型和设备选择。

密度 token

同一页面可以把数值映射成 CSS variables、antd token 或 inline style；关键是所有相关组件都消费同一个配置。

javascript

const DENSITY_CONFIG = {
  compact: {
    cardPadding: '8px 12px',
    fontSize: 12,
    lineHeight: 1.4,
    tableRowHeight: 32,
    controlHeight: 24,
    sectionGap: 8,
  },
  comfortable: {
    cardPadding: '16px 20px',
    fontSize: 14,
    lineHeight: 1.6,
    tableRowHeight: 48,
    controlHeight: 32,
    sectionGap: 16,
  },
  spacious: {
    cardPadding: '24px 28px',
    fontSize: 16,
    lineHeight: 1.8,
    tableRowHeight: 64,
    controlHeight: 40,
    sectionGap: 24,
  },
};

React Hooks 实现

在 Canvas 中用 matchMedia + hooks 管设备变化。不要在首次渲染时读一次宽度后永不更新。

jsx

import React, { useEffect, useMemo, useState } from 'react';

function useIsMobile() {
  const query = '(max-width: 767px)';
  const [isMobile, setIsMobile] = useState(
    () => window.matchMedia(query).matches,
  );

  useEffect(() => {
    const media = window.matchMedia(query);
    const handleChange = (event) => setIsMobile(event.matches);
    media.addEventListener('change', handleChange);
    return () => media.removeEventListener('change', handleChange);
  }, []);

  return isMobile;
}

function DensityAwareList() {
  const isMobile = useIsMobile();
  const [desktopDensity, setDesktopDensity] = useState('comfortable');
  const density = isMobile ? 'spacious' : desktopDensity;
  const tokens = useMemo(() => DENSITY_CONFIG[density], [density]);

  return (
    <section style={{ '--row-height': `${tokens.tableRowHeight}px` }}>
      {!isMobile && (
        <DensitySwitch value={desktopDensity} onChange={setDesktopDensity} />
      )}
      <BusinessTable density={density} tokens={tokens} />
    </section>
  );
}

如果目标使用 antd Table / ConfigProvider，把密度映射到 size 和组件 token，同时保留业务级 DENSITY_CONFIG 作为唯一来源；不要一部分走 size="small"、另一部分继续写固定 padding。

响应式纪律

移动端自动使用 spacious，回到桌面后恢复用户先前选择的桌面密度。
切换密度不能清空筛选、分页、选中行和数据。
触控目标仍需满足可点击尺寸；compact 只用于桌面高密度场景。
系统字体缩放、长中文、英文和大数值下均不得截断关键字段。
虚拟表格行高、骨架屏行高和真实行高必须使用同一密度 token。

平台 JSX 组件维护注意事项

已有普通自定义页面可以继续使用：

javascript

export function didMount() {
  if (this.utils.isMobile()) {
    _customState.density = 'spacious';
    this.forceUpdate();
  }
}

这段只用于平台 JSX 组件页面或 native 页面维护。React hooks 实现不得使用 didMount、this.utils.isMobile()、_customState 或 forceUpdate；应使用上面的 matchMedia hook 并 cleanup。

现有普通页面只能作为 native 兼容参考，不能据此改变当前页面的实现事实。

异常处理

场景	处理
切换后局部样式没变	检查是否仍有硬编码 padding/height，统一消费 token
移动端还显示切换 UI	由 `isMobile` 派生 UI 和最终 density，不只改样式
回桌面后丢失用户选择	分开保存 `desktopDensity` 与派生 `density`
字体放大后内容裁切	避免固定内容高度，允许行高/单元格扩展
配置缺失	回退 `comfortable`，同时暴露开发期错误

写操作边界

本技能负责生成规范，不自动授权发布。真实发布前必须展示代码/配置摘要并获得用户确认；发布后提供页面 URL 与 PC/移动端验证结果。

验收清单

页面类型与默认密度匹配。
Canvas 示例优先；普通页生命周期只出现在 legacy 小节。
PC 切换真实改变表格/卡片/控件密度，不丢业务状态。
移动端固定 spacious 且隐藏切换 UI。
所有密度相关值来自统一 token。
matchMedia 监听或其他响应式副作用有 cleanup。

Files

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

Open the folder on GitHubat commit 3dd4693

Compare with similar skills

Yida Density 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 Density compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Yida Density this skillopenyida/openyida	220	—	~971	Automated safety check: Pass	MIT	8 days ago
Web Artifacts Builderanthropics/skills	180k	41 repos	~769	Automated safety check: Pass	Apache-2.0	3 days ago
React Router Developmentremix-run/react-router	57k	1 repos	~1.5k	Automated safety check: Pass	MIT	yesterday
React UI State PatternsChrisWiles/claude-code-showcase	6.1k	8 repos	~1.6k	Automated safety check: Pass	None	9 mo ago
Chakra UI v3 Builderchakra-ui/chakra-ui	41k	—	~3.1k	Automated safety check: Pass	MIT	yesterday
React Component PerformanceDimillian/Skills	4k	5 repos	~1.2k	Automated safety check: Pass	MIT	6 mo ago

Similar skills

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
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.
57k GitHub starsUsed in 1 repo~1.5k tokens
Frontend & DesignAuto-check passed
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.
6.1k GitHub starsUsed in 8 repos~1.6k tokens
Frontend & DesignAuto-check passed
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.
41k GitHub stars~3.1k tokensUpdated yesterday
Frontend & DesignAuto-check passed
React Component Performance
Dimillian/Skills
Analyze and optimize React component performance issues (slow renders, re-render thrash, laggy lists, expensive computations).
4k GitHub starsUsed in 5 repos~1.2k tokens
Frontend & DesignAuto-check passed
React View Transitions Guide
vercel-labs/next-beats
Official
Guides implementing animated page and state transitions in React with the native View Transition API, covering shared elements, list reorders and directional navigation.
167 GitHub starsUsed in 10 repos~3.1k tokens
Frontend & DesignAuto-check passed

Questions about Yida Density

What does Yida Density do?

自定义页面信息密度设计规范。提供紧凑、舒适、宽松三种模式、切换 UI 和响应式降级；平台 JSX 组件页面的 didMount/this.utils.isMobile 仅作存量维护示例。. Yida Density is an agent skill from openyida/openyida.

When should I use Yida Density?

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

How do I install Yida Density in Claude Code?

Run `npx skills add openyida/openyida --skill yida-density -a claude-code`. Or copy the skill folder (yida-skills/skills/yida-density in openyida/openyida) into .claude/skills/yida-density in your project. Claude Code loads it when a task matches its description.

How do I install Yida Density in Codex?

Run `npx skills add openyida/openyida --skill yida-density -a codex`. Or copy the skill folder (yida-skills/skills/yida-density in openyida/openyida) into .agents/skills/yida-density in your project. Codex loads it when a task matches its description.

Can I use Yida Density 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-density -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-density, .gemini/skills/yida-density, .github/skills/yida-density and .opencode/skills/yida-density in your project.

What does Yida Density need to run?

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

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

Yida Density 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 Density use?

About 971 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 Density?

Skills that share tags, products or a category with Yida Density: Web Artifacts Builder (anthropics/skills, 180k stars), React Router Development (remix-run/react-router, 57k stars), React UI State Patterns (ChrisWiles/claude-code-showcase, 6.1k stars) and Chakra UI v3 Builder (chakra-ui/chakra-ui, 41k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Yida Density?

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 September 30, 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.

Install Yida Density

Facts

At a glance

What it does

When your agent uses it

Example prompts

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

宜搭自定义页面信息密度设计规范

核心定位

严格要求

场景选择

密度 token

React Hooks 实现

响应式纪律

平台 JSX 组件维护注意事项

异常处理

写操作边界

验收清单

Files

Compare with similar skills

Similar skills

More from openyida/openyida

Related

Questions about Yida Density