debugging-output-and-previewing-html-using-ray

debugging-output-and-previewing-html-using-ray is a skill for Claude Code, Codex from spatie/freek.dev. It costs 58 tokens per session (2,645 once invoked), scanned A, a copy of debugging-output-and-previewing-html-using-ray, MIT.

A guide for sending debugging information and visual previews to Ray, a desktop application for inspecting PHP output and data. It describes Ray's local connection and request format.

In plain words
What is it for?
Use it when logging values to Ray, viewing debug output, investigating PHP behavior, or previewing HTML, logos, diagrams, and other visuals.
Why use it?
It makes application data, debug messages, diagrams, and previews easier to inspect outside the normal page or terminal output.

Skill for Claude CodeCodex

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add skills/spatie/freek.dev/debugging-output-and-previewing-html-using-ray
Any agent
npx skills add spatie/freek.dev --skill debugging-output-and-previewing-html-using-ray
Clone the repo
git clone --depth 1 https://github.com/spatie/freek.dev

Made for: Claude Code, Codex.

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.

agentmods badge for debugging-output-and-previewing-html-using-ray

README.md
[![agentmods](https://agentmods.dev/badge/skills/spatie/freek.dev/debugging-output-and-previewing-html-using-ray.svg)](https://agentmods.dev/skills/spatie/freek.dev/debugging-output-and-previewing-html-using-ray)
Your own site
<a href="https://agentmods.dev/skills/spatie/freek.dev/debugging-output-and-previewing-html-using-ray"><img src="https://agentmods.dev/badge/skills/spatie/freek.dev/debugging-output-and-previewing-html-using-ray.svg" alt="Measured on agentmods" height="20"></a>
Per session 58 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 2,645 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 1 finding. Scan, not verified.
Origin 100% copy Near-identical to another mod 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.

ModelPer sessionOnce invoked
Fable 5.1 $0.00058 $0.02645
Opus 5 $0.00029 $0.01323
Sonnet 5 $0.00012 $0.00529
Haiku 4.5 $0.00006 $0.00265

Measured 4d ago against content hash 4c559f6e73c6, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-05, from the pricing page.

Security

Grade A, and why

debugging-output-and-previewing-html-using-ray scanned grade A with 1 finding 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 4d 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.

Makes network callslowCapability

Not a fault in itself. Listed so you know the mod talks to something, and to what.

curl -X POST http://localhost:23517/ \
Origin

This is a copy

100% identical to debugging-output-and-previewing-html-using-ray — 1 line differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.

.claude/skills/debugging-output-and-previewing-html-using-ray/SKILL.md · 414 lines

How it starts

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

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

Setting Default Environment Variable
Host localhost RAY_HOST
Port 23517 RAY_PORT
URL http://localhost:23517/ -

Request Format

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

Basic Request Structure

{
  "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

Field Type Description
uuid string Unique identifier for this Ray instance. Reuse the same UUID to update an existing entry.
payloads array Array of payload objects to send
meta object Optional metadata (ray_package_version, project_name, php_version)

Origin Object

Every payload includes origin information:

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

Payload Types

Log (Send Values)

{
  "type": "log",
  "content": {
    "values": ["Hello World", 42, {"key": "value"}]
  },
  "origin": { "file": "test.php", "line_number": 1, "hostname": "localhost" }
}

Custom (HTML/Text Content)

{
  "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

{
  "type": "table",
  "content": {
    "values": {"name": "John", "email": "[email protected]", "age": 30},
    "label": "User Data"
  },
  "origin": { "file": "test.php", "line_number": 1, "hostname": "localhost" }
}

Read the full file on GitHub · 414 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.

  1. 4d ago First seen · 414 lines · 58 tokens per session scan A 4c559f6e73c6

Subscribe to this mod's changes

debugging-output-and-previewing-html-using-ray is a skill published in the GitHub repository spatie/freek.dev (652 stars, last pushed 3d ago), licensed MIT. It adds 58 tokens to every session and 2,645 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 1 finding (makes network calls). It is 100% identical to debugging-output-and-previewing-html-using-ray, differing in 1 line, and is treated as a copy.

Related

Other skills, from other repositories

electrik-slate

Build Laravel Blade UI with Electrik Slate 3.x and optional slate-blocks. Use when writing x-slate or x-slate-block components, Livewire forms, tokens, toasts, blocks, or when the user mentions Slate, electrik/slate, electrik/slate-blocks, or slate.electrik.dev.

electrikhq/slate · 72 tokens

nextjs-nextra-starter-distill-zh

蒸馏并应用当前仓库的 Next.js Nextra 启动模板架构、已实现功能、二次开发扩展点与迁移模式。适用于理解本项目、继续二次开发、修改 docs/landing/i18n/theme/auth/UI 行为,或把这些 Next.js 16 + Nextra 4 + Tailwind CSS 4 模式复用到其他项目。.

pdsuwwz/nextjs-nextra-starter · 97 tokens

nextjs-nextra-starter-distill

Distill and apply this repository's Next.js Nextra starter architecture, implemented features, extension points, and migration patterns. Use when Codex needs to understand this project, continue second-stage development, add or change docs/landing/i18n/theme/auth/UI behavior, or reuse these Next.js 16 + Nextra 4 +…

pdsuwwz/nextjs-nextra-starter · 85 tokens

laravel-best-practices

Apply this skill whenever writing, reviewing, or refactoring Laravel PHP code. This includes creating or modifying controllers, models, migrations, form requests, policies, jobs, scheduled commands, service classes, and Eloquent queries. Triggers for N+1 and query performance issues, caching strategies, authorization…

gdarko/laravel-vue-starter · 114 tokens

fortify-development

ACTIVATE when the user works on authentication in Laravel. This includes login, registration, password reset, email verification, two-factor authentication (2FA/TOTP/QR codes/recovery codes), profile updates, password confirmation, or any auth-related routes and controllers. Activate when the user mentions Fortify…

gdarko/laravel-vue-starter · 189 tokens

vue-component-development

Activate when creating or modifying Vue 3 components, pages, layouts, stores, or services in the frontend. Covers component patterns, DaisyUI usage, icon system, toast notifications, drawer patterns, form handling, and the SPA routing/auth flow. Use when working in resources/app/.

gdarko/laravel-vue-starter · 60 tokens