메뉴
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).
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Use when the user wants to persist a preference, skill, or knowledge. Use when it would aid future val development to store a memory of how best to build something.
Use when a val needs to ship JavaScript that runs in the browser — React apps, vanilla DOM scripts, canvas/games, htmx/Alpine, or any client-side module beyond a single inline snippet. Explains how Val Town serves transpiled .ts/.tsx/.jsx modules with no build step, how the browser resolves their imports, and how to load third-party deps.
Use when building an HTTP val — a web endpoint, API route, webhook receiver, or any val that responds to HTTP requests. Covers the handler signature, Hono usage, the endpoint URL, CORS behavior, redirects, and Val Town-specific limitations.
Use when a val needs simple key/value persistence — JSON documents, cached responses, uploaded files, or binary assets. Covers the std/blob API, listing and deleting keys, account-global or val scoping, and storage limits.
Use when a val needs to require login with a Val Town account — gating routes behind authentication, identifying the current user, building user-specific dashboards. Covers std/oauth's `oauthMiddleware` and `getOAuthUserData`, the auto-managed `/auth/*` routes, and session behavior. For third-party OAuth providers (Google, GitHub, etc.) see the `third-party-integrations` skill instead.
Use when a val sends email, receives email, or is triggered by an incoming email. Covers email-type vals (the Email handler shape, attachment limits, the assigned val email address) and sending mail via std/email.
| name | react-ui |
| description | 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). |
| triggers | ["react","jsx","tsx","ui","frontend","component","dashboard","page","app","twind","tailwind","styling","css","html"] |
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/some-lib?deps=react@18.2.0,react-dom@18.2.0";
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.