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 JSX/React conventions, Twind/Tailwind styling, React version pinning, the view-source link requirement, and what to avoid (template-string HTML, external assets).
Install
With your agent
Install OMGSkills skill "val-town/plugins:plugin/skills/react-ui" into this agent's normal skills directory: call the OMGSkills MCP get_install_plan tool for your agent and run the script it returns (it installs only the pinned commit and verifies SKILL.md), and stop if MCP or the pin is unavailable. Do not overwrite or change existing skills without asking me.
Manual command
git clone https://github.com/val-town/plugins /tmp/plugins && ln -s /tmp/plugins/plugin/skills/react-ui ~/.claude/skills/react-ui
From README
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 remixval instead of building from scratch. File conventions 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 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: Then use Tailwind classes directly in JSX: Avoid inline tags, CSS-in-JS objects, or separate .css files, unless the user says otherwise.
More from this repo
blob-storage
Used when a val needs simple key/value persistence — JSON documents, cached responses, uploaded files, or binary assets.
client-side-js
Used when a val needs to ship JavaScript that runs in the browser — React apps, vanilla DOM scripts, canvas/games,...
create-skill
Used when the user wants to persist a preference, skill, or knowledge.
