By name: neko-kokoro-ui description: ネコゴコロアプリのUI実装ルール。UIに絵文字を使わず、SVGアイコンやイラスト素材で代替する。コンポーネント作成・修正時に必ず参照すること。
ネコゴコロ UI スキル
絶対ルール: 絵文字禁止
UIに絵文字（Unicode Emoji）を一切使用しないこと。 テキストコンテンツ内の絵文字も禁止。
代替手段
| 用途 | NG | OK |
|---|---|---|
| アイコン | 🐱 😸 🐾 📷 🎥 💬 | SVGアイコン（Lucide React, SVGRepo, カスタムSVG） |
| 気分表示 | 😸😾🥰😿 | 猫のイラストSVG or CSSイラスト |
| 装飾 | 🐾✨💡 | SVGパターン、CSSグラデーション |
| ボタンラベル | 「翻訳するニャ！🐾」 | 「翻訳するニャ！」＋SVGアイコン |
推奨アイコンソース（ライセンス確認済みのもの）
- Lucide React (
lucide-react) — 汎用アイコン（カメラ、動画、テキスト、履歴等） - SVGRepo (svgrepo.com) — 猫・肉球などのフリーSVG（MIT/CC0ライセンスを選ぶ）
- カスタムSVG — デザイナーが作成した猫イラスト
- CSSのみのイラスト — シンプルな猫の顔や肉球はCSSで描画可能
気分（mood）の表現方法
気分はテキスト＋カラーで表現する。絵文字の代わりに色付きバッジを使用。
ご機嫌 → amber/オレンジのバッジ + 猫アイコン（目が細い幸せ顔）
リラックス → purple のバッジ + 猫アイコン（目を閉じた穏やか顔）
甘えたい → pink のバッジ + 猫アイコン（すり寄る姿）
不安 → gray のバッジ + 猫アイコン（耳が伏せた姿）
イライラ → red のバッジ + 猫アイコン（しっぽが膨らんだ姿）
興奮 → orange のバッジ + 猫アイコン（目が大きく開いた姿）
警戒 → red-dark のバッジ + 猫アイコン（背中が弓なり姿）
退屈 → gray-light のバッジ + 猫アイコン（横たわる姿）
眠い → violet のバッジ + 猫アイコン（丸まった姿）
お腹すいた → green のバッジ + 猫アイコン（口を開けた姿）
デザイントーン
- やわらかく、遊び心がある、猫好きが喜ぶデザイン
- カラーパレット: 暖色オレンジ〜アンバー、ベージュ、肉球ピンク
- フォント: 丸みのある親しみやすいフォント（Zen Maru Gothic等）
- 猫の回答は吹き出しUI（猫アイコン付き）で表示
- モバイルファースト・レスポンシブ
コンポーネント規約
- アイコンは
src/components/icons/にSVGコンポーネントとしてまとめる - 気分アイコンは
src/components/icons/moods/に配置 - 共通の猫イラストは
src/components/icons/cat/に配置 - アイコンのサイズは props で制御可能にする（デフォルト 24px）