handsontable-nextjs

name	handsontable-nextjs
description	Next.js/ReactでHandsontableデータグリッドを実装・修正・レビュー・移行するためのSkill。App Router/Pages Router、Client Component境界、@handsontable/react-wrapper、HotTable、HotColumn、EditorComponent、Reactカスタムrenderer/editor/validator、全セル型、モジュール/プラグイン、Theme API/CSS、i18n、hooks/API/保存、bundle最適化を扱う依頼で使う。
allowed-tools	Read, Write, Edit, MultiEdit, Bash, Grep, Glob

Handsontable + Next.js Skill

目的

Next.js で Handsontable を安全に導入・実装・移行・レビューする。特に、React wrapper のコンポーネント種別、セル型、セル関数、モジュール、プラグイン、テーマ、国際化、hooks/API を漏らさず確認する。

最初に読むファイル

依頼に合わせて、次の順で参照する。

1. references/01-nextjs-setup.md — Next.js App Router / Pages Router、Client Component、SSR回避、CSS/テーマ
2. references/02-component-inventory.md — HotTable / HotColumn / EditorComponent / React renderer / editor / validator / ref の全体像
3. references/03-cell-types-and-cell-functions.md — built-in cell types、renderer/editor/validator、custom cell type
4. references/04-modules-plugins-themes-i18n.md — モジュール登録、全プラグイン、テーマ、i18n、機能マップ
5. references/05-hooks-api-data-saving.md — hooks、instance API、保存、サーバー連携
6. references/06-quality-checklist.md — 実装前後の漏れ防止チェック

公式ドキュメントや package.json の Handsontable バージョンが、この Skill 作成時点の参照バージョンと違う場合は、実装前に該当バージョンの公式 docs / changelog / migration guide を確認する。

実装ワークフロー

1. 環境を判定する

   • App Router か Pages Router か。
   • TypeScript か JavaScript か。