菜单
Ravel の UI（パネル・ウィジェット・アイコン）を設計・実装するときの手順。 3層構造（ravel-core / ravel-ui / ravel-app）への切り分け、gpui-component ウィジェット選定、テーマカラー、t! による i18n、Lucide アイコンの オンデマンド vendoring と RavelIcon 登録までを一気通貫で扱う。 トリガー: "/ui-design-impl"、新しいパネル・ウィジェット・アイコンの追加、 「UIを作って」「アイコンを追加して」（Ravel リポジトリ内）。
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
基于 SOC 职业分类
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/narusenia/ravel --skill ui-design-impl命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
Ravel の実装単位を worktree 隔離でサブエージェントへ委譲し、独立検証 → ravel-review + 独立レビュー（既定 codex、--review で指定 / skip）の 突き合わせ → 指摘対応 → PR → CI → （明示時のみ）マージまで通す。 単位 ID から仕様・完了条件・依存・フェーズ境界を scripts/docs.sh で解決し、 依存が未マージなら起動しない。複数単位は --multi（並行・単位ごとに PR） または --compress（1 PR に集約）。 トリガー: "/ravel-impl"、「この単位を実装して」「委譲して」（単位 ID を伴う）。
Ravel リポジトリの文書を「どれが正か」を踏まえて引く。役割別検索、単位 ID / issue ID の解決、パネル横断の引き当て、文書間の整合性チェックを scripts/docs.sh 経由で行い、根拠のファイルを添えて答える。 トリガー: 「どこに書いてある」「仕様は」「この単位は何」「issue の引受先」 「文書の整合性」「/ravel-docs」、および実装前の調査で文書を探すとき。
Ravel リポジトリ固有の diff レビュー。PR 作成前に必ず実行する。 .agents/rules/ の文脈依存不変条件（render 純粋性、focus 所有権、Command 経路単一性、Global 用法、コア層分離）を検査手順として辿り、可能なら codex に並列レビューさせ、所見を突き合わせて判定する。PASS 時に review-gate マーカーを記録する（gh pr create はマーカーがないとブロックされる）。 トリガー: "/ravel-review"、PR 作成前、「レビューして」（Ravel リポジトリ内）。
| name | ui-design-impl |
| description | Ravel の UI（パネル・ウィジェット・アイコン）を設計・実装するときの手順。 3層構造（ravel-core / ravel-ui / ravel-app）への切り分け、gpui-component ウィジェット選定、テーマカラー、t! による i18n、Lucide アイコンの オンデマンド vendoring と RavelIcon 登録までを一気通貫で扱う。 トリガー: "/ui-design-impl"、新しいパネル・ウィジェット・アイコンの追加、 「UIを作って」「アイコンを追加して」（Ravel リポジトリ内）。 |
Ravel の UI 実装ワークフロー。着手前に必ず読むもの:
.agents/rules/gpui.md（render 純粋性・focus 所有権・Command 経路）docs/gpui-ui-guide.md（canvas 描画・テーマ・イベントの実践知）docs/agent-api-reference.md（ravel-ui / ravel-app の API マップ）gpui-component スキル、GPUI 基礎 API は gpui-ce スキル| 置く場所 | 内容 |
|---|---|
ravel-core | ドメイン型・純ロジック（UI 依存禁止） |
ravel-ui | ヘッドレス状態（選択・スクロール・展開等）+ ユニットテスト |
ravel-app | GPUI ビュー（Panel 実装、canvas、イベント） |
新パネルは PanelKind 追加 → panel_for_kind() と register_panels() の
両方に concrete パネルを登録（片方だけだと reattach で Placeholder に戻る）。
コンストラクタは new(window, cx)、focus は track_panel_focus()。
t! / locale キー経由。
assets/locales/en.toml と ja.toml の両方に追加する。
ヘッドレス層（ravel-ui）はキーを発行し、ravel-app が translate する
（properties.section.* 方式）。cx.theme().colors.*（ActiveTheme import）。方針: 使う分だけ vendoring。Lucide 全部盛りは禁止。
gpui-component ウィジェット内蔵アイコン（chevron 等）は
gpui-component-assets フォールバックが配信するので何もしなくてよい。
新しいアイコンが必要になったら:
https://lucide.dev で名前を確認し、pinned バージョンでダウンロード:
V=0.462.0 # assets/icons/ 内の既存アイコンとバージョンを揃える
curl -sf "https://unpkg.com/lucide-static@$V/icons/<name>.svg" \
-o assets/icons/<name>.svg
（ISC ライセンスは assets/icons/LICENSE に配置済み。バージョンを
上げる場合は全アイコンを同時に更新し LICENSE も差し替える）
crates/ravel-app/src/assets.rs の RavelIcon enum に variant を追加し、
path() にマッピングを追加。
使用側: gpui_component::Icon::new(RavelIcon::X).text_color(color)。
パネルタブは panels::tab_title() ヘルパーが icon+label を統一描画する。
cargo test -p ravel-app assets — every_panel_icon_is_embedded 等の
埋め込み検証テストが通ること。enum に追加したのに SVG を置き忘れると
ここで落ちる。
アセット配信の仕組み: RavelAssets（rust-embed、assets/icons/**/*.svg）
→ miss 時 gpui_component_assets::Assets へフォールバック。
main.rs の .with_assets(RavelAssets) で登録済み。
mise run check（fmt + pattern lint + clippy -D warnings + tests）cargo run で起動確認（テーマ両対応を意識）ravel-review スキル（render 純粋性等の文脈依存チェック + gate）