New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Debugging Output And Previewing HTML Using Ray

by anonaddy in anonaddy/anonaddy

A skill your agent uses when user says "send to Ray," "show in Ray," "debug in Ray," "log to Ray," "display in Ray," or wants to visualize data, debug output, or show diagrams in the Ray desktop…

AGPL-3.0Auto-check passedDevelopment

Install Debugging Output And Previewing HTML Using Ray

skills CLI
$ npx skills add anonaddy/anonaddy --skill debugging-output-and-previewing-html-using-ray -a claude-code

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

GitHub CLI
$ gh skill install anonaddy/anonaddy debugging-output-and-previewing-html-using-ray --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/anonaddy/anonaddy.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.junie/skills/debugging-output-and-previewing-html-using-ray .claude/skills/debugging-output-and-previewing-html-using-ray && 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
debugging-output-and-previewing-html-using-ray
GitHub stars
4.9k
Token cost
~2.3k tokens
SKILL.md length
464 words
Files
1
Skills in repo
6
Repo updated
First seen
Licence
AGPL-3.0

At a glance

A skill your agent uses when user says "send to Ray," "show in Ray," "debug in Ray," "log to Ray," "display in Ray," or wants to visualize data, debug output, or show diagrams in the Ray desktop…

  • User says send to Ray
  • SKILL.md covers Overview, Connection Details, Request Format and Payload Types, plus 5 more sections
  • Calls curl and jq
  • Wants to visualize data

What it does

Debugging Output And Previewing HTML Using Ray is an agent skill from anonaddy/anonaddy. Use when user says "send to Ray," "show in Ray," "debug in Ray," "log to Ray," "display in Ray," or wants to visualize data, debug output, or show diagrams in the Ray desktop application.

Its SKILL.md is about 2.3k 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 Development, covering Debugging and Diagrams. The repository describes itself as: Anonymous email forwarding. The licence is AGPL-3.0.

When your agent uses it

  • User says send to Ray
  • Wants to visualize data
  • Show diagrams in the Ray desktop application

Example prompts

  • “send to Ray,”
  • “show in Ray,”
  • “debug in Ray,”
  • “/debugging-output-and-previewing-html-using-ray”

What it can do on your machine

Read from SKILL.md and the folder at commit 150983e. 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:

    • curl
    • jq

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

  • Network

    No URLs in SKILL.md. Its commands use curl, 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

Debugging Output And Previewing HTML Using Ray loads about 2.3k tokens when it runs. Until then it costs about 59 tokens; SKILL.md has 464 words of instructions outside code blocks.

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

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 anonaddy/anonaddy at commit 150983e, republished under its AGPL-3.0 licence (© anonaddy). 464 words, ~2,298 tokens.

