engram-visual-language

使用するタイミング

次の場合にこのスキルを使用します。

• styles.css を編集するとき
• 新しいダッシュボードのセクションや状態を作成するとき
• レイアウト、間隔、タイポグラフィ、色の使い方を調整するとき

---

ビジュアルルール

1. ダッシュボードは、汎用的な SaaS 管理画面ではなく、Engram らしく感じられるものにします。
2. 明確な階層構造を優先し、コンテナーを減らして、余白をよりはっきりと設けます。
3. TUI に着想を得たパレットと、モノスペースやディスプレイ向けのアクセントを意図的に使います。
4. 機械的なタイムスタンプや生の識別子は、人がひと目で把握しやすい UI 形式にします。
5. 装飾的な枠組みによって、コンテンツが読みにくくならないようにします。

---

情報密度のルール

• 情報のグループ分けが明確になる場合を除き、ボックスの中にボックスを重ねる構成は避けます。
• 重要なテキストは、枠に接したり、窮屈に見えたりしてはいけません。
• メトリクスはひと目で読み取れるようにします。
• テーブルは整理され、位置が揃い、ヒーロー領域より視覚的に控えめな状態を保ちます。