インストール

npm install @gunkin/uiify react react-dom

behavior.cssの読み込み

アプリごとに一度インポートします。ポップオーバー、details、ダイアログの状態を動かすルールを含み、色、フォント、余白は含みません。

import "@gunkin/uiify/components/behavior.css";

クライアントコードではルートエントリーからインポートします。未使用のコンポーネントはツリーシェイキングで除去されます。

import { Button } from "@gunkin/uiify";

Server Componentでは、コンポーネント専用のエントリーからインポートします。

import { Accordion } from "@gunkin/uiify/components/accordion";

パッケージにはESMと.d.tsファイルが含まれます。moduleResolutionを"bundler"または"nodenext"に設定し、verbatimModuleSyntaxを有効にしてください。

{
  "compilerOptions": {
    "moduleResolution": "bundler",
    "verbatimModuleSyntax": true
  }
}

/uiifyスキルは、コンポーネントのレシピ、UX指針、レイアウトパターンをエージェントに提供します。ページに必要な情報だけを読み、既存のルートとスタイリングに従い、適したコンポーネントがなければ独自のUIを作成します。プロジェクトにコピーしてください。

mkdir -p .agents/skills/uiify
cp -R node_modules/@gunkin/uiify/skills/uiify/. .agents/skills/uiify/

Claude Codeでは、.agentsの代わりに.claudeを使います。モノレポでは、解決済みのnode_modulesパスを使ってください。ページの概要を添えて実行します。他のエージェントでは、それぞれのスキル構文を使います。

/uiify Build a responsive product page at /products

既存のチェックを再利用し、Playwrightやaxe-coreをインストールする場合は事前に通知します。