Agent skill

Oryxos Admin UI

by oryx-labs in oryx-labs/oryxos

生成或扩展 OryxOS 的 Web 管理台(web manager)前端——Vue 3 + Vite 单页应用,视觉与官网首页 (website/,VitePress)完全同源:深色底 + 橙色主色、Inter/JetBrains Mono。内置这套设计 token、 工程约定(base '/admin/'、产物落 oryxos-web static/admin、SPA…

Apache-2.0Auto-check passedFrontend & Design

Install Oryxos Admin UI

skills CLI
$ npx skills add oryx-labs/oryxos --skill oryxos-admin-ui -a claude-code

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

GitHub CLI
$ gh skill install oryx-labs/oryxos oryxos-admin-ui --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/oryx-labs/oryxos.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/oryxos-admin-ui .claude/skills/oryxos-admin-ui && 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
oryxos-admin-ui
GitHub stars
186
Token cost
~913 tokens
SKILL.md length
183 words
Files
1
Skills in repo
3
Repo updated
First seen
Licence
Apache-2.0

At a glance

生成或扩展 OryxOS 的 Web 管理台(web manager)前端——Vue 3 + Vite 单页应用,视觉与官网首页 (website/,VitePress)完全同源:深色底 + 橙色主色、Inter/JetBrains Mono。内置这套设计 token、 工程约定(base '/admin/'、产物落 oryxos-web static/admin、SPA…

  • Works in 4 steps: 读本 skill 的 token 与约定;若… → 按需求生成/新增页面(组件 + 路由 + 调用的 REST 端点)。加页时(如… → 确保 vite.config 的 base/outDir 正确、npm run… → …
  • Tasks that involve Static sites and blogs
  • SKILL.md covers 何时用 / 不用, 一、设计 token(唯一风格来源,值取自…, 二、工程约定(决定它能不能被 Spring 托管) and 三、布局与组件规范, plus 2 more sections
  • Calls npm

What it does

Oryxos Admin UI is an agent skill from oryx-labs/oryxos. 生成或扩展 OryxOS 的 Web 管理台(web manager)前端——Vue 3 + Vite 单页应用,视觉与官网首页 (website/,VitePress)完全同源:深色底 + 橙色主色、Inter/JetBrains Mono。内置这套设计 token、 工程约定(base '/admin/'、产物落 oryxos-web static/admin、SPA 路径回落)、组件与三态规范、验收清单。 当用户要「做/生成管理台前端、加一页 admin 页面(如 Agent 管理页)、让管理台跟首页风格一致、 扩展 /admin 界面」时使用。仅生成只读或调既有 REST 的前端,不写后端、不自创配色。

Its SKILL.md is about 910 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 Static sites and blogs. It works with VitePress, Vite, Vue.js and JetBrains IDEs. The repository describes itself as: OryxOS is an open-source Distributed AI Agent OS. The licence is Apache-2.0.

When your agent uses it

  • Tasks that involve Static sites and blogs

Example prompts

  • “/admin/”
  • “/oryxos-admin-ui”

Workflow steps

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

  1. 读本 skill 的 token 与约定;若 oryxos-web/src/main/frontend/ 已存在,先看它现有结构、复用 tokens.css 与组件,不另起一套。
  2. 按需求生成/新增页面(组件 + 路由 + 调用的 REST 端点)。加页时(如 30 节 Agent 管理):列表用 GET,新建/编辑用表单调 POST/PUT,删除二次确认调 DELETE,全部复用同一套 token 与表格/表单组件。
  3. 确保 vite.config 的 base/outDir 正确、npm run build 产物落在 static/admin/。
  4. 过一遍验收清单。

What it can do on your machine

Read from SKILL.md and the folder at commit 6f86810. 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

    Shell commands in SKILL.md call:

    • npm

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npm, which can reach the network depending on how they are called.

    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

Oryxos Admin UI loads about 913 tokens when it runs. Until then it costs about 81 tokens; SKILL.md has 183 words of instructions outside code blocks.

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

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 oryx-labs/oryxos at commit 6f86810, republished under its Apache-2.0 licence (© oryx-labs). 183 words, ~913 tokens.

Download SKILL.mdSave it as .claude/skills/oryxos-admin-ui/SKILL.md (or your agent's skills folder).
name
oryxos-admin-ui
description
生成或扩展 OryxOS 的 Web 管理台(web manager)前端——Vue 3 + Vite 单页应用,视觉与官网首页 (website/,VitePress)完全同源:深色底 + 橙色主色、Inter/JetBrains Mono。内置这套设计 token、 工程约定(base '/admin/'、产物落 oryxos-web static/admin、SPA 路径回落)、组件与三态规范、验收清单。 当用户要「做/生成管理台前端、加一页 admin 页面(如 Agent 管理页)、让管理台跟首页风格一致、 扩展 /admin 界面」时使用。仅生成只读或调既有 REST 的前端,不写后端、不自创配色。
argument-hint
要生成/扩展的页面(如:会话列表页 / Agent 管理页),留空则生成整套只读管理台

OryxOS 管理台前端生成规范

本 skill 是 OryxOS Web 管理台(/admin)前端的唯一风格与工程口径来源。生成或扩展管理台页面时读它、照它做,保证每次产出跟官网首页同一个气质、可复现、能被 Spring 直接托管。

何时用 / 不用

  • 用:生成整套只读管理台(26 节)、给管理台加页(30 节的"Agent 管理"页:列表 + 新建表单 + 编辑/删除)、调整管理台样式使其与首页一致。
  • 不用:后端 REST(那是 spec-kit 的 Java 管道)、认证鉴权(核心阶段内网假设)、脱离下方 token 的自创配色。

一、设计 token(唯一风格来源,值取自 website/.vitepress/theme/custom.css,一个字别自创)

深色主题 + 橙色强调,跟首页完全一致。生成的 Vue 工程里放一份 src/styles/tokens.css 并全局引入:

css
:root {
  /* 背景层次 */
  --bg:        #000000;   /* 页面底 */
  --bg-soft:   #111111;   /* 卡片 / 面板 */
  --bg-mute:   #1a1a1a;   /* 悬浮 / 选中块 */
  --border:    #222222;   /* 分隔线 / 边框 */
  /* 主色(橙)——仅用于强调:激活项、链接、数值高亮、主按钮。不铺大面积 */
  --brand-1:   #c2550a;   /* 深 */
  --brand-2:   #ea6a00;   /* hover / 强调 */
  --brand:     #f97316;   /* 主 */
  --brand-soft: rgba(249, 115, 22, 0.12);
  /* 文字 */
  --text-1:    #f5f5f5;   /* 主 */
  --text-2:    #a3a3a3;   /* 次 */
  --text-3:    #666666;   /* 弱 / 占位 */
  /* 状态 */
  --ok:        #22c55e;   /* 成功 */
  --err:       #ef4444;   /* 失败 */
  --warn:      #f97316;   /* 警告(复用橙) */
  /* 字体 */
  --font-base: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace;
  /* 形状 */
  --radius:    5px;       /* 小圆角,克制 */
}
  • 正文用 --font-base;ID / session_id / JSON / cron / token 数这类机读值一律 --font-mono。
  • 主色只点睛,不做大色块背景;整体克制、留白足。

二、工程约定(决定它能不能被 Spring 托管)

  • 技术栈:Vue 3 + Vite(跟 website/ 同生态;管理台是 app,用普通 Vue SPA,不用 VitePress)。源码在 oryxos-web/src/main/frontend/。
  • base 与产物:vite.config 设 base: '/admin/'、build.outDir 指到 ../resources/static/admin(即 oryxos-web/src/main/resources/static/admin/),资源用相对路径。
  • SPA 路径回落:Spring 对 /admin/** 未命中路径回落 admin/index.html;GET /api/v1/** 不受影响(后端接线,提醒 plan 处理)。
  • 数据来源:只调 /api/v1/**。只读页调 GET(/sessions、/profiles、/tools、/memory、/info);管理页(30 节)调 POST/PUT/DELETE /agents。开发期 npm run dev 起热更、代理 /api 到 :8080;发布形态是"打进 fat JAR、一个进程托管一切"。
  • 错误展示:后端统一 ErrorBody(errorCode/message/timestamp);页面出错就把 message 显示出来,不吞、不弹裸堆栈。

三、布局与组件规范

  • 骨架:左侧竖直深色导航(顶部 /logo.svg + "OryxOS 管理台")+ 右侧内容区。
  • 导航项(只读版五项):会话列表、Profile 列表、Tool 列表、长期记忆、运行状态。
  • 表格:深色底、行分隔 --border;机读列等宽字体;长文本可折叠。
  • 状态:小圆点 / 标签——成功 --ok、失败 --err、警告 --warn;激活导航项用 --brand 左边条或文字色。
  • 三态必备:加载中(骨架/spinner)、空数据(--text-3 占位文案)、错误(红条 + message)——任何一页都不许白屏。
  • 响应式:窄屏导航收起为顶部抽屉;表格横向可滚动,不撑破布局。

四、生成 / 扩展流程

  1. 读本 skill 的 token 与约定;若 oryxos-web/src/main/frontend/ 已存在,先看它现有结构、复用 tokens.css 与组件,不另起一套。
  2. 按需求生成/新增页面(组件 + 路由 + 调用的 REST 端点)。加页时(如 30 节 Agent 管理):列表用 GET,新建/编辑用表单调 POST/PUT,删除二次确认调 DELETE,全部复用同一套 token 与表格/表单组件。
  3. 确保 vite.config 的 base/outDir 正确、npm run build 产物落在 static/admin/。
  4. 过一遍验收清单。

五、验收清单(做完自查)

  • 配色/字体/圆角全部来自上面的 token,无自创色值;主色只用于强调。
  • 每页三态(加载/空/错)都有,无白屏;错误展示后端 message。
  • 只调 /api/v1/**;只读页无写操作入口(26 节);管理页写操作有二次确认(30 节)。
  • npm run build 产物在 oryxos-web/src/main/resources/static/admin/,base: '/admin/',刷新子路由不 404(依赖 Spring 回落)。
  • 窄屏可用;视觉跟 http://localhost:8080(首页)并排看是同一套设计语言。

不要为了"更漂亮"引入外部 UI skill 或大型组件库来盖过这套 token——一致性 > 花哨。确需组件库时选无主题/可完全被 token 覆盖的(headless)。

© oryx-labs, 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

Files

Just SKILL.md in .claude/skills/oryxos-admin-ui of oryx-labs/oryxos.

Open the folder on GitHubat commit 6f86810

Compare with similar skills

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

Oryxos Admin UI compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Oryxos Admin UI this skilloryx-labs/oryxos186—~913Automated safety check: PassApache-2.0
Vitepress Skilldskilld-dev/vue-ecosystem-skills181—~1.7kAutomated safety check: PassMIT
VitepressJetBrains/skills3667 repos~798Automated safety check: PassNone
Create Docsvictorgarciaesgi/nuxt-typed-router4132 repos~2.8kAutomated safety check: PassMIT
Nuxt UImegaarmos/vue-spring-bottom-sheet1411 repos~2.5kAutomated safety check: PassMIT
Vuetify Skilldlogue/vite-vuetify-ts-starter1811 repos~1.9kAutomated safety check: PassMIT

Similar skills

  • Vitepress Skilld

    skilld-dev/vue-ecosystem-skills

    A skill your agent uses when writing, configuring, or debugging code that imports "vitepress", when running vitepress CLI commands, editing .vitepress/config or theme files, tuning markdown or…

    181 GitHub stars~1.7k tokensUpdated 17 days ago
    Frontend & DesignAuto-check passed
  • Vitepress

    JetBrains/skills

    Official

    VitePress static site generator powered by Vite and Vue. An agent skill from JetBrains/skills.

    366 GitHub starsUsed in 7 repos~798 tokens
    Frontend & DesignAuto-check passed
  • Create Docs

    victorgarciaesgi/nuxt-typed-router

    Create complete documentation sites for projects. An agent skill from victorgarciaesgi/nuxt-typed-router.

    413 GitHub starsUsed in 2 repos~2.8k tokens
    Frontend & DesignAuto-check passed
  • Nuxt UI

    megaarmos/vue-spring-bottom-sheet

    Build UIs with @nuxt/ui v4 — 125+ accessible Vue components with Tailwind CSS theming.

    141 GitHub starsUsed in 1 repo~2.5k tokens
    Frontend & DesignAuto-check passed
  • Vuetify Skilld

    logue/vite-vuetify-ts-starter

    Vue Material Component Framework. An agent skill from logue/vite-vuetify-ts-starter.

    181 GitHub starsUsed in 1 repo~1.9k tokens
    Frontend & DesignAuto-check passed
  • Glide Setup

    SrivarsanK/Glide

    Zero-error setup guide for AI agents to install and configure @srivarsank/glide visual editor on any React, Vue, Svelte, Astro, or HTML Vite project in one prompt.

    125 GitHub stars~868 tokensUpdated 9 days ago
    Frontend & DesignAuto-check passed

More from oryx-labs/oryxos

  • Oryxos Init

    oryx-labs/oryxos

    初始化 OryxOS(或同类 JDK 21 + Spring Boot 3.x 企业级单体)的工程地基:Maven 多模块骨架、 结构化日志、Actuator + Prometheus 监控、Spring MVC + 虚拟线程、springdoc OpenAPI、 统一响应体与全局异常/错误码、Google 格式 + 阿里编码规约(Spotless + 阿里 P3C +…

    186 GitHub stars~1.6k tokensUpdated today
    Auto-check passed
  • Oryxos Lesson Dev

    oryx-labs/oryxos

    按课件驱动开发 OryxOS 的一节课模块:输入节号(16~31),自动完成备料 → speckit-specify → clarify → plan → tasks(停等确认)→ implement → 节级验收报告,全程施加硬/软两类门禁, 保证产出严格贴合 docs/TechnicalSolution.md 的 OryxOS 设计。当用户说「开发第 N 节 / 实现第 N 节课的模块 /…

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

Questions about Oryxos Admin UI

What does Oryxos Admin UI do?

生成或扩展 OryxOS 的 Web 管理台(web manager)前端——Vue 3 + Vite 单页应用,视觉与官网首页 (website/,VitePress)完全同源:深色底 + 橙色主色、Inter/JetBrains Mono。内置这套设计 token、 工程约定(base '/admin/'、产物落 oryxos-web static/admin、SPA…. Oryxos Admin UI is an agent skill from oryx-labs/oryxos.

When should I use Oryxos Admin UI?

Oryxos Admin UI fits situations like: tasks that involve Static sites and blogs.

How do I install Oryxos Admin UI in Claude Code?

Run `npx skills add oryx-labs/oryxos --skill oryxos-admin-ui -a claude-code`. Or copy the skill folder (.claude/skills/oryxos-admin-ui in oryx-labs/oryxos) into .claude/skills/oryxos-admin-ui in your project. Claude Code loads it when a task matches its description.

How do I install Oryxos Admin UI in Codex?

Run `npx skills add oryx-labs/oryxos --skill oryxos-admin-ui -a codex`. Or copy the skill folder (.claude/skills/oryxos-admin-ui in oryx-labs/oryxos) into .agents/skills/oryxos-admin-ui in your project. Codex loads it when a task matches its description.

Can I use Oryxos Admin UI 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 oryx-labs/oryxos --skill oryxos-admin-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/oryxos-admin-ui, .gemini/skills/oryxos-admin-ui, .github/skills/oryxos-admin-ui and .opencode/skills/oryxos-admin-ui in your project.

What does Oryxos Admin UI need to run?

Going by SKILL.md and its folder, Oryxos Admin UI needs the command-line tools its instructions call (npm).

Does Oryxos Admin UI access the network?

SKILL.md contains no URLs. Its commands use npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Oryxos Admin UI 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 Oryxos Admin UI use?

Oryxos Admin UI is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Oryxos Admin UI use?

About 913 tokens (SKILL.md is roughly 3.7k 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 Oryxos Admin UI?

Skills that share tags, products or a category with Oryxos Admin UI: Vitepress Skilld (skilld-dev/vue-ecosystem-skills, 181 stars), Vitepress (JetBrains/skills, 366 stars), Create Docs (victorgarciaesgi/nuxt-typed-router, 413 stars) and Nuxt UI (megaarmos/vue-spring-bottom-sheet, 141 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Oryxos Admin UI?

oryx-labs (a GitHub organization) maintains it in oryx-labs/oryxos, which has 186 GitHub stars. The repository holds 3 skills in this directory. The repository was last updated on October 9, 2026.

Source: oryx-labs/oryxos on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.