A development guide for an Xray Config UI Editor, a web app for editing Xray-core network configuration. It covers the React interface, its stored data, configuration logic, and Remnawave integration.

Use it to modify the editor interface, update configuration state and Xray settings, change the visual topology view or JSON editor, and connect changes with Remnawave.

It gives the coding agent project-specific rules and locations, reducing guesswork when changing the editor or its configuration handling.

How bropines/xray-config-ui-editor configures Gemini CLI

Reuse

Borrowing it

Nothing to install: this file belongs to bropines/xray-config-ui-editor. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.

Copy the file

curl -O https://raw.githubusercontent.com/bropines/xray-config-ui-editor/main/.gemini/skills/xray-ui-dev/SKILL.md

Clone the repo

git clone --depth 1 https://github.com/bropines/xray-config-ui-editor

Made for: Gemini CLI.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/skills/bropines/xray-config-ui-editor/xray-ui-dev/github.svg)](https://agentmods.dev/skills/bropines/xray-config-ui-editor/xray-ui-dev)

Your own site

<a href="https://agentmods.dev/skills/bropines/xray-config-ui-editor/xray-ui-dev"><img src="https://agentmods.dev/badge/skills/bropines/xray-config-ui-editor/xray-ui-dev/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

Your own site · 80×15

<a href="https://agentmods.dev/skills/bropines/xray-config-ui-editor/xray-ui-dev"><img src="https://agentmods.dev/badge/skills/bropines/xray-config-ui-editor/xray-ui-dev.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 40 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 944 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe. Third-party audits

NVIDIA SkillSpector pass 7 Sept 2026

How audits are shown

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5.1	$0.00040	$0.00944
Opus 5.5	$0.00016	$0.00378
Sonnet 5.5	$0.00008	$0.00189
Haiku 4.5	$0.00004	$0.00094

Measured 2mo ago against content hash 105ad55f8352, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

xray-ui-dev scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 2mo ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

.gemini/skills/xray-ui-dev/SKILL.md · 59 lines

How it starts

The opening of the file, as written. The whole thing — 59 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Xray UI Dev

This skill provides specialized knowledge for developing the Xray Config UI Editor, a static web-based GUI for Xray-core.

Tech Stack & Workflow

Runtime: Bun (use bun install, bun run dev, bun run build)
Frontend: React 19 (TypeScript), Vite 7
Styling: Tailwind CSS 4
State Management: Zustand 5 + Immer (see src/store/configStore.ts)
Icons: Phosphor Icons (@phosphor-icons/react)
Visuals: React Flow (@xyflow/react) for topology visualization
Editor: CodeMirror 6 (@codemirror/*, @platformos/lang-jsonc) for JSON/JSONC editing — not Monaco.

State Management (Zustand)

The application state is managed in src/store/configStore.ts.

Use useConfigStore to access the Xray configuration and Remnawave state.
Most CRUD actions go through the resolveMutableConfig helper (parses rawConfigText, falls back to config) rather than produce directly — see that file's actions for the pattern.
Configuration is persisted in IndexedDB (src/utils/indexedDbStorage.ts) under the xray-config-storage key, with a one-time migration from legacy localStorage. The store exposes hasHydrated/setHasHydrated — gate any code that reads/writes the store on mount behind hasHydrated (see App.tsx), since the IndexedDB read is async.

Common Actions

updateSection(section, data): Replaces a top-level Xray config section.
addItem(section, item): Adds an inbound or outbound.
updateItem(section, index, item): Updates a specific item in a list.
saveToRemnawave(): Pushes the current config to the linked Remnawave profile.

Xray Configuration Logic

Schema: The hand-authored source of truth is Zod, in src/core/xray/schemas/**. A separate JSON Schema (src/utils/config.schema.json, auto-generated by bun run schema:generate from Xray-core's Go sources) backs the raw-JSON editor's Ajv linter — the two can drift, see the plan doc / recent commits before assuming they agree.
Validation: src/core/validators/index.ts (Zod-based; validateFullConfig covers the whole config) and src/core/diagnostics/index.ts (runFullDiagnostics, semantic checks like dangling routing targets). saveToRemnawave() and saveActiveProfile() in configStore.ts both gate on runFullDiagnostics critical findings.
Protocols: Supports VMess, VLESS, Trojan, Shadowsocks, Hysteria2, Wireguard, etc.

Read the full file on GitHub · 59 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

2mo ago Changed · +1 lines 105ad55f8352
2mo ago First seen · 58 lines · 40 tokens per session scan A 9bbb2f813246

Subscribe to this mod's changes

xray-ui-dev is a skill published in the GitHub repository bropines/xray-config-ui-editor (121 stars, last pushed 22d ago), licensed MIT. It adds 40 tokens to every session and 944 once invoked, about $0.0002 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Frontend React

xray-ui-dev next to 6 skills from other repositories
Mod	Type	Stars	Last push	Licence	Scan	Tokens	Works with
xray-ui-devbropines/xray-config-ui-editor	Skill	121	22d ago	MIT	A	40	Gemini CLI
build-ghost-appTryGhost/Ghost	Skill	56k	yesterday	MIT	A	44	Claude Code, Codex
chakra-ui-builderchakra-ui/chakra-ui	Skill	41k	yesterday	MIT	A	214	Claude Code, Codex
material-ui-tailwindmui/material-ui	Skill	99k	yesterday	MIT	A	67	Claude Code, Codex
fuzzy-rankingTanStack/table	Skill	29k	4d ago	MIT	A	62	Claude Code, Codex
r3f-best-practiceszebbern/claude-code-guide	Skill	4.7k	3d ago	MIT	A	74	Claude Code, Codex
git-safetytamagui/tamagui	Skill	14k	today	MIT	A	0	Claude Code

xray-config-ui-editor: Skill for Gemini CLI