ClipVault - ブラウザ完結型スニペット・クリップボード管理ツール

## 1. アプリの目的・ターゲットユーザー
コード・定型文・メモ・URLなどの「よく使うテキスト片」をブラウザ上に保存・分類・即コピーできるスニペット管理ツール。エンジニア・ライター・事務職・学生など、日常的にテキストを使い回す全ユーザーが対象。登録不要でLocalStorageに保存するため即利用可能。

## 2. 主要機能
- **スニペット登録・管理**: タイトル・本文・タグ・言語種別（Plain / HTML / CSS / JS / Python / SQL / Markdown / その他）を入力して保存。文字数カウントリアルタイム表示。
- **ワンクリックコピー**: カード上の「コピー」ボタンで本文をクリップボードへ即転送。コピー後は「✔ Copied!」と0.8秒フィードバック表示。
- **タグ＆カテゴリフィルター**: 複数タグをカンマ区切りで自由付与。タグ一覧クリックで絞り込み表示。言語別フィルタータブも常設。
- **キーワード検索**: タイトル・本文・タグをリアルタイム全文検索。マッチ箇所をハイライト表示。
- **シンタックスハイライト**: 言語種別に応じてhighlight.js（CDN）で本文をカラー表示。長文はデフォルト折りたたみで展開ボタン。
- **エクスポート／インポート**: 全スニペットをJSON形式でダウンロード・アップロード。別PCや友人とのデータ共有に対応。お気に入り（星マーク）機能で重要スニペットをピン留め。

## 3. 画面構成
### ヘッダー
- ロゴ「ClipVault」＋検索バー（常時表示）＋「＋ 新規追加」ボタン

### サイドバー（PC）/ 横スクロールタブ（SP）
- タグ一覧（件数バッジ付き）・言語フィルター・お気に入り・全件

### メインエリア：スニペットカード一覧
- 2カラム（PC）/ 1カラム（SP）のカードグリッド
- 各カード：タイトル・言語バッジ・タグChip・本文プレビュー（最大5行）・コピーボタン・星ボタン・編集ボタン・削除ボタン
- カード右上に「登録日時」表示

### モーダル：新規追加 ／ 編集
- タイトル入力（必須）
- 言語種別セレクト
- タグ入力（カンマ区切り、サジェスト付き）
- 本文テキストエリア（シンタックスハイライトプレビュー切替タブ）
- 保存 ／ キャンセルボタン

### フッター
- 保存件数・最終更新日時・エクスポート・インポートボタン

## 4. データ構造
LocalStorageにJSONで保存（DBなし・サーバーサイドPHP不要）。

```json
{
"snippets": [
{
"id": "uuid-v4",
"title": "スニペット名",
"body": "本文テキスト",
"lang": "javascript",
"tags": ["react", "hooks"],
"favorite": false,
"createdAt": "2025-01-01T00:00:00Z",
"updatedAt": "2025-01-01T00:00:00Z"
}
]
}
```

LocalStorageキー名: `clipvault_data`。最大保存件数は500件（超過時は古い順に削除警告）。

## 5. デザインの方向性
- **カラーパレット**: ダークモード基調（背景 #0f1117、カード #1a1d27）＋アクセントカラー：エレクトリックシアン (#00d4ff)。コード管理ツールらしいクールなエディター風UIで技術者の所有欲を刺激する。
- **フォント**: 本文はモノスペース（`JetBrains Mono` or `Courier New`）、UIは `Inter` or `Noto Sans JP`。
- **言語バッジ**: 言語ごとに異なる背景色のPill型バッジ（JS=黄、Python=青、HTML=橙、SQL=紫、Plain=グレーなど）。
- **アニメーション**: カード追加時にフェードイン、コピー成功時にチェックアイコンがバウンス。
- **ライトモード切替**: ヘッダー右端のトグルでライト／ダーク切替可能。状態はLocalStorageに保存。
- 全体的にVS Code拡張機能やNotionのような「使っていて気持ちいい」モダンツール感を目指す。