Openclaw向けReact TypeScript スキル

TypeScript 5.9 と React Compiler を使用して、型安全な React 19.2 アプリケーションを構築するための高性能なスキルです。

tenequm

v0.1.1

May 1, 2026

インストール

概要情報

Skill.md

インストール＆ダウンロード

1. ClawHub CLI

レジストリから直接スキルをインストールする最速の方法です。


                  npx clawhub@latest install react-typescript

2. 手動インストール

スキルフォルダを以下のいずれかの場所にコピーしてください

グローバル

~/.openclaw/skills/

ワークスペース

<project>/skills/

優先順位：ワークスペース > ローカル > バンドル

3. プロンプトのインストール

このプロンプトをOpenClawにコピーするだけで、自動的にインストールされます。


                  Clawhubを使って react-typescript をインストールして。Clawhubがインストールされていない場合は、先にインストールしてください（npm i -g clawhub）。

ダウンロードをご希望ですか？

ZIPアーカイブで生のスキルファイルを取得します。

React TypeScript スキルとは？

このスキルは、React 19.2 と TypeScript 5.9 の最新の安定機能を使用してモダンな React アプリケーションを構築するための決定的な技術パターンを提供します。メモ化を自動化し、useMemo や useCallback などの手動 hook を置き換える React Compiler を通じてパフォーマンスを最大化することに重点を置いています。Openclaw Skills 内でこのスキルを統合することで、開発者はネイティブの ref props、最適化されたメタデータのホイスティング、および高度な状態保持を活用する、クリーンで関数型のコンポーネントを作成するためのフレームワークにアクセスできます。

このスキルは厳格な型安全性を強調し、satisfies 演算子や import defer などの TypeScript の最新機能を活用しています。判別共用体（discriminated unions）と堅牢な context パターンを使用することで、コンポーネントがパフォーマンスに優れているだけでなく、一般的なランタイムエラーに対しても耐性があることを保証します。

React TypeScript スキルのユースケース

自動最適化のために React Compiler を活用する高性能な React 19.2 アプリケーションの構築。
useActionState と useTransition を使用した、型安全なフォームロジックとサーバーサイド遷移の開発。
Activity コンポーネントを使用して、タブやマルチステップウィザードなどの非表示の UI 要素で状態を保持。
不要な再レンダリングを防ぐために、useEffectEvent を使用して effect から非リアクティブなロジックを抽出。
コンポーネントロジック内で title タグと meta タグを直接レンダリングすることにより、ネイティブドキュメント SEO を実装。

React TypeScript スキルの仕組み

verbatimModuleSyntax や noUncheckedIndexedAccess などの機能を有効にするために、厳格な TypeScript 5.9 構成で環境を初期化します。
コンポーネントや高コストな計算のメモ化を自動的に処理するように、ビルドパイプラインを介して React Compiler を構成します。
ref が標準の prop として渡される React 19 のパターンを採用し、コンポーネントをプレーンな関数として定義します。
use() hook を使用して非同期データと context ルックアップを管理し、Openclaw Skills ワークフロー内でよりクリーンな条件付きロジックを可能にします。
シームレスなユーザーエクスペリエンスのために、ネイティブの React 19 hook を使用して型安全な状態遷移と楽観的 UI アップデートを実装します。

React TypeScript スキルのセットアップ

React Compiler と TypeScript 5.9 パターンを有効にするには、まず必要な開発依存関係をインストールします。

pnpm add -D babel-plugin-react-compiler

コンパイラプラグインを含めるように Vite または Babel の設定を構成します。

// vite.config.ts
import react from "@vitejs/plugin-react"

export default {
  plugins: [
    react({
      babel: {
        plugins: ["babel-plugin-react-compiler"],
      },
    }),
  ],
}

モダンな TypeScript 機能をサポートするために、tsconfig.json が "module": "nodenext" に設定されていることを確認してください。

React TypeScript スキルのデータスキーマとタクソノミー

このスキルは、型安全性とランタイムの予測可能性を最大化するためにデータ構造を整理します。

コンポーネントエンティティ	パターン	実装
Props	ネイティブ拡張	すべての HTML 属性を継承するために `React.ComponentProps<"element">` を使用します。
State	判別共用体	boolean をステータスベースのオブジェクト（idle, loading, error, success）に置き換えます。
References	RefObject	React 19 要素は `RefObject<T
Validation	Zod v4	型安全なフォームバリデーションとエラー処理のために `useActionState` と統合します。

React TypeScript スキルの高度な機能

自動メモ化 (Auto-Memoization): ビルド時の分析により、手動の useMemo/useCallback オーバーヘッドを排除します。
Activity API: 非表示の UI コンポーネントに対して状態保持とバックグラウンドプレレンダリングを可能にします。
Effect Events: 再実行をトリガーせずに effect 内部でリアクティブな値を読み取る方法を提供します。
楽観的アップデート (Optimistic Updates): useOptimistic を使用した非同期アクション中の即時の UI フィードバックのための組み込みサポート。
遅延インポート (Deferred Imports): 重いモジュールの初期バンドル評価時間を短縮するために、TypeScript 5.9 の import defer を活用します。