Menü
k8oが好むUIデザインの方針。UIコンポーネントの作成、画面デザイン、スタイリングの判断時に使用する。ArteOdysseyを使うプロジェクトではコンポーネントやトークンの具体的な使い方を、それ以外のプロジェクトではデザインの方向性を提供する。自由にデザインを作るとき、見た目の判断に迷ったとき、UIレビュー時にも使用する。
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
cmuxターミナル内での操作スキル。CMUX_*環境変数が存在する場合、cmuxのCLIコマンドを使う前に必ずこのスキルを読む。ペイン分割、コマンド送信、ブラウザ自動化、通知、Markdown/diffのプレビュー、cmux設定の変更など、cmux操作全般で使用する。「別ペインで開いて」「横に表示して」「ブラウザで確認して」「プレビューして」「diffを見せて」などのときにも使用する。
Preview generated Markdown (plans, design notes, reviews, research reports) in the user's browser. Use when sharing long, structured output — documents with headings, tables, code blocks, or Mermaid diagrams — that is hard to read in the terminal.
バグを場当たり修正せず、根本原因を特定してから直すためのデバッグ手順。再現→切り分け→根本原因→検証の順で進める。バグ・デバッグ・原因不明・落ちる・再現しない・CIが赤・flakyなテスト・想定外の挙動に遭遇したときに使用する。「デバッグして」「なぜ落ちる」「原因を調べて」などのときにも使用する。
「完了」「直した」と報告する前に、実際に実行・テスト・観察して根拠を確かめるための検証ルール。修正・実装・リファクタが終わって成功を報告しようとするとき、変更が意図どおり動くと主張する前に使用する。「できた」「直した」「実装した」「修正完了」と言おうとしているときに使用する。
日本語の技術文書を書いた後・公開前にレビューし、重要度つきの指摘レポートを出すスキル（ファイルは変更しない）。日本語の文章品質・AI Slop・表記の慣習・整合性・独自性・語り口を点検する。媒体非依存の汎用版で、ブログMDXなどプロジェクト固有のレビュースキルがあればそちらを優先・併用する。
新しい k8o プロジェクト/リポジトリを立ち上げる一連の手順。@k8o/create で雛形生成 → GitHub リポジトリ作成 → ブランチ保護 ruleset とマージ設定 → リリース用 secret(fnox経由) → npm 初回 publish と Renovate 有効化まで。「新しい repo を作る」「プロジェクトを立ち上げる」「リポジトリの初期設定をする」ときに使用する。
| name | k8o-design |
| description | k8oが好むUIデザインの方針。UIコンポーネントの作成、画面デザイン、スタイリングの判断時に使用する。ArteOdysseyを使うプロジェクトではコンポーネントやトークンの具体的な使い方を、それ以外のプロジェクトではデザインの方向性を提供する。自由にデザインを作るとき、見た目の判断に迷ったとき、UIレビュー時にも使用する。 |
k8oが好むデザインの方針。
触れるものは柔らかく、読むものは端正に。
LinearやCal.comのような方向性。余白がしっかりあり、情報の構造が明確で、視線が自然に流れる。レイアウトとタイポグラフィで魅せ、装飾に頼らない。ただし「ただ情報を載せただけ」に見えるのはNG。意図とこだわりが感じられるデザインを目指す。
色ではなく、余白のゆとりと形の柔らかさがこのデザインの個性を作る。色は穏やかで目に優しいことが条件であり、色そのものが主役ではない。
すべてを同じトーンにしない。要素の役割に応じてシャープさと柔らかさを使い分ける。
| 要素の種類 | 方向性 | 理由 |
|---|---|---|
| フォーム（input, textarea, button） | 柔らかい（大きな角丸、ピル型ボタン） | ユーザーが触れる場所は親しみやすく |
| カード・コンテナ | 柔らかい（rounded-xl〜2xl、ふんわり影） | コンテンツの器は穏やかに |
| 情報表示（Alert, Badge） | 現行のまま（過度に丸めない） | 情報の明確さを優先 |
| ナビゲーション（Tabs, Breadcrumb） | シャープ（現行のまま） | 構造を示す要素は端正に |
| 軸 | 好み |
|---|---|
| ページ背景 | 薄いグレー（bg-subtle）。カードが白で浮く構造 |
| カード | 白背景、大きめ角丸、ふんわり影で奥行き |
| コントラスト | 穏やか。攻撃的でない、目が休まる |
| 余白 | たっぷり。p-8〜p-10、gap-8〜gap-16 |
「AIが生成したUI」に見えるパターンを徹底的に避ける:
/90, /80）シンプルなだけで工夫のないUIも避ける:
60-30-10の比率:
色は穏やかで控えめに。鮮やかなパレットは引き出しとして持つが、UIに出る色はセマンティックトークンで抑えたトーンにする。色で魅せるのではなく、空間と形で魅せる。
leading-relaxed（1.625）で日本語の可読性を確保uppercase や letter-spacing の拡大をしないgap-6 を標準間隔、gap-8 / gap-10 をセクション区切りにbg-subtle、カードが白で浮く構造を基本にするSeparator + 余白を使うease-out のみ。spring / bounce は使わないtransition-colors duration-150 ease-outprefers-reduced-motion を尊重する| 状態 | 表現 |
|---|---|
| ホバー | 控えめな背景色変化 |
| フォーカス | focus-visible:ring-2（マウスユーザーにはリング非表示） |
| アクティブ | やや濃い背景 |
| 無効 | opacity-50 cursor-not-allowed |
| エラー | ボーダーとテキストで伝える |
focus-visible を使い、focus は使わない。
ArteOdysseyが使えるプロジェクトでは、そのコンポーネントとセマンティックトークンに従う。具体的な使い方はArteOdyssey側のドキュメントを参照。
上記の方針を自由に適用する:
bg-teal-500）ではなく、意味のある名前をつける