react-ui
Use when building any val with a user interface — dashboards, web apps, landing pages, forms, admin tools, anything users see in a browser. Covers J…
它会碰到什么
这一栏是扫描器报的事实，不是结论。命中多不等于有毒（安全工具、规则库、示例脚本本来就会包含危险写法），命中少也不等于干净。它和你手上的凭据、文件、网络有什么关系，需要你自己看。
技能内容
React UI
For any val that renders a UI, prefer to build it with React components in .tsx files, unless the user states otherwise. The templates/react-hono-starter template is set up for this — start there with remix_val instead of building from scratch.
File conventions
Put markup, styles, and scripts in real files — avoid template literal strings (e.g. new Response(\<html>...</html>\)). Code in template strings has no syntax highlighting, no linting, no type checking, and is unreviewable.
.tsx— React/JSX components, any UI with logic or interactivity.html— purely static markup.ts— server code and scripts
Build UI component by component in .tsx files. Compose small components rather than rendering one giant page.
Styling: Twind + Tailwind
Prefer Twind to apply Tailwind utility classes at runtime — no build step required. Add the script to your HTML shell:
<script src="https://cdn.twind.style" crossorigin></script>Then use Tailwind classes directly in JSX:
<div className="flex items-center gap-4 p-6 rounded-lg bg-white shadow">
<h1 className="text-2xl font-bold">Hello</h1>
</div>Avoid inline <style> tags, CSS-in-JS objects, or separate .css files, unless the user says otherwise.
Serving assets: versioned + immutable
Serve client modules with serveImmutableFile from std/utils — browsers cache
them immutably, and publishing bumps the val's version, which invalidates
automatically (full pattern: the client-side-js skill). A never-cached
frontend/root.tsx shell (hono/jsx) stamps the entry and favicon with
immutableFileUrl:
// frontend/root.tsx — in the Root() HTML shell:
<script src={immutableFileUrl("/frontend/index.tsx")} type="module" />
// index.ts:
app.get("/", (c) => c.html(Root()));
app.get("/__immutable/*", (c) => serveImmutableFile(c.req.path));View source link
Every UI val should expose a way for users to see and remix its source. Both parts are required:
- Backend route:
import { parseVal } from "https://esm.town/v/std/utils/index.ts";
app.get("/source", (c) => c.redirect(parseVal().links.self.val));- Visible link in the frontend:
<a href="/source">view source</a>React version pinning
A common error — "Cannot read properties of null (reading 'useState')" — means a React sub-dependency is loading a different React version. Pin all React-related imports to 18.2.0:
import SomeLib from "https://esm.sh/some-lib?deps=react@18.2.0,react-dom@18.2.0";Assets
Do not use external images or hosted assets that may break. Prefer:
- Emojis or unicode symbols
- Inline SVG
- Icon fonts via CDN (Lucide, Font Awesome)
Surfacing client-side errors
To send browser errors back to val logs (visible via get_logs), include this script in your HTML shell:
<script src="https://esm.town/v/std/catch"></script>Verifying changes
After editing a UI val, call fetch_val_endpoint to confirm the page renders without error, then check get_logs for any client-side errors. Don't report the change as done without both.
想直接用这个技能？
本站把开放许可（MIT / Apache 等）的技能按仓库打包整理到网盘，点一下转存到你自己的网盘，不用一个个从 GitHub 拉。许可未声明的技能只给原始仓库链接，不打包。
它属于哪个仓库
plugins/val-town/plugins/skills/react-ui/SKILL.md