Download SKILL.mdSave it as .claude/skills/debugging-output-and-previewing-html-using-ray/SKILL.md (or your agent's skills folder).
name
debugging-output-and-previewing-html-using-ray
description
Use when user says "send to Ray," "show in Ray," "debug in Ray," "log to Ray," "display in Ray," or wants to visualize data, debug output, or show diagrams in the Ray desktop application.
metadata.author
Spatie
metadata.tags
debugging, logging, visualization, ray

Ray Skill

Overview

Ray is Spatie's desktop debugging application for developers. Send data directly to Ray by making HTTP requests to its local server.

This can be useful for debugging applications, or to preview design, logos, or other visual content.

This is what the ray() PHP function does under the hood.

Connection Details

SettingDefaultEnvironment Variable
HostlocalhostRAY_HOST
Port23517RAY_PORT
URLhttp://localhost:23517/-

Request Format

Method: POST Content-Type: application/json User-Agent: Ray 1.0

Basic Request Structure
json
{
  "uuid": "unique-identifier-for-this-ray-instance",
  "payloads": [
    {
      "type": "log",
      "content": { },
      "origin": {
        "file": "/path/to/file.php",
        "line_number": 42,
        "hostname": "my-machine"
      }
    }
  ],
  "meta": {
    "ray_package_version": "1.0.0"
  }
}
Fields
FieldTypeDescription
uuidstringUnique identifier for this Ray instance. Reuse the same UUID to update an existing entry.
payloadsarrayArray of payload objects to send
metaobjectOptional metadata (ray_package_version, project_name, php_version)
Origin Object

Every payload includes origin information:

json
{
  "file": "/Users/dev/project/app/Controller.php",
  "line_number": 42,
  "hostname": "dev-machine"
}

Payload Types

Log (Send Values)
json
{
  "type": "log",
  "content": {
    "values": ["Hello World", 42, {"key": "value"}]
  },
  "origin": { "file": "test.php", "line_number": 1, "hostname": "localhost" }
}
Custom (HTML/Text Content)
json
{
  "type": "custom",
  "content": {
    "content": "<h1>HTML Content</h1><p>With formatting</p>",
    "label": "My Label"
  },
  "origin": { "file": "test.php", "line_number": 1, "hostname": "localhost" }
}
Table
json
{
  "type": "table",
  "content": {
    "values": {"name": "John", "email": "john@example.com", "age": 30},
    "label": "User Data"
  },
  "origin": { "file": "test.php", "line_number": 1, "hostname": "localhost" }
}
Color

Set the color of the preceding log entry:

json
{
  "type": "color",
  "content": {
    "color": "green"
  },
  "origin": { "file": "test.php", "line_number": 1, "hostname": "localhost" }
}

Available colors: green, orange, red, purple, blue, gray

Screen Color

Set the background color of the screen:

json
{
  "type": "screen_color",
  "content": {
    "color": "green"
  },
  "origin": { "file": "test.php", "line_number": 1, "hostname": "localhost" }
}
Label

Add a label to the entry:

json
{
  "type": "label",
  "content": {
    "label": "Important"
  },
  "origin": { "file": "test.php", "line_number": 1, "hostname": "localhost" }
}
Size

Set the size of the entry:

json
{
  "type": "size",
  "content": {
    "size": "lg"
  },
  "origin": { "file": "test.php", "line_number": 1, "hostname": "localhost" }
}

Available sizes: sm, lg

Notify (Desktop Notification)
json
{
  "type": "notify",
  "content": {
    "value": "Task completed!"
  },
  "origin": { "file": "test.php", "line_number": 1, "hostname": "localhost" }
}
New Screen
json
{
  "type": "new_screen",
  "content": {
    "name": "Debug Session"
  },
  "origin": { "file": "test.php", "line_number": 1, "hostname": "localhost" }
}
Measure (Timing)
json
{
  "type": "measure",
  "content": {
    "name": "my-timer",
    "is_new_timer": true,
    "total_time": 0,
    "time_since_last_call": 0,
    "max_memory_usage_during_total_time": 0,
    "max_memory_usage_since_last_call": 0
  },
  "origin": { "file": "test.php", "line_number": 1, "hostname": "localhost" }
}

For subsequent measurements, set is_new_timer: false and provide actual timing values.

Simple Payloads (No Content)

These payloads only need a type and empty content:

json
{
  "type": "separator",
  "content": {},
  "origin": { "file": "test.php", "line_number": 1, "hostname": "localhost" }
}
TypePurpose
separatorAdd visual divider
clear_allClear all entries
hideHide this entry
removeRemove this entry
confettiShow confetti animation
show_appBring Ray to foreground
hide_appHide Ray window

Combining Multiple Payloads

Send multiple payloads in one request. Use the same uuid to apply modifiers (color, label, size) to a log entry:

json
{
  "uuid": "abc-123",
  "payloads": [
    {
      "type": "log",
      "content": { "values": ["Important message"] },
      "origin": { "file": "test.php", "line_number": 1, "hostname": "localhost" }
    },
    {
      "type": "color",
      "content": { "color": "red" },
      "origin": { "file": "test.php", "line_number": 1, "hostname": "localhost" }
    },
    {
      "type": "label",
      "content": { "label": "ERROR" },
      "origin": { "file": "test.php", "line_number": 1, "hostname": "localhost" }
    },
    {
      "type": "size",
      "content": { "size": "lg" },
      "origin": { "file": "test.php", "line_number": 1, "hostname": "localhost" }
    }
  ],
  "meta": {}
}

Example: Complete Request

Send a green, labeled log message:

bash
curl -X POST http://localhost:23517/ \
  -H "Content-Type: application/json" \
  -H "User-Agent: Ray 1.0" \
  -d '{
    "uuid": "my-unique-id-123",
    "payloads": [
      {
        "type": "log",
        "content": {
          "values": ["User logged in", {"user_id": 42, "name": "John"}]
        },
        "origin": {
          "file": "/app/AuthController.php",
          "line_number": 55,
          "hostname": "dev-server"
        }
      },
      {
        "type": "color",
        "content": { "color": "green" },
        "origin": { "file": "/app/AuthController.php", "line_number": 55, "hostname": "dev-server" }
      },
      {
        "type": "label",
        "content": { "label": "Auth" },
        "origin": { "file": "/app/AuthController.php", "line_number": 55, "hostname": "dev-server" }
      }
    ],
    "meta": {
      "project_name": "my-app"
    }
  }'
Show full SKILL.md (197 more words)Show less

Availability Check

Before sending data, you can check if Ray is running:

GET http://localhost:23517/_availability_check

Ray responds with HTTP 404 when available (the endpoint doesn't exist, but the server is running).

Getting Ray Information

Get Windows

Retrieve information about all open Ray windows:

GET http://localhost:23517/windows

Returns an array of window objects with their IDs and names:

json
[
  {"id": 1, "name": "Window 1"},
  {"id": 2, "name": "Debug Session"}
]
Get Theme Colors

Retrieve the current theme colors being used by Ray:

GET http://localhost:23517/theme

Returns the theme information including color palette:

json
{
  "name": "Dark",
  "colors": {
    "primary": "#000000",
    "secondary": "#1a1a1a",
    "accent": "#3b82f6"
  }
}

Use Case: When sending custom HTML content to Ray, use these theme colors to ensure your content matches Ray's current theme and looks visually integrated.

Example: Send HTML with matching colors:

bash

# First, get the theme

THEME=$(curl -s http://localhost:23517/theme)
PRIMARY_COLOR=$(echo $THEME | jq -r '.colors.primary')

# Then send HTML using those colors

curl -X POST http://localhost:23517/ \
  -H "Content-Type: application/json" \
  -d '{
    "uuid": "theme-matched-html",
    "payloads": [{
      "type": "custom",
      "content": {
        "content": "<div style=\"background: '"$PRIMARY_COLOR"'; padding: 20px;\"><h1>Themed Content</h1></div>",
        "label": "Themed HTML"
      },
      "origin": {"file": "script.sh", "line_number": 1, "hostname": "localhost"}
    }]
  }'

Payload Type Reference

TypeContent FieldsPurpose
logvalues (array)Send values to Ray
customcontent, labelHTML or text content
tablevalues, labelDisplay as table
colorcolorSet entry color
screen_colorcolorSet screen background
labellabelAdd label to entry
sizesizeSet entry size (sm/lg)
notifyvalueDesktop notification
new_screennameCreate new screen
measurename, is_new_timer, timing fieldsPerformance timing
separator(empty)Visual divider
clear_all(empty)Clear all entries
hide(empty)Hide entry
remove(empty)Remove entry
confetti(empty)Confetti animation
show_app(empty)Show Ray window
hide_app(empty)Hide Ray window

© anonaddy, AGPL-3.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 .junie/skills/debugging-output-and-previewing-html-using-ray of anonaddy/anonaddy.

Open the folder on GitHubat commit 150983e

Compare with similar skills

Debugging Output And Previewing HTML Using Ray 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.

Debugging Output And Previewing HTML Using Ray compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Debugging Output And Previewing HTML Using Ray this skillanonaddy/anonaddy4.9k—~2.3kAutomated safety check: PassAGPL-3.0
Frappe Errors ClientscriptsImpertio-Studio/Frappe_Claude_Skill_Package187—~2.4kAutomated safety check: PassMIT
Counterexample Explainermajiayu000/claude-skill-registry6661 repos~3.5kAutomated safety check: PassMIT
Archify Diagramstt-a1i/archify79k—~2.9kAutomated safety check: PassMIT
JSON Canvasheyitsnoah/claudesidian2.6k18 repos~3.5kAutomated safety check: PassMIT
Trellis Session Insightmindfold-ai/Trellis15k4 repos~1.7kAutomated safety check: PassAGPL-3.0

Similar skills

  • Frappe Errors Clientscripts

    Impertio-Studio/Frappe_Claude_Skill_Package

    A skill your agent uses when debugging or preventing errors in Frappe Client Scripts.

    187 GitHub stars~2.4k tokensUpdated 21 days ago
    DevelopmentAuto-check passed

  • Counterexample Explainer

    majiayu000/claude-skill-registry

    Explain why counterexamples violate specifications by analyzing formal specifications (temporal logic, invariants, pre/postconditions, code contracts), informal requirements (user stories…

    666 GitHub starsUsed in 1 repo~3.5k tokens
    Product & Project ManagementAuto-check passed

  • Archify Diagrams

    tt-a1i/archify

    Creates interactive architecture, workflow, sequence, data-flow and lifecycle diagrams as standalone HTML with inline SVG, themes and image or video export.

    79k GitHub stars~2.9k tokensUpdated yesterday
    DevelopmentAuto-check passed

  • JSON Canvas

    heyitsnoah/claudesidian

    Create and edit JSON Canvas files (.canvas) with nodes, edges, groups, and connections.

    2.6k GitHub starsUsed in 18 repos~3.5k tokens
    DevelopmentAuto-check passed

  • Trellis Session Insight

    mindfold-ai/Trellis

    Reach into past AI conversation history through the trellis mem CLI.

    15k GitHub starsUsed in 4 repos~1.7k tokens
    DevelopmentAuto-check passed

  • Diagram Design

    cathrynlavery/diagram-design

    Creates branded diagrams, from architecture, flowchart and sequence to charts and maps, as self-contained HTML with inline SVG, with import from draw.io, Mermaid and Excalidraw.

    45k GitHub starsUsed in 1 repo~7.5k tokens
    DevelopmentAuto-check passed

More from anonaddy/anonaddy

  • Tailwindcss Development

    anonaddy/anonaddy

    Always invoke when the user's message includes 'tailwind' in any form.

    4.9k GitHub starsUsed in 10 repos~865 tokens
    Auto-check passed

  • Laravel Best Practices

    anonaddy/anonaddy

    Apply this skill whenever writing, reviewing, or refactoring Laravel PHP code.

    4.9k GitHub starsUsed in 13 repos~1.2k tokens
    Auto-check passed

  • Inertia Vue Development

    anonaddy/anonaddy

    Develops Inertia.js v3 Vue client-side applications. An agent skill from anonaddy/anonaddy.

    4.9k GitHub starsUsed in 3 repos~3.4k tokens
    Auto-check passed

  • Infer Conventions

    anonaddy/anonaddy

    A skill your agent uses to analyze how a Laravel application is actually written and record its conventions as shared rules.

    4.9k GitHub starsUsed in 5 repos~3.1k tokens
    Auto-check passed

  • Testing Best Practices

    anonaddy/anonaddy

    Laravel test design and review. An agent skill from anonaddy/anonaddy.

    4.9k GitHub starsUsed in 5 repos~1k tokens
    Auto-check passed

Categories

Questions about Debugging Output And Previewing HTML Using Ray

What does Debugging Output And Previewing HTML Using Ray do?

A skill your agent uses when user says "send to Ray," "show in Ray," "debug in Ray," "log to Ray," "display in Ray," or wants to visualize data, debug output, or show diagrams in the Ray desktop…. Debugging Output And Previewing HTML Using Ray is an agent skill from anonaddy/anonaddy. Use when user says "send to Ray," "show in Ray," "debug in Ray," "log to Ray," "display in Ray," or wants to visualize data, debug output, or show diagrams in the Ray desktop application.

When should I use Debugging Output And Previewing HTML Using Ray?

Debugging Output And Previewing HTML Using Ray fits situations like: user says send to Ray; wants to visualize data; show diagrams in the Ray desktop application.

How do I install Debugging Output And Previewing HTML Using Ray in Claude Code?

Run `npx skills add anonaddy/anonaddy --skill debugging-output-and-previewing-html-using-ray -a claude-code`. Or copy the skill folder (.junie/skills/debugging-output-and-previewing-html-using-ray in anonaddy/anonaddy) into .claude/skills/debugging-output-and-previewing-html-using-ray in your project. Claude Code loads it when a task matches its description.

How do I install Debugging Output And Previewing HTML Using Ray in Codex?

Run `npx skills add anonaddy/anonaddy --skill debugging-output-and-previewing-html-using-ray -a codex`. Or copy the skill folder (.junie/skills/debugging-output-and-previewing-html-using-ray in anonaddy/anonaddy) into .agents/skills/debugging-output-and-previewing-html-using-ray in your project. Codex loads it when a task matches its description.

Can I use Debugging Output And Previewing HTML Using Ray 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 anonaddy/anonaddy --skill debugging-output-and-previewing-html-using-ray -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/debugging-output-and-previewing-html-using-ray, .gemini/skills/debugging-output-and-previewing-html-using-ray, .github/skills/debugging-output-and-previewing-html-using-ray and .opencode/skills/debugging-output-and-previewing-html-using-ray in your project.

What does Debugging Output And Previewing HTML Using Ray need to run?

Going by SKILL.md and its folder, Debugging Output And Previewing HTML Using Ray needs the command-line tools its instructions call (curl and jq).

Does Debugging Output And Previewing HTML Using Ray access the network?

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

Is Debugging Output And Previewing HTML Using Ray 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 Debugging Output And Previewing HTML Using Ray use?

Debugging Output And Previewing HTML Using Ray is published under the AGPL-3.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Debugging Output And Previewing HTML Using Ray use?

About 2.3k tokens (SKILL.md is roughly 9.2k 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 Debugging Output And Previewing HTML Using Ray?

Skills that share tags, products or a category with Debugging Output And Previewing HTML Using Ray: Frappe Errors Clientscripts (Impertio-Studio/Frappe_Claude_Skill_Package, 187 stars), Counterexample Explainer (majiayu000/claude-skill-registry, 666 stars), Archify Diagrams (tt-a1i/archify, 79k stars) and JSON Canvas (heyitsnoah/claudesidian, 2.6k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Debugging Output And Previewing HTML Using Ray?

anonaddy (a GitHub organization) maintains it in anonaddy/anonaddy, which has 4,889 GitHub stars. The repository holds 6 skills in this directory. The repository was last updated on October 6, 2026.

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