rsuite

React Suite スキル

このスキルは、AI アシスタントがReact Suite v6+でユーザーインターフェースを構築するのに役立ちます。有効にすると、アシスタントはコンポーネント、スタイリング、テーマ設定、アクセシビリティ、国際化に関する React Suite の規約に従います。

このスキルを使用するタイミング

プロジェクトが rsuite に依存している場合（package.json を確認してください）、またはユーザーから React Suite を使った UI の構築を依頼された場合は、このスキルを有効にしてください。

インストール

対象プロジェクトに React Suite をインストールします。

npm install rsuite

アプリケーションのエントリーポイントで、スタイルシートを一度だけインポートします。

import 'rsuite/dist/rsuite.min.css';

コンポーネント単位でインポートする場合（バンドルサイズの縮小に推奨）：

import Button from 'rsuite/Button';
import 'rsuite/Button/styles/index.css';

基本原則

1. カスタムコンポーネントより組み込みコンポーネントを優先してください。 React Suite には80以上のコンポーネントが用意されています。ゼロから構築する前に、利用できるコンポーネントがないか確認してください。
2. as と render* プロパティでコンポーネントを組み合わせてください。 ほとんどのコンポーネントは、描画する要素を変更する as と、サブパーツを上書きする renderX プロパティを受け付けます。
3. グローバル設定（ロケール、テーマ、RTL、classPrefix）には CustomProvider を使用してください。
4. テーマ設定には CSS 変数（--rs-*）を使用し、クラス名は上書きしないでください。
5. 独自に用意した SVG ではなく、アイコンには @rsuite/icons を使用してください。
6. フォームは rsuite の Form、Form.Group、Form.Control、Schema で処理してください。
7. アクセシビリティを確保してください。 入力には必ずラベルを設定し、カスタムトリガーには aria-* 属性を、インタラクティブ要素にはキーボードハンドラーを指定してください。

一般的なパターン

グローバルプロバイダー

import { CustomProvider } from 'rsuite';
import zhCN from 'rsuite/locales/zh_CN';

<CustomProvider theme="dark" locale={zhCN}>
  <App />
</CustomProvider>;

ボタン

import { Button } from 'rsuite';

<Button appearance="primary" size="md" onClick={handleClick}>
  Submit
</Button>;

有効な appearance の値：default | primary | link | subtle | ghost。 有効な size の値：xs | sm | md | lg。 有効な color の値：red | orange | yellow | green | cyan | blue | violet。

バリデーション付きフォーム

import { Form, Schema, Button } from 'rsuite';

const model = Schema.Model({
  name: Schema.Types.StringType().isRequired('Name is required.'),
  email: Schema.Types.StringType().isEmail('Invalid email.')
});

<Form model={model} onSubmit={handleSubmit}>
  <Form.Group controlId="name">
    <Form.ControlLabel>Name</Form.ControlLabel>
    <Form.Control name="name" />
  </Form.Group>
  <Form.Group controlId="email">
    <Form.ControlLabel>Email</Form.ControlLabel>
    <Form.Control name="email" type="email" />
  </Form.Group>
  <Button type="submit" appearance="primary">Save</Button>
</Form>;

テーブル

import { Table } from 'rsuite';
const { Column, HeaderCell, Cell } = Table;

<Table data={data} autoHeight>
  <Column flexGrow={1}>
    <HeaderCell>Name</HeaderCell>
    <Cell dataKey="name" />
  </Column>
  <Column width={120}>
    <HeaderCell>Age</HeaderCell>
    <Cell dataKey="age" />
  </Column>
</Table>;

メッセージとトースター

import { useToaster, Message } from 'rsuite';

const toaster = useToaster();
toaster.push(<Message type="success">Saved.</Message>, { placement: 'topCenter' });

テーマ設定

React Suite は --rs- を接頭辞とする CSS 変数を公開しています。ルートセレクターで上書きしてください。

:root {
  --rs-primary-500: #3498ff;
  --rs-text-primary: #1f2d3d;
}

CustomProvider を使って実行時にテーマを切り替えられます。theme プロパティで指定できる値は "light"、"dark"、"high-contrast" です。

変数の一覧は https://rsuitejs.com/guide/css-variables を参照してください。

アイコン

npm install @rsuite/icons

import SearchIcon from '@rsuite/icons/Search';

<Button startIcon={<SearchIcon />}>Search</Button>;

最新のドキュメントを取得する

コンポーネント、プロパティ、フックの最新情報には、次の優先順位で公式ソースを参照してください。

1. MCP サーバー — @rsuite/mcp は get_component_props、list_components、list_hooks、search_components を公開しています。https://rsuitejs.com/guide/mcp-server を参照してください。
2. LLMs.txt — https://rsuitejs.com/llms.txt と https://rsuitejs.com/llms-full.txt。
3. このスキルに同梱されている（下記参照）、React Suite の公開ドキュメント API にアクセスするヘルパースクリプト。

スクリプト

コンポーネントのデータをプログラムから取得するためのユーティリティスクリプトが含まれています。

• scripts/list_components.mjs — React Suite の全コンポーネントを一覧表示
• scripts/get_component_props.mjs <ComponentName> — 指定したコンポーネントのプロパティを取得
• scripts/list_hooks.mjs — すべてのカスタムフックを一覧表示
• scripts/search_components.mjs <query> — コンポーネントを名前で検索

Node 18+ で実行します。

node scripts/list_components.mjs
node scripts/get_component_props.mjs Button

推奨事項と禁止事項

• 推奨： rsuite/dist/rsuite.min.css をグローバルに一度だけインポートしてください。
• 推奨： Form 内では Form.Control（生の Input ではなく）を使用し、バリデーションが自動的に連携されるようにしてください。
• 推奨： 状態の表現にはインラインスタイルではなく、意味に合った appearance／color の値を選んでください。
• 禁止： コンポーネントのクラス名を直接変更しないでください。代わりに CSS 変数を上書きしてください。
• 禁止： MUI／AntD のコンポーネントを React Suite と併用しないでください。アプリごとにシステムを一つ選んでください。
• 禁止： ドロップダウン、日付ピッカー、ツリーピッカーを独自に実装しないでください。Dropdown、DatePicker、TreePicker を使用してください。

参考資料

• ドキュメント：https://rsuitejs.com
• コンポーネント：https://rsuitejs.com/components/overview
• GitHub：https://github.com/rsuite/rsuite
• MCP サーバー：https://rsuitejs.com/guide/mcp-server
• LLMs.txt：https://rsuitejs.com/guide/llms