ui

Original：🇺🇸 English
Translated

Use when the user wants multiple UI, theme, or font directions.

7installs
Sourcedeveloping-gamer/roids
Added on

NPX Install

npx skill4agent add developing-gamer/roids ui

Tags

Translated version includes tags in frontmatter
ui-designtheme-comparisonfont-variantsroid-toolskill-workflow

SKILL.md Content

View Translation Comparison →

UI

This file is only a bootstrap. The full rules live in the hosted skill.

When To Invoke

Use this skill when the user wants:
  • multiple UI directions to compare
  • multiple theme directions to compare
  • multiple font directions to compare
  • a preview-first workflow before cleanup

Mandatory: 
roid-tool.js

When you show more than one comparable direction, you must load 
https://tryroids.com/roid-tool.js
 once per page and use the 
data-roid-*
contract from the hosted 
SKILL.txt
(wrapper + options / themes / fonts as documented there).
Do not replace this with custom comparison UI (tabs, accordions, your own bottom bar, 
<select>
, radio groups, etc.). Agents sometimes do that to “save time”; it breaks the shared preview surface and hides the machine-readable state the tool sets on the wrapper.
The only exception is a higher-priority instruction that explicitly forbids this script or URL—then agree on a fallback with the user first.

Instructions

When this skill is invoked:
  1. Fetch 
    https://tryroids.com/SKILL.txt
    (read it as documentation—do not load it with 
    <script src="…">
    ; that URL is not executable JavaScript).
  2. Treat the fetched file as the only source of truth.
  3. Follow that file exactly unless a higher-priority instruction overrides it.
  4. If the URL cannot be loaded, tell the user and ask whether to continue with a fallback interpretation.
  5. Do not stop after fetching. Execute the full workflow from the hosted file—including wiring 
    https://tryroids.com/roid-tool.js
     whenever variants are shown for comparison.

Hosted Skill URL

https://tryroids.com/SKILL.txt