---

name: ui-generator description: PRESIDENT CARDの画面を生成する。新しいページ作成、既存画面の修正、コンポーネント配置時に使用。

UI Generator Skill

PRESIDENT CARDのデザインシステムに準拠した画面を生成します。

出力先

/playground/design-lab/pages/[PageName].tsx

画面構成テンプレート

Copyimport React, { useState } from 'react';
import { DashboardLayout, Card } from '../DashboardLayout';
import { Button } from '../../../components/ui/Button';
import { Input } from '../../../components/ui/Input';
import { Table, ColumnDef } from '../../../components/ui/Table';
import { Pagination } from '../../../components/ui/Pagination';
import { Chip } from '../../../components/ui/Chip';
import { Search, Plus, Filter } from 'lucide-react';

// 型定義
interface DataItem {
  id: number;
  // ... fields
}

// ダミーデータ
const sampleData: DataItem[] = [
  // ...
];

export const [PageName]Page: React.FC = () => {
  const [currentPage, setCurrentPage] = useState(1);
  const pageSize = 10;

  return (
    <DashboardLayout activePath="[path]">
      <div className="space-y-6">
        {/* 1. ヘッダー */}
        <div className="flex items-center justify-between">
          <h1 className="text-2xl font-bold text-text-primary">タイトル</h1>
          <div className="flex items-center gap-2">
            <Button variant="primary" icon={<Plus className="w-4 h-4" />}>
              追加
            </Button>
          </div>
        </div>

        {/* 2. データテーブル */}
        <Card noPadding>
          {/* ツールバー */}
          <div className="flex items-center justify-between px-6 py-4 border-b border-line">
            <Input
              placeholder="検索..."
              leftIcon={<Search className="w-4 h-4" />}
              className="w-64"
            />
            <Button variant="secondary" icon={<Filter className="w-4 h-4" />}>
              フィルタ
            </Button>
          </div>

          {/* テーブル */}
          <Table data={paginatedData} columns={columns} />

          {/* ページネーション */}
          <div className="px-6 py-4 border-t border-line">
            <Pagination
              totalItems={totalItems}
              currentPage={currentPage}
              pageSize={pageSize}
              onPageChange={setCurrentPage}
            />
          </div>
        </Card>
      </div>
    </DashboardLayout>
  );
};

必須要素

データ一覧画面

1. ヘッダー: タイトル + アクションボタン
2. ツールバー: 検索 + フィルタ
3. テーブル: ソート可能なカラム
4. ページネーション: 10件/ページ

詳細画面

1. ヘッダー: タイトル + 戻るボタン
2. 情報カード: 主要情報
3. アクションエリア: 編集/削除ボタン

禁止パターン

Copy// ❌ 生HTML
<button>クリック</button>
<input type="text" />
<table><tr><td>...</td></tr></table>

// ❌ Tailwind装飾
<div className="bg-blue-500 text-white rounded-lg shadow-md">

// ❌ インラインスタイル
<div style={{ backgroundColor: 'blue' }}>

許可パターン

Copy// ✅ レイアウト用Tailwind
<div className="flex items-center gap-4">
<div className="grid grid-cols-2">
<div className="space-y-6">

// ✅ サイズ指定
<Input className="w-64" />
<Button className="w-full">

コンポーネント詳細

詳細は templates/component-catalog.md を参照。

参照実装

詳細は examples/page-pattern.md を参照。