スキルOfficialdeployment

🎨react-ui

プラグイン: valtown
ソース: GitHub で見る ↗

説明

次のような場合に使用: ダッシュボード、Webアプリ、ランディングページ、フォーム、管理ツールなど、ブラウザ上でユーザーが目にするあらゆるUIを持つvalを構築する場合。 JSX/Reactの規約、Twind/Tailwindによるスタイリング、Reactのバージョン固定、ソース表示リンクの要件、および避けるべき事項（テンプレート文字列によるHTML生成、外部アセットの使用など）を網羅しています。

原文を表示

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).

ユースケース

✓ダッシュボードのUIを構築する
✓WebアプリのUIを構築する
✓ランディングページのUIを構築する
✓フォームのUIを構築する
✓管理ツールのUIを構築する

本文（日本語訳）

React UI

UIをレンダリングするvalには、ユーザーから特別な指定がない限り、.tsxファイル内のReactコンポーネントを使って構築することを優先してください。 templates/react-hono-starterテンプレートがこの構成に対応しているため、ゼロから作成するのではなく、remix_valを使ってそこから始めてください。

ファイルの規約

マークアップ・スタイル・スクリプトは実際のファイルに記述し、テンプレートリテラル文字列（例: new Response(\<html>...</html>`)`）は使用しないでください。テンプレート文字列内のコードは、シンタックスハイライト・リント・型チェックが効かず、レビューも困難です。

.tsx — React/JSXコンポーネント、ロジックやインタラクティブ性を含むすべてのUI
.html — 純粋な静的マークアップ
.ts — サーバーコードおよびスクリプト

UIは.tsxファイル内でコンポーネント単位に構築してください。巨大な1ページをそのままレンダリングするのではなく、小さなコンポーネントを組み合わせて構成してください。

スタイリング: Twind + Tailwind

ビルドステップ不要でTailwindのユーティリティクラスをランタイムに適用できるTwindを優先して使用してください。 HTMLシェルに以下のスクリプトを追加します。

<script src="https://cdn.twind.style" crossorigin></script>

その後、JSX内でTailwindクラスを直接使用します。

<div className="flex items-center gap-4 p-6 rounded-lg bg-white shadow">
  <h1 className="text-2xl font-bold">Hello</h1>
</div>

ユーザーから特別な指定がない限り、インライン<style>タグ・CSS-in-JSオブジェクト・独立した.cssファイルは使用しないでください。

ソース表示リンク

すべてのUI valには、ユーザーがそのソースを確認してリミックスできる手段を設ける必要があります。以下の2つが両方必要です。

バックエンドルート:

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

Reactバージョンの固定

"Cannot read properties of null (reading 'useState')" というエラーが発生する場合、React のサブ依存パッケージが異なるバージョンのReactを読み込んでいることが原因です。 React関連のインポートはすべて18.2.0に固定してください。

import SomeLib from "https://esm.sh/some-lib?deps=react@18.2.0,react-dom@18.2.0";

アセット

壊れる可能性のある外部画像やホスティング済みアセットは使用しないでください。代わりに以下を優先してください。

絵文字またはUnicode記号
インラインSVG
CDN経由のアイコンフォント（Lucide、Font Awesomeなど）

クライアントサイドエラーの収集

ブラウザのエラーをvalのログ（get_logsで確認可能）に送信するには、HTMLシェルに以下のスクリプトを追加してください。

<script src="https://esm.town/v/std/catch"></script>

変更の確認

UI valを編集した後は、fetch_val_endpointを呼び出してページがエラーなくレンダリングされることを確認し、さらにget_logsでクライアントサイドのエラーがないかチェックしてください。この両方を確認せずに変更完了を報告しないでください。

原文（English）を表示

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 remix_val instead of building from scratch.

File conventions

Put markup, styles, and scripts in real files — avoid template literal strings (e.g. new Response(\<html>...</html>`)`). 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:

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

View source link

Every UI val should expose a way for users to see and remix its source. Both parts are required:

Backend route:

import { parseVal } from "https://esm.town/v/std/utils/index.ts";
app.get("/source", (c) => c.redirect(parseVal().links.self.val));

Visible link in the frontend:
```
<a href="/source">view source</a>
```

React version pinning

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";

Assets

Do not use external images or hosted assets that may break. Prefer:

Emojis or unicode symbols
Inline SVG
Icon fonts via CDN (Lucide, Font Awesome)

Surfacing client-side errors

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>

Verifying changes

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.

原文・著作権は Anthropic および各プラグイン作者に帰属します。日本語訳は Claude API による自動翻訳です。