Menu
k8oが好むUIデザインの方針。UIコンポーネントの作成、画面デザイン、スタイリングの判断時に使用する。ArteOdysseyを使うプロジェクトではコンポーネントやトークンの具体的な使い方を、それ以外のプロジェクトではデザインの方向性を提供する。自由にデザインを作るとき、見た目の判断に迷ったとき、UIレビュー時にも使用する。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
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）ではなく、意味のある名前をつける