A skill your agent uses when a val needs to ship JavaScript that runs in the browser — React apps, vanilla DOM scripts, canvas/games, htmx/Alpine, or any client-side module beyond a single inline…

Apache-2.0Auto-check passedFrontend & Design

Install Client Side JS

skills CLI
$ npx skills add hashgraph-online/awesome-codex-plugins --skill client-side-js -a claude-code

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

GitHub CLI
$ gh skill install hashgraph-online/awesome-codex-plugins client-side-js --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/hashgraph-online/awesome-codex-plugins.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/val-town/plugins/skills/client-side-js .claude/skills/client-side-js && 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
client-side-js
GitHub stars
1.2k
Token cost
~1.4k tokens
SKILL.md length
633 words
Files
1
Skills in repo
686
Repo updated
First seen
Licence
Apache-2.0

At a glance

A skill your agent uses when a val needs to ship JavaScript that runs in the browser — React apps, vanilla DOM scripts, canvas/games, htmx/Alpine, or any client-side module beyond a single inline…

  • A val needs to ship JavaScript that runs in the browser — React apps
  • SKILL.md covers Serving a module, Default: versioned, immutably…, How imports resolve in the… and React specifics, plus 2 more sections
  • Reaches esm.town and esm.sh
  • Vanilla DOM scripts

What it does

Client Side JS is an agent skill from hashgraph-online/awesome-codex-plugins. Use when a val needs to ship JavaScript that runs in the browser — React apps, vanilla DOM scripts, canvas/games, htmx/Alpine, or any client-side module beyond a single inline snippet. Explains how Val Town serves transpiled .ts/.tsx/.jsx modules with no build step, how the browser resolves their imports, and how to load third-party deps.

Its SKILL.md is about 1.4k 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 Frontend & Design, covering React components. It works with JavaScript and React. The repository describes itself as: A curated list of awesome OpenAI Codex / ChatGPT plugins, skills, and resources. The 1 Codex Marketplace. See live plugins at: https://hol.org/plugins/best-codex-plugins. The licence is Apache-2.0.

When your agent uses it

  • A val needs to ship JavaScript that runs in the browser — React apps
  • Vanilla DOM scripts
  • Any client-side module beyond a single inline snippet

Example prompts

  • “/client-side-js”

What it can do on your machine

Read from SKILL.md and the folder at commit 78497e5. 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 and html).

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

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • esm.town
    • esm.sh

    Also links to:

    • developer.mozilla.org

    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

Client Side JS loads about 1.4k tokens when it runs. Until then it costs about 89 tokens; SKILL.md has 633 words of instructions outside code blocks.

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

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 hashgraph-online/awesome-codex-plugins at commit 78497e5, republished under its Apache-2.0 licence (© hashgraph-online). 633 words, ~1,354 tokens.

Download SKILL.mdSave it as .claude/skills/client-side-js/SKILL.md (or your agent's skills folder).
name
client-side-js
description
Use when a val needs to ship JavaScript that runs in the browser — React apps, vanilla DOM scripts, canvas/games, htmx/Alpine, or any client-side module beyond a single inline snippet. Explains how Val Town serves transpiled .ts/.tsx/.jsx modules with no build step, how the browser resolves their imports, and how to load third-party deps.
triggers
client, browser, frontend, script, module, esm, bundle, build, hydrate, react-dom, mount, interactive, canvas, alpine, htmx, serveFile, type=module

Client-side JavaScript

Val Town has no build step and no bundler. A client-side module is just a file in your val that you serve over HTTP; Val Town transpiles it per request. You point a <script type="module"> at a route that returns the file, and the browser runs it. There is nothing to configure (no webpack/vite/esbuild).

Serving a module

serveFile from std/utils reads a file and serves it with the correct Content-Type. For .ts, .tsx, and .jsx it transpiles to JavaScript — strips types, compiles JSX — and serves text/javascript. You serve the source file; the browser receives runnable JS.

ts
import { serveFile } from "https://esm.town/v/std/utils/index.ts";

// in any HTTP handler — serve a client module at some URL path
app.get("/app.tsx", (c) => serveFile("/app.tsx"));

Then load it from your HTML:

html
<script type="module" src="/app.tsx"></script>

The path you serve at and the file's location are up to you. A common shortcut is a wildcard that serves a whole directory of modules and assets:

ts
app.get("/client/**/*", (c) => serveFile(c.req.path));

serveFile defaults to the current val. If you call it from a non-entrypoint file and paths don't resolve, pass import.meta.url as the second argument.

Default: versioned, immutably cached modules

serveImmutableFile makes your val's frontend faster by letting browsers cache files immutably; publishing bumps the val's version, which invalidates automatically. Measured: repeat visits 665ms → 157ms with zero asset requests.

ts
import { immutableFileUrl, serveImmutableFile } from "https://esm.town/v/std/utils/index.ts";

app.get("/__immutable/*", (c) => serveImmutableFile(c.req.path));

In the never-cached HTML shell, stamp the entry module: immutableFileUrl("/frontend/index.tsx") → /__immutable/42/frontend/index.tsx (42 = the val's current version). Relative imports resolve under the same prefix, so only the entry needs stamping — one route and one stamped URL cover the whole client graph.

  • Old-version URLs 404 after a publish (like Next.js build assets); a reload picks up the new version.
  • Retrofitting an existing val without touching its shell? Also point its old file route at serveImmutableFile — bare paths then 302 into versioned space, at one redirect per page view.
Alternative: serve directly from esm.town

Every val file already has a public esm.town URL that transpiles on demand, so you can skip serveFile and point a script straight at it:

html
<script type="module" src="https://esm.town/v/youruser/yourval/app.tsx"></script>

serveFile is usually preferred because the module is served same-origin from a path you control, and you don't have to hardcode your own val URL.

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

How imports resolve in the browser

The transpiler does not bundle or rewrite imports — it only strips types and JSX. So every import in a client module must be something the browser can fetch as a URL:

  • Local imports need explicit extensions. import { x } from "./util.ts" resolves to /util.ts (or relative to the served path) and must be served too — by the same route or a wildcard. Omitting the extension (./util) 404s.

  • Third-party deps need full ESM URLs. Bare specifiers like import React from "react" don't resolve in the browser. Import from a CDN such as esm.sh, with versions pinned:

    ts
    import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";

    An import map in the HTML is an option if you want bare specifiers in client code.

The same model works for any client code — React, vanilla DOM scripts, a canvas game loop, Alpine, htmx. Only the imports differ; for a plain .ts module with no dependencies there's nothing to load from a CDN at all.

React specifics

Pin all React-family imports to the same version (18.2.0) and pass ?deps=react@18.2.0,react-dom@18.2.0 on libraries that depend on React. Mismatched copies cause Cannot read properties of null (reading 'useState'). See the react-ui skill for JSX and styling conventions.

What not to do

  • No app logic in inline <script> blobs or template-string HTML. Put client code in real .ts/.tsx files so it's typed, linted, and reviewable. A few lines of inline bootstrap are fine; the app is not.
  • No bundler / build command. There is no build step to add.
  • serveStatic from Hono does not work on Val Town — use serveFile.

Verifying changes

Fetch the module's URL (e.g. /app.tsx) and confirm it returns text/javascript, not HTML or an error. Add https://esm.town/v/std/catch to the HTML shell to pipe browser errors into get_logs, then load the page and check the logs. Don't report the change as done without both.

© hashgraph-online, Apache-2.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 plugins/val-town/plugins/skills/client-side-js of hashgraph-online/awesome-codex-plugins.

Open the folder on GitHubat commit 78497e5

Compare with similar skills

Client Side JS 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.

Client Side JS compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Client Side JS this skillhashgraph-online/awesome-codex-plugins1.2k—~1.4kAutomated safety check: PassApache-2.0
Pierre Trees File Treepierrecomputer/pierre6.2k—~473Automated safety check: PassApache-2.0
Typescript Best Practicesbretzel-app/crumbs1271 repos~2.2kAutomated safety check: PassMIT
Connect Component To Figmadequelabs/cauldron129—~2kAutomated safety check: PassMPL-2.0
Fork And GoSimplePDF/simplepdf-embed407—~7.9kAutomated safety check: NotesMIT
Javascript Practiceseser/stack128—~599Automated safety check: PassCustom licence

Similar skills

  • Pierre Trees File Tree

    pierrecomputer/pierre

    Use when an app uses @pierre/trees to render or control a file tree, including React, vanilla JavaScript, SSR, web components, selection, search, rename, drag…

    6.2k GitHub stars~473 tokensUpdated today
    Frontend & DesignAuto-check passed
  • Typescript Best Practices

    bretzel-app/crumbs

    Provides TypeScript patterns for type-first development, making illegal states unrepresentable, exhaustive handling, and runtime validation.

    127 GitHub starsUsed in 1 repo~2.2k tokens
    Frontend & DesignAuto-check passed
  • Connect Component To Figma

    dequelabs/cauldron

    Add a Figma Code Connect (.figma.tsx) file for a Cauldron React component.

    129 GitHub stars~2k tokensUpdated today
    Frontend & DesignAuto-check passed
  • Fork And Go

    SimplePDF/simplepdf-embed

    Guided walkthrough for forking and deploying your own SimplePDF Copilot: hosting choice, Pro-account confirmation, AI-provider wiring, demo customization, deploy, and the SimplePDF whitelist step.

    407 GitHub stars~7.9k tokensUpdated 7 days ago
    Frontend & DesignAuto-check: notes
  • TS and JS conventions for eserstack packages: namespace imports, mod.ts entries, cross-runtime APIs, explicit checks, async, tests and laroux React components.

    128 GitHub stars~599 tokensUpdated 4 days ago
    Frontend & DesignAuto-check passed
  • Vite Proxy Folder Name Conflict

    divinevideo/divine-mobile

    Fix 404 errors for frontend JS files when using Vite proxy. An agent skill from divinevideo/divine-mobile.

    266 GitHub stars~1.3k tokensUpdated today
    Frontend & DesignAuto-check passed

More from hashgraph-online/awesome-codex-plugins

All 686 skills in this repo
  • Anime Reaction Gif

    hashgraph-online/awesome-codex-plugins

    Create original anime-style reaction stickers as looping GIFs and MP4 previews, using generated character pose sheets and timed key poses.

    1.2k GitHub stars~922 tokensUpdated today
    Auto-check passed
  • Calibredb

    hashgraph-online/awesome-codex-plugins

    Manage and query Calibre libraries with the calibredb CLI (local paths or Calibre Content server URLs).

    1.2k GitHub stars~1k tokensUpdated today
    Auto-check passed
  • Rust API Test Harness

    hashgraph-online/awesome-codex-plugins

    A skill your agent uses when adding, changing, testing, or debugging Rust HTTP APIs and services, especially when Codex needs black-box integration tests, random-port app startup, real database test…

    1.2k GitHub stars~1.7k tokensUpdated today
    Auto-check passed
  • Art

    hashgraph-online/awesome-codex-plugins

    Make a studio's game look like something at build time — a cover from a real frame of the game (free), painted covers, backdrops, textures and character plates from image models through the…

    1.2k GitHub stars~2.4k tokensUpdated today
    Auto-check passed
  • Game Balance Economy

    hashgraph-online/awesome-codex-plugins

    Balance game difficulty, resources, rewards, probability, progression, economies, and dominant strategies.

    1.2k GitHub stars~618 tokensUpdated today
    Auto-check passed
  • Manuscript Engagement Analytics

    hashgraph-online/awesome-codex-plugins

    Analyze nonfiction manuscripts for reader engagement signals, including heading-level word counts, slow starts, long slogs, weak takeaway titles, value pacing, beta-reader comment dropoff, and…

    1.2k GitHub stars~875 tokensUpdated today
    Auto-check passed

Works with

Questions about Client Side JS

What does Client Side JS do?

A skill your agent uses when a val needs to ship JavaScript that runs in the browser — React apps, vanilla DOM scripts, canvas/games, htmx/Alpine, or any client-side module beyond a single inline…. Client Side JS is an agent skill from hashgraph-online/awesome-codex-plugins. Use when a val needs to ship JavaScript that runs in the browser — React apps, vanilla DOM scripts, canvas/games, htmx/Alpine, or any client-side module beyond a single inline snippet.

When should I use Client Side JS?

Client Side JS fits situations like: A val needs to ship JavaScript that runs in the browser — React apps; vanilla DOM scripts; any client-side module beyond a single inline snippet.

How do I install Client Side JS in Claude Code?

Run `npx skills add hashgraph-online/awesome-codex-plugins --skill client-side-js -a claude-code`. Or copy the skill folder (plugins/val-town/plugins/skills/client-side-js in hashgraph-online/awesome-codex-plugins) into .claude/skills/client-side-js in your project. Claude Code loads it when a task matches its description.

How do I install Client Side JS in Codex?

Run `npx skills add hashgraph-online/awesome-codex-plugins --skill client-side-js -a codex`. Or copy the skill folder (plugins/val-town/plugins/skills/client-side-js in hashgraph-online/awesome-codex-plugins) into .agents/skills/client-side-js in your project. Codex loads it when a task matches its description.

Can I use Client Side JS 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 hashgraph-online/awesome-codex-plugins --skill client-side-js -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/client-side-js, .gemini/skills/client-side-js, .github/skills/client-side-js and .opencode/skills/client-side-js in your project.

What does Client Side JS need to run?

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

Does Client Side JS access the network?

SKILL.md names 3 domains. In commands or code: esm.town and esm.sh; the agent is likely to contact these when it follows the instructions. As links in the text: developer.mozilla.org. This is read from the text; nothing was executed.

Is Client Side JS 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 Client Side JS use?

Client Side JS is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Client Side JS use?

About 1.4k tokens (SKILL.md is roughly 5.4k 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 Client Side JS?

Skills that share tags, products or a category with Client Side JS: Pierre Trees File Tree (pierrecomputer/pierre, 6.2k stars), Typescript Best Practices (bretzel-app/crumbs, 127 stars), Connect Component To Figma (dequelabs/cauldron, 129 stars) and Fork And Go (SimplePDF/simplepdf-embed, 407 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Client Side JS?

hashgraph-online (a GitHub organization) maintains it in hashgraph-online/awesome-codex-plugins, which has 1,242 GitHub stars. The repository holds 686 skills in this directory. The repository was last updated on October 8, 2026.

Source: hashgraph-online/awesome-codex-plugins on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.