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.
用于 Dig 网页与产品界面的设计系统 skill。Use when the user mentions dig-ui, dig-ui-skill, Dig UI, catalog/wise, catalog/dig, CSS token, layout recipe, block library, dashboard, runtime, marketing, docs, or…
$ npx skills add originaleric/dig-ui-skill --skill dig-ui -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install originaleric/dig-ui-skill dig-ui --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
Claude Code skills documentation · loads skills from .claude/skills/
Install the "dig-ui" agent skill from https://github.com/originaleric/dig-ui-skill/tree/main into .claude/skills/dig-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "dig-ui", 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.
$ npx skills add originaleric/dig-ui-skill --skill dig-ui -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install originaleric/dig-ui-skill dig-ui --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "dig-ui" agent skill from https://github.com/originaleric/dig-ui-skill/tree/main into .agents/skills/dig-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "dig-ui", 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 originaleric/dig-ui-skill --skill dig-ui -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install originaleric/dig-ui-skill dig-ui --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "dig-ui" agent skill from https://github.com/originaleric/dig-ui-skill/tree/main into .cursor/skills/dig-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "dig-ui", 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.
$ npx skills add originaleric/dig-ui-skill --skill dig-ui -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install originaleric/dig-ui-skill dig-ui --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "dig-ui" agent skill from https://github.com/originaleric/dig-ui-skill/tree/main into .gemini/skills/dig-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "dig-ui", 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 originaleric/dig-ui-skill dig-uiInstalls 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 originaleric/dig-ui-skill --skill dig-ui -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "dig-ui" agent skill from https://github.com/originaleric/dig-ui-skill/tree/main into .github/skills/dig-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "dig-ui", 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 originaleric/dig-ui-skill --skill dig-ui -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install originaleric/dig-ui-skill dig-ui --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "dig-ui" agent skill from https://github.com/originaleric/dig-ui-skill/tree/main into .opencode/skills/dig-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "dig-ui", 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.
dig-ui用于 Dig 网页与产品界面的设计系统 skill。Use when the user mentions dig-ui, dig-ui-skill, Dig UI, catalog/wise, catalog/dig, CSS token, layout recipe, block library, dashboard, runtime, marketing, docs, or…
Dig UI is an agent skill from originaleric/dig-ui-skill. 用于 Dig 网页与产品界面的设计系统 skill。Use when the user mentions dig-ui, dig-ui-skill, Dig UI, catalog/wise, catalog/dig, CSS token, layout recipe, block library, dashboard, runtime, marketing, docs, or frontend UI review. Read global-rules.md first, then local rules and local extensions when present.
Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 586 other files, including reference files and assets (for example `INSTALL.md`, `INSTALL.zh-CN.md` and `OPEN_SOURCE_REVIEW.zh-CN.md`).
It sits in Frontend & Design, covering Frontend development. The repository describes itself as: Built by Dig:An agent-readable, prompt-as-code design system for Codex, Cursor, and Claude Code: catalogs, layouts, blocks, workflows, and personal UI customization. The licence is Apache-2.0.
7 steps, taken from the step headings in SKILL.md.
Read from SKILL.md and the folder at commit a4b9a32. 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 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.
Dig UI loads about 1.1k tokens when it runs, and up to ~1.7M if it reads all its reference files. Until then it costs about 74 tokens; SKILL.md has 319 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 originaleric/dig-ui-skill at commit a4b9a32, republished under its Apache-2.0 licence (© originaleric). 319 words, ~1,128 tokens.
.claude/skills/dig-ui/SKILL.md (or your agent's skills folder). This skill also uses 582 other files; get the full folder from GitHub.Dig UI 是 AI 可执行的产品界面设计系统。它通过 dig-read + workflow + layout + catalog + block + token + global/local rules + render ops 帮助 agent 生成、审查和维护稳定的产品 UI。
references/local/palettes/ 或 ~/.config/dig-ui-skill/palettes/(当用户指定本地/custom palette 时)references/local/styles/ 或 ~/.config/dig-ui-skill/styles/(当用户指定本地/custom style 时)references/global-rules.local.md(若存在)references/local/(若存在,用于项目级 layout / block 扩展)references/global-rules.mdreferences/dig-read.md、references/anti-tells.md、references/preflight.md、references/workflows/references/layouts/、references/catalogs/、references/blocks/references/shared/ 中的 manifest、token、primitive若用户明确说「不使用 global / skip global / no global rules」,本次任务跳过 global rules 和 local global rules,但仍可使用 layout、catalog、block、primitive。
对页面生成或 UI review 任务,先读取 references/dig-read.md,再用一句话确认:
<task type> page for <target user / job>,
using <layout> layout + <catalog> catalog.然后给出四个 dials:
INFORMATION_DENSITYBRAND_EXPRESSIVENESSINTERACTION_ENERGYOPERATIONAL_CRITICALITY如果任务明显属于 review、redesign、execution 或 image-reference 场景,同时读取 references/workflows/ 中的对应 workflow。
先读 references/layouts/README.md,再读取最匹配的 layout 文件。layout 负责信息结构、slots、响应式顺序和 QA notes,不负责品牌色。
若存在 references/local/manifest.yaml 或 references/local/layouts/,优先判断是否有项目级 layout 更适合。local layout 应使用 extends,避免静默复制官方 layout。
写 CSS 前必须先选一个 catalog。用户明确指定时用户优先;未指定时按 layout 的 default_catalog 和 recommended_catalogs 推断。
常用 catalog:
dig:Dig 默认产品语言mono:克制、灰阶、高密调试editorial:叙事、发布、品牌表达wise:移动优先、消费级 fintechapple:高端产品发布、系统原生感paletteXX:以整体网站配色为入口的 color palette catalog;当用户指定 mood、配色组合或整体色彩方向而非品牌时使用style-catalog:以完整视觉语法为入口;当用户指定非品牌风格、截图风格、材质/形态/插画/组件气质时使用,例如 cozy-arcade、quant-signal-consolecustompalette:用户通过 Palette Lab 导入到 ~/.config/dig-ui-skill/palettes/,并可同步到 references/local/palettes/ 的本地 palette;只属于用户资产,不写入内置 catalogcustomstyle:用户通过 Style Lab 导入到 ~/.config/dig-ui-skill/styles/,并可同步到 references/local/styles/ 的本地 style;只属于用户资产,不写入内置 catalog用户明确指定本地 style 资产或复用已导出的风格时使用 customstyle。同一页面或同一组组件不要混用多个 base catalog。
当决定使用内置 style catalog 时,读取 references/catalogs/styles/README.md 后再选择具体 style。它按任务、avoid 边界与 render archetype 路由,避免仅因颜色或标题气质相似而误选 style。
涉及常见组件或业务模块时,读取 references/blocks/README.md 和相关 block 文件。优先使用 block 协议,不临时发明重复结构。
常见 blocks:
若存在 references/local/blocks/,先判断项目级 block 是否更适合。
实现样式时先定义 token、font、type scale、spacing、radius、shadow、background/grid 行为。组件样式引用 --dig-* token 或项目主题变量,不写死 dark/light hex。
交付前读取 references/anti-tells.md,过滤 AI 常见坏味道,尤其是:
交付前读取 references/preflight.md。如果修改了 catalog 或 render 相关资产,还应运行或建议运行:
dig-ui-skill render all
dig-ui-skill validate rendersrender 只用于 catalog 视觉维护预览,不是第二套规范;layout 和 block 以 Markdown 协议为准。若 render 与 markdown 冲突,以 markdown / manifest 为准。
当用户明确要求“记住”、“沉淀”或“加入我的 Dig 本地规则”时,当前 Host Agent 必须读取 references/local-rules-builder.md,将偏好归类、去重并写入用户配置中心:
~/.config/dig-ui-skill/global-rules.local.mdreferences/global-rules.md,也不要编辑项目仓库中的 ignored local 文件。local add --no-sync 写入后再同步:用户未指定范围时执行 dig-ui-skill local sync --all --from-config,仅同步已安装的受支持 Host Agent;指定范围时只同步该目标并显式使用 --from-config。runtime 历史上既像 page type 又像视觉皮肤。新规则中优先使用:
task_type: execution 表示运行、调试、观测类任务catalog: runtime 仅在未来作为视觉皮肤落地时使用保留旧的 page_type: runtime 只是为了兼容既有 layout 与历史资产。
© originaleric, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
SKILL.md and 582 other files (references, assets) in the repository root of originaleric/dig-ui-skill.
Open the folder on GitHubat commit a4b9a32
Dig UI 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 |
|---|---|---|---|---|---|---|
| Dig UI this skilloriginaleric/dig-ui-skill | 232 | — | ~1.1k | Automated safety check: Pass | Apache-2.0 | |
| 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 | 7 repos | ~1.6k | Automated safety check: Pass | None | |
| GSAP in Vue, Nuxt and Sveltegreensock/gsap-skills | 16k | 4 repos | ~2.6k | Automated safety check: Pass | MIT | |
| Svelte Core Best Practicesrilldata/rill | 2.9k | 4 repos | ~1.8k | Automated safety check: Pass | Apache-2.0 | |
| Vuetify Playgroundvuetifyjs/vuetify | 41k | — | ~730 | Automated safety check: Pass | Custom licence |
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.
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.
greensock/gsap-skills
Shows how to use GSAP in Vue, Nuxt, Svelte and other lifecycle-based frameworks: create after mount, scope selectors to the component, and revert on unmount.
rilldata/rill
Rules for writing idiomatic Svelte 5 code: when to reach for runes like state, derived and effect, and how to handle props, attachments and bindings.
vuetifyjs/vuetify
Maintains the Vuetify repo's local Playground.vue so contributors get a realistic reproduction and a short demo they can paste into a pull request description.
tabler/tabler
Starts the right Tabler dev server, keeps it from clashing with builds and verifies changes in the browser before a page or component is handed back.
Categories
用于 Dig 网页与产品界面的设计系统 skill。Use when the user mentions dig-ui, dig-ui-skill, Dig UI, catalog/wise, catalog/dig, CSS token, layout recipe, block library, dashboard, runtime, marketing, docs, or…. Dig UI is an agent skill from originaleric/dig-ui-skill. 用于 Dig 网页与产品界面的设计系统 skill。Use when the user mentions dig-ui, dig-ui-skill, Dig UI, catalog/wise, catalog/dig, CSS token, layout recipe, block library, dashboard, runtime, marketing, docs, or frontend UI review.
Dig UI fits situations like: the user mentions dig-ui; frontend UI review.
Run `npx skills add originaleric/dig-ui-skill --skill dig-ui -a claude-code`. Or copy the skill folder (the originaleric/dig-ui-skill repository) into .claude/skills/dig-ui in your project. Claude Code loads it when a task matches its description.
Run `npx skills add originaleric/dig-ui-skill --skill dig-ui -a codex`. Or copy the skill folder (the originaleric/dig-ui-skill repository) into .agents/skills/dig-ui 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 originaleric/dig-ui-skill --skill dig-ui -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/dig-ui, .gemini/skills/dig-ui, .github/skills/dig-ui and .opencode/skills/dig-ui in your project.
SKILL.md names no scripts, command-line tools or credentials: Dig UI 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.
Dig UI is published under the Apache-2.0 licence (from the LICENSE file in the skill folder). It allows redistribution, so the full SKILL.md is shown on this page.
About 1.1k tokens (SKILL.md is roughly 4.5k 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 1.7M tokens, read only when the agent opens those files.
Skills that share tags, products or a category with Dig UI: React Router Development (remix-run/react-router, 57k stars), React UI State Patterns (ChrisWiles/claude-code-showcase, 6.1k stars), GSAP in Vue, Nuxt and Svelte (greensock/gsap-skills, 16k stars) and Svelte Core Best Practices (rilldata/rill, 2.9k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
originaleric (a GitHub user) maintains it in originaleric/dig-ui-skill, which has 232 GitHub stars. The repository was last updated on September 7, 2026.
Source: originaleric/dig-ui-skill on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.