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.
npx agentmods add skills/spatie/freek.dev/debugging-output-and-previewing-html-using-raynpx skills add spatie/freek.dev --skill debugging-output-and-previewing-html-using-raygit clone --depth 1 https://github.com/spatie/freek.devWrote 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.
[](https://agentmods.dev/skills/spatie/freek.dev/debugging-output-and-previewing-html-using-ray)<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>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.
| Model | Per session | Once 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 |
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/ \ 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.
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" }
}
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.
- 4d ago First seen · 414 lines · 58 tokens per session scan A 4c559f6e73c6
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.
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.
nextjs-nextra-starter-distill-zh
蒸馏并应用当前仓库的 Next.js Nextra 启动模板架构、已实现功能、二次开发扩展点与迁移模式。适用于理解本项目、继续二次开发、修改 docs/landing/i18n/theme/auth/UI 行为,或把这些 Next.js 16 + Nextra 4 + Tailwind CSS 4 模式复用到其他项目。.
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 +…
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…
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…
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/.