From Val Town
Use when building any val with a user interface — dashboards, web apps, landing pages, forms, admin tools, anything users see in a browser. Covers JSX/React conventions, Twind/Tailwind styling, React version pinning, the view-source link requirement, and what to avoid (template-string HTML, external assets).
How this skill is triggered — by the user, by Claude, or both
Slash command
/vals:react-uiThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
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.
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.
Put markup, styles, and scripts in real files — avoid template literal strings (e.g. new Response(\...`)`). 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 scriptsBuild UI component by component in .tsx files. Compose small components rather than rendering one giant page.
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.
Every UI val should expose a way for users to see and remix its source. Both parts are required:
import { parseVal } from "https://esm.town/v/std/utils/index.ts";
app.get("/source", (c) => c.redirect(parseVal().links.self.val));
<a href="/source">view source</a>
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/[email protected],[email protected]";
Do not use external images or hosted assets that may break. Prefer:
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>
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.
Provides CDSS development patterns for drug interaction checking, dose validation, clinical scoring (NEWS2, qSOFA), and alert classification integrated into EMR workflows.
npx claudepluginhub val-town/plugins --plugin valtown