TryRoids

Roids

Roids is a cross-agent UI variant picker workflow for design changes that need visual review before they are finalized.

The core experience is simple:

1. A user asks an agent for several UI ideas.
2. The agent injects labeled variants plus the Roids picker from tryroids.com.
3. The user compares options directly in the browser.
4. The user tells the agent which option won.
5. The agent keeps only the winner and removes all preview scaffolding.

Why Roids

• Very low setup for the default path
• Works across Cursor and Claude Code
• Lets users review changes in the real page context
• Keeps final cleanup deterministic instead of fuzzy

Project Contents

• docs/picker-contract.md: DOM contract, script rules, cleanup checklist
• docs/variant-workflow.md: end-to-end lifecycle from prompt to finalization
• skills/shared/ui-variant-core.md: shared instructions all agent adapters should follow
• .cursor/skills/ui-variant-picker/SKILL.md: Cursor-native skill
• adapters/claude-code/ui-variant-picker.md: Claude Code adapter prompt
• public/ui-picker.js: vendored Roids picker runtime for hosts that publish public/ at the site root
• ui-picker.js: root-level copy for GitHub Pages so https://tryroids.com/ui-picker.js works without rewrites
• CNAME: custom-domain file for GitHub Pages
• examples/static-preview/index.html: standalone static preview example
• examples/react-preview/TestimonialVariants.tsx: component-based example

Install

Cursor

Copy the skill directory into a repo that uses Cursor:

• .cursor/skills/ui-variant-picker/SKILL.md
• skills/shared/ui-variant-core.md
• docs/picker-contract.md
• docs/variant-workflow.md

Then invoke the skill with a request like:

/ui add a big testimonial under the logos after the hero. come up with a few ideas that i can pick from.

Claude Code

Use adapters/claude-code/ui-variant-picker.md as your Claude project guidance or reusable prompt template, and keep the shared docs nearby so the same contract is available.

Default Workflow

1. The agent finds the target location.
2. The agent creates 2 to 4 labeled variants.
3. The agent wraps them in a data-roids-pick region with data-roids-option siblings.
4. The agent injects <script src="https://tryroids.com/ui-picker.js"></script>.
5. The user refreshes the page and uses the Roids picker to compare options.
6. The user replies with the winning label such as A or B.
7. The agent removes the other variants, removes the script, and cleans up preview attributes.

Hosting The Picker

This repo now includes the vendored runtime in two deployment-friendly locations:

• public/ui-picker.js for frameworks and hosts that map public/ to the site root
• ui-picker.js at the repo root for GitHub Pages

If tryroids.com is deployed from a framework like Next.js or any host that serves the public directory at the site root, public/ui-picker.js will be published as:

https://tryroids.com/ui-picker.js

If tryroids.com is deployed with GitHub Pages, the root-level ui-picker.js and CNAME files are the important ones.

That lets the rest of the Roids workflow keep using the same script URL without depending on any third-party host at runtime.

Live Injection Versus Standalone Preview

Use live injection when the target surface is mostly presentational and safe to render as temporary sibling variants.

Use a standalone preview file when the host component tree is fragile, stateful, or likely to suffer hydration issues.

Example Flows

Static Preview

Open examples/static-preview/index.html in a browser once the vendored runtime has been deployed to tryroids.com. This example demonstrates a full page with a hero, logos, and a testimonial experiment directly below them.

If the hosted script is blocked by CSP, networking, or local development constraints, the page still renders but the floating picker UI will not appear until the runtime is reachable or vendored locally.

React Preview

Import RoidsPickerScript and TestimonialVariants from examples/react-preview/TestimonialVariants.tsx into a React page or sandbox. This demonstrates the same contract inside a component tree and shows how to inject the script exactly once from React.

For the quickest demo path, import RoidsTestimonialPreview, which mounts both the script and the variant region together.

Cleanup Standard

The task is not finished until:

• only the winning variant remains
• the Roids script tag is gone
• preview-only data-roids-* attributes are gone unless intentionally retained
• no dead variant code or preview labels remain

Next Evolution

This repository focuses on the skill-only v1. A later version can add:

• automatic choice handoff from the browser back into the agent
• helper tooling for one-click preview serving and live reload