# react-ui

> Claude/Codex skill by [@val-town](https://omgskills.com/library/val-town/index.md) · 10 stars · 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

```sh
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.

## Links

- HTML page: https://omgskills.com/library/val-town/plugins/plugin/skills/react-ui/
- GitHub: https://github.com/val-town/plugins
- Author: [@val-town](https://omgskills.com/library/val-town/index.md)

## More from this repo

- [blob-storage](https://omgskills.com/library/val-town/plugins/plugin/skills/blob-storage/index.md) — Used when a val needs simple key/value persistence — JSON documents, cached responses, uploaded files, or binary assets.
   - [@val-town](https://omgskills.com/library/val-town/index.md) · 10 stars
- [client-side-js](https://omgskills.com/library/val-town/plugins/plugin/skills/client-side-js/index.md) — Used when a val needs to ship JavaScript that runs in the browser — React apps, vanilla DOM scripts, canvas/games,...
   - [@val-town](https://omgskills.com/library/val-town/index.md) · 10 stars
- [create-skill](https://omgskills.com/library/val-town/plugins/plugin/skills/create-skill/index.md) — Used when the user wants to persist a preference, skill, or knowledge.
   - [@val-town](https://omgskills.com/library/val-town/index.md) · 10 stars