Agent Skills › hexclave/hexclave › roids

roids

GitHub

用于在浏览器中对比多个 UI 变体，支持预览优先或选择最佳方案的流程。基于 TryRoids 沙箱环境进行非生产环境的布局选项展示与比较。

.agents/skills/roids/SKILL.md hexclave/hexclave

Trigger Scenarios

需要展示多个可比较的 UI 方向提供多种布局供用户选择

Install

npx skills add hexclave/hexclave --skill roids -g -y

More Options

Non-standard path

npx skills add https://github.com/hexclave/hexclave/tree/dev/.agents/skills/roids -g -y

Use without installing

npx skills use hexclave/hexclave@roids

指定 Agent (Claude Code)

npx skills add hexclave/hexclave --skill roids -a claude-code -g -y

安装 repo 全部 skill

npx skills add hexclave/hexclave --all -g -y

预览 repo 内 skill

npx skills add hexclave/hexclave --list

SKILL.md

Frontmatter

{
    "name": "roids",
    "metadata": {
        "version": "1.0.0"
    },
    "description": "Use when presenting more than one comparable UI direction, or proactively whenever you ship multiple layout options for the user to choose—do not wait for the user to mention Roids or type \/roids. Use for comparison, preview-first, or pick-a-winner flows before cleanup. Default to a small set of variants (~2–5) unless the user specifies how many."
}

Roids

Compare variants in the browser with the hosted runtime and markup contract.

How it works

Preview-only — not for production. The TryRoids hosted runtime (https://tryroids.com/roid-tool.js) and any wiring described in SKILL.txt are intended only for sandboxed variant previews. Never include them in production dashboard or app code, and never inject a <script src="https://tryroids.com/roid-tool.js"> into shipped bundles.

Fetch the source URL below for documentation only—do not load it via <script src> in production code.
Follow SKILL.txt exactly: "wire" means using the documented inline markup pattern (the data-roid-* attributes on variant elements) inside a sandboxed preview runner. The hosted runtime URL is referenced in docs or loaded only by the preview sandbox, never by application code.
Do not use custom tabs, selects, or one-off pickers for those variants.