Download for MacApple silicon, macOS 14+
Skill

react-ui

@val-town Updated 2026-10-13

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.