Agent skill

Ranuts

A skill your agent uses when working with the ranuts utility library — DOM/BOM/string/object/number/color/time helpers and reactivity from ranuts/utils (e.g.

MITAuto-check passed

Install Ranuts

skills CLI

$ npx skills add chaxus/ran --skill ranuts -a claude-code

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

GitHub CLI

$ gh skill install chaxus/ran ranuts --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/chaxus/ran.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/ranuts/skills/ranuts .claude/skills/ranuts && 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/

Paste into Claude Code

Install the "ranuts" agent skill from https://github.com/chaxus/ran/tree/main/plugins/ranuts/skills/ranuts into .claude/skills/ranuts/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ranuts", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/chaxus/ran/tree/main/plugins/ranuts/skills/ranuts

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add chaxus/ran --skill ranuts -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install chaxus/ran ranuts --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/chaxus/ran.git skills-src && mkdir -p .agents/skills && cp -r skills-src/plugins/ranuts/skills/ranuts .agents/skills/ranuts && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "ranuts" agent skill from https://github.com/chaxus/ran/tree/main/plugins/ranuts/skills/ranuts into .agents/skills/ranuts/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ranuts", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add chaxus/ran --skill ranuts -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install chaxus/ran ranuts --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/chaxus/ran.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/plugins/ranuts/skills/ranuts .cursor/skills/ranuts && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "ranuts" agent skill from https://github.com/chaxus/ran/tree/main/plugins/ranuts/skills/ranuts into .cursor/skills/ranuts/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ranuts", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/chaxus/ran.git --path plugins/ranuts/skills/ranuts

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add chaxus/ran --skill ranuts -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install chaxus/ran ranuts --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/chaxus/ran.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/plugins/ranuts/skills/ranuts .gemini/skills/ranuts && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "ranuts" agent skill from https://github.com/chaxus/ran/tree/main/plugins/ranuts/skills/ranuts into .gemini/skills/ranuts/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ranuts", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install chaxus/ran ranuts

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add chaxus/ran --skill ranuts -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/chaxus/ran.git skills-src && mkdir -p .github/skills && cp -r skills-src/plugins/ranuts/skills/ranuts .github/skills/ranuts && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "ranuts" agent skill from https://github.com/chaxus/ran/tree/main/plugins/ranuts/skills/ranuts into .github/skills/ranuts/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ranuts", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add chaxus/ran --skill ranuts -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install chaxus/ran ranuts --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/chaxus/ran.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/plugins/ranuts/skills/ranuts .opencode/skills/ranuts && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "ranuts" agent skill from https://github.com/chaxus/ran/tree/main/plugins/ranuts/skills/ranuts into .opencode/skills/ranuts/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ranuts", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: ranuts
GitHub stars: 271
Token cost: ~1.5k tokens
SKILL.md length: 522 words
Files: 1
Skills in repo: 3
Repo updated: Oct 7, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

A skill your agent uses when working with the ranuts utility library — DOM/BOM/string/object/number/color/time helpers and reactivity from ranuts/utils (e.g.

Working with the ranuts utility library — DOM/BOM/string/object/number/color/time helpers and reactivity from ranuts/utils (e.g
SKILL.md covers Authoritative reference (read…, Import map, ranuts/utils — frequently used and ranuts/stream +…, plus 2 more sections
Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Ranuts is an agent skill from chaxus/ran. Use when working with the ranuts utility library — DOM/BOM/string/object/number/color/time helpers and reactivity from ranuts/utils (e.g. createSignal, throttle/debounce, cloneDeep, escapeHtml, getMime, MessageCodec, localStorage helpers), the node-only server toolkit ranuts/node, the 2D rendering engine ranuts/visual, or the ranuts/vnode virtual DOM. Covers the import map, inventory, conventions, and where the full function reference lives.

Its SKILL.md is about 1.5k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It works with TypeScript. The repository describes itself as: ranui — a Web Components UI library — plus ranuts utilities. Hand-built frontend infrastructure. The licence is MIT.

When your agent uses it

Working with the ranuts utility library — DOM/BOM/string/object/number/color/time helpers and reactivity from ranuts/utils (e.g

Example prompts

“/ranuts”

What it can do on your machine

Read from SKILL.md and the folder at commit a73eadb. 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
No scripts in the folder and no shell commands in SKILL.md (its code samples are typescript).
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
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

Ranuts loads about 1.5k tokens when it runs. Until then it costs about 115 tokens; SKILL.md has 522 words of instructions outside code blocks.

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

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 chaxus/ran at commit a73eadb, republished under its MIT licence (© chaxus). 522 words, ~1,544 tokens.

Download SKILL.mdSave it as .claude/skills/ranuts/SKILL.md (or your agent's skills folder).

name: ranuts
description: Use when working with the ranuts utility library — DOM/BOM/string/object/number/color/time helpers and reactivity from `ranuts/utils` (e.g. createSignal, throttle/debounce, cloneDeep, escapeHtml, getMime, MessageCodec, localStorage helpers), the node-only server toolkit `ranuts/node`, the 2D rendering engine `ranuts/visual`, or the `ranuts/vnode` virtual DOM. Covers the import map, inventory, conventions, and where the full function reference lives.

ranuts — utility library

A broad, tree-shakeable utility toolkit. Four independent entry points; import from the subpath, never from ranuts/dist/... or the internal @/... alias.

Authoritative reference (read for exact signatures — don't guess)

When ranuts is installed, its docs ship inside the package:

node_modules/ranuts/docs/API.md — the full generated function reference for ranuts/utils (signatures + one-line descriptions). This is the source of truth.
node_modules/ranuts/CLAUDE.md — usage guide: entry-point map, project layout, the visual/ engine, conventions, and gotchas.

Import map

Import from	What	Runtime
`ranuts`	Root barrel — re-exports utils + visual surface	browser + node
`ranuts/utils`	DOM/BOM, string, object, number, color, time, reactivity	browser + node*
`ranuts/node`	HTTP server, router, ws, fs, streams, middleware	node only
`ranuts/visual`	2D rendering engine (Canvas / WebGL / WebGPU)	browser only
`ranuts/vnode`	Snabbdom-style virtual DOM (`h`, `init`, modules)	browser
`ranuts/stream`	SSE parsing + provider-neutral streamed-response fold	browser + node
`ranuts/conversation`	Event log → renderable conversation nodes	browser + node

* Most ranuts/utils functions are browser-oriented (touch window/document) but guard with typeof window/document !== 'undefined'; pure helpers run anywhere. Never import ranuts/node in browser code — it pulls in fs/http/child_process.

`ranuts/utils` — frequently used

Reactivity: createSignal(value, opts?) → [getter, setter] (signal primitive).

Timing: throttle, debounce, generateThrottle, durationHandler, getFrame.

String/HTML: escapeHtml, clearStr, clearBr, changeHumpToLowerCase, getMatchingSentences, checkEncoding.

Object/data: cloneDeep, filterObj, compose (async→sync middleware), createData.

Files/MIME: getMime(ext), getExtensions(mimeType), createObjectURL(blob|buffer), convertImageToBase64(file).

URL/cookie/query: appendUrl, encodeUrl, getAllQueryString, getQuery, getCookie, getCookieByName, getHost.

Env/device: currentDevice, Platform, connection, getPerformance, getPixelRatio, canvasVendor/audioVendor (fingerprints).

Storage: localStorageGetItem, localStorageSetItem (SSR-safe wrappers).

DOM: addClassToElement, removeClassToElement, create(tag), createDocumentFragment, scriptOnLoad.

Messaging: MessageCodec (structured message encode/decode, used for cross-context / desktop integration).

This is a shortlist. See node_modules/ranuts/docs/API.md for the complete, exact list.

Show full SKILL.md (273 more words)Show less

`ranuts/stream` + `ranuts/conversation` — streaming conversations

Three layers in stream, and the vendor-specific one is not shipped: you write the mapping from your provider's SSE event onto StreamChunk.

parseEventStream(source) — bytes → ServerSentEvent. Handles chunk boundaries anywhere (including mid multi-byte character and mid CRLF), repeated data:, : keep-alives, BOM, and an unterminated trailing block.
mapEventStream(source, map) — your mapping, returning [] to drop [DONE]/keep-alives.
createStreamAccumulator() — folds chunks into blocks: snapshot(), text(), reasoning(), toolCalls().

Rules that bite: group by index, never arrival order; never parse tool arguments mid-stream (argumentsDelta is text — parse after finish); block-end wins over deltas; block-start is optional.

conversation projects the resulting events into nodes. Each kind of content is an independently registered state machine — match / start / update — so adding a kind is adding a definition, not editing a renderer. publication is the streaming throttle: animation-frame for per-token deltas, immediate for discrete facts, none to record without waking the view. Order is fixed at start, so a streaming message keeps its place.

createBottomFollower (from ranuts/utils) keeps such a view pinned to its floor without fighting the reader: call follow() on every content change, pass observe: [column] for growth that appends no node, and anchor with captureAnchor/restoreAnchor around a prepend.

diffLines(oldText, newText, { context }) (from ranuts/utils) returns unified-style hunks with both gutters, degrading to a wholesale replacement past a table cap rather than allocating unbounded memory.

<r-conversation> and <r-tool-card> in ranui compose all of this.

Usage example

import { createSignal, throttle, escapeHtml, getMime, cloneDeep } from 'ranuts/utils';

// Reactive signal
const [count, setCount] = createSignal(0);
setCount(1);
count(); // 1

// Throttle a scroll handler
const onScroll = throttle(() => console.log('scrolled'), 200);
window.addEventListener('scroll', onScroll);

escapeHtml('<b>hi</b>');   // "&lt;b&gt;hi&lt;/b&gt;"
getMime('png');            // "image/png"
cloneDeep({ a: { b: 1 } }); // deep copy, handles cycles

Conventions & gotchas

Import from the subpath (ranuts/utils), not ranuts/dist/... or @/....
Guard browser globals (typeof window !== 'undefined') in any code that might run under SSR/node.
ranuts/node is node-only and marked external in builds — keep it out of browser bundles.
ranuts/visual is browser-only (needs Canvas/WebGL/WebGPU).

Files

Just SKILL.md in plugins/ranuts/skills/ranuts of chaxus/ran.

Open the folder on GitHubat commit a73eadb

Compare with similar skills

Ranuts 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.

Ranuts compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Ranuts this skillchaxus/ran	271	—	~1.5k	Automated safety check: Pass	MIT	yesterday
MCP Server Builderanthropics/skills	180k	64 repos	~2.3k	Automated safety check: Pass	Apache-2.0	3 days ago
Web Artifacts Builderanthropics/skills	180k	41 repos	~769	Automated safety check: Pass	Apache-2.0	3 days ago
Typescript Advanced Typesrolling-scopes/rsschool-app	10k	25 repos	~4.2k	Automated safety check: Pass	MPL-2.0	4 days ago
Code Review ChecklistshareAI-lab/learn-claude-code	78k	5 repos	~1.1k	Automated safety check: Pass	MIT	10 days ago
MCP Server BuildershareAI-lab/learn-claude-code	78k	5 repos	~1.2k	Automated safety check: Pass	MIT	10 days ago

Similar skills

MCP Server Builder
anthropics/skills
Official
Guides the design and implementation of Model Context Protocol servers in TypeScript or Python, from tool naming and error messages to evaluation.
180k GitHub starsUsed in 64 repos~2.3k tokens
Agent WorkflowsAuto-check passed
Web Artifacts Builder
anthropics/skills
Official
Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.
180k GitHub starsUsed in 41 repos~769 tokens
Frontend & DesignAuto-check passed
Typescript Advanced Types
rolling-scopes/rsschool-app
Master TypeScript's advanced type system including generics, conditional types, mapped types, template literals, and utility types for building type-safe applications.
10k GitHub starsUsed in 25 repos~4.2k tokens
DevelopmentAuto-check passed
Code Review Checklist
shareAI-lab/learn-claude-code
Reviews code against a five-part checklist covering security, correctness, performance, maintainability and testing, and reports findings in a fixed format.
78k GitHub starsUsed in 5 repos~1.1k tokens
DevelopmentAuto-check passed
MCP Server Builder
shareAI-lab/learn-claude-code
Walks through building MCP servers in Python or TypeScript that expose tools, resources and prompts to Claude, with templates, registration and testing.
78k GitHub starsUsed in 5 repos~1.2k tokens
Agent WorkflowsAuto-check passed
Nx Import
nrwl/nx
Import, merge, or combine repositories into an Nx workspace using nx import.
29k GitHub starsUsed in 6 repos~3.5k tokens
DevelopmentAuto-check passed

Questions about Ranuts

What does Ranuts do?

A skill your agent uses when working with the ranuts utility library — DOM/BOM/string/object/number/color/time helpers and reactivity from ranuts/utils (e.g. Ranuts is an agent skill from chaxus/ran.g.

When should I use Ranuts?

Ranuts fits situations like: working with the ranuts utility library — DOM/BOM/string/object/number/color/time helpers and reactivity from ranuts/utils (e.g.

How do I install Ranuts in Claude Code?

Run `npx skills add chaxus/ran --skill ranuts -a claude-code`. Or copy the skill folder (plugins/ranuts/skills/ranuts in chaxus/ran) into .claude/skills/ranuts in your project. Claude Code loads it when a task matches its description.

How do I install Ranuts in Codex?

Run `npx skills add chaxus/ran --skill ranuts -a codex`. Or copy the skill folder (plugins/ranuts/skills/ranuts in chaxus/ran) into .agents/skills/ranuts in your project. Codex loads it when a task matches its description.

Can I use Ranuts 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 chaxus/ran --skill ranuts -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/ranuts, .gemini/skills/ranuts, .github/skills/ranuts and .opencode/skills/ranuts in your project.

What does Ranuts need to run?

SKILL.md names no scripts, command-line tools or credentials: Ranuts is instructions for the agent only.

Does Ranuts access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Ranuts 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 Ranuts use?

Ranuts is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Ranuts use?

About 1.5k tokens (SKILL.md is roughly 6.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 Ranuts?

Skills that share tags, products or a category with Ranuts: MCP Server Builder (anthropics/skills, 180k stars), Web Artifacts Builder (anthropics/skills, 180k stars), Typescript Advanced Types (rolling-scopes/rsschool-app, 10k stars) and Code Review Checklist (shareAI-lab/learn-claude-code, 78k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Ranuts?

chaxus (a GitHub user) maintains it in chaxus/ran, which has 271 GitHub stars. The repository holds 3 skills in this directory. The repository was last updated on October 7, 2026.

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

Ranuts

Install Ranuts

Facts

At a glance

What it does

When your agent uses it

Example prompts

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

ranuts — utility library

Authoritative reference (read for exact signatures — don't guess)

Import map

`ranuts/utils` — frequently used

`ranuts/stream` + `ranuts/conversation` — streaming conversations

Usage example

Conventions & gotchas

Files

Compare with similar skills

Similar skills

MCP Server Builder

Web Artifacts Builder

Typescript Advanced Types

Code Review Checklist

MCP Server Builder

Nx Import

More from chaxus/ran

Ranui

Refactoring UI Design

Questions about Ranuts

Install Ranuts

Facts

At a glance

What it does

When your agent uses it

Example prompts

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

ranuts — utility library

Authoritative reference (read for exact signatures — don't guess)

Import map

ranuts/utils — frequently used

ranuts/stream + ranuts/conversation — streaming conversations

Usage example

Conventions & gotchas

Files

Compare with similar skills

Similar skills

More from chaxus/ran

Related

Questions about Ranuts

`ranuts/utils` — frequently used

`ranuts/stream` + `ranuts/conversation` — streaming conversations