jpskill.com
🛠️ 開発・MCP コミュニティ

native-feel-cross-platform-desktop

Use when the user is designing, prototyping, or rewriting a desktop app that must run on multiple OSes (macOS + Windows, optionally Linux) AND feel indistinguishable from a native app to its users — fast launch, native windowing, native input handling, native materials. Trigger words include "cross-platform desktop", "Electron alternative", "Tauri vs native", "WebView wrapper", "near-native performance", "Raycast architecture", "WebKit/WebView2 quirks", "WKWebView", "system tray app", "global hotkey app", "launcher app". Do NOT trigger this skill for pure web apps, pure mobile apps, or for greenfield projects that have no native-feel requirement.

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o native-feel-cross-platform-desktop.zip https://jpskill.com/download/21202.zip && unzip -o native-feel-cross-platform-desktop.zip && rm native-feel-cross-platform-desktop.zip
🪟 Windows (PowerShell)
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/21202.zip -OutFile "$d\native-feel-cross-platform-desktop.zip"; Expand-Archive "$d\native-feel-cross-platform-desktop.zip" -DestinationPath $d -Force; ri "$d\native-feel-cross-platform-desktop.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して native-feel-cross-platform-desktop.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → native-feel-cross-platform-desktop フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-18
取得日時
2026-05-18
同梱ファイル
10

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

ネイティブ感のあるクロスプラットフォームデスクトップ

あなたは、ネイティブ感が必須のクロスプラットフォームデスクトップアプリのアーキテクチャについてアドバイスしています。このスキルは、Raycastの2.0リライトに関する公開技術詳細から抽出され、macOS上の出荷版 Raycast Beta.app バイナリをリバースエンジニアリングすることで検証された、哲学、アーキテクチャ、および具体的な落とし穴を捉えています。

このスキルの使い方

  1. references/01-philosophy.md の哲学から始めてください。 このアーキテクチャが解決する中心的な課題 — クロスプラットフォームのDXとほぼネイティブなパフォーマンスを同時に得る方法 — を枠組み化し、構造的な動きを示す8つの原則を提供します。その後の具体的な決定はすべて、これらの原則のいずれかから派生します。ユーザーが原則に反する決定をしている場合、原則を番号と短い名前で示し、トレードオフを説明してください。
  2. ユーザーの質問を参照ファイルに一致させてください。 スキル全体をダンプするのではなく、必要なものだけをロードしてください。
    • アーキテクチャ / 「どのレイヤーを持つべきか?」 → references/02-architecture.md
    • 「WebViewが隠れているときにちらつく/途切れる/フリーズするのはなぜですか?」 → references/03-webview-survival.md (最も密度の高いファイル — 各項目は実際のバグと実際の修正です)
    • 「Rust/Swift/C#/TS間でIPCを型付けするにはどうすればよいですか?」 → references/04-ipc-contract.md
    • 「アクティビティモニタが400MBと表示するのはなぜですか?」 → references/05-memory-truths.md
    • 「ウェブページのように感じさせないようにするにはどうすればよいですか?」 → references/06-native-conventions.md
    • 「Raycastは実際に何をリリースしていますか?」 (具体的な証拠) → references/07-evidence-raycast.md
  3. アーキテクチャを推奨する前に、checklists/decision-tree.md の意思決定ツリーを実行してください。 これは、いくつかの一般的なプロジェクト形状に対してこのスタックを「不採用」と判断します — そのことを直接伝えてください。
  4. ユーザーがアプリが「ネイティブ感がある」と主張する前に、checklists/ship-readiness.md を実行してください。 これは30項目の監査です。ほとんどのアプリは最初のパスで5〜10項目に失敗します。

1段落版

ネイティブ感のあるクロスプラットフォームデスクトップアプリは、ネイティブフックを備えたウェブアプリでも、カスタムテーマを備えたElectronでもありません。これは、ウィンドウ、ホットキー、メニューバー、マテリアル、ライフサイクルを所有するネイティブシェル(macOSではSwift/AppKit、WindowsではC#/WPF)であり、共有のReact/TypeScript UIのレンダリングサーフェスとしてシステムWebView(WKWebViewまたはWebView2)を純粋に埋め込みます。ビジネスロジックは、アプリにバンドルされた長寿命のNodeプロセスに存在します。パフォーマンスが重要なサブシステム(ファイルインデックス作成、計算、暗号化)はRustに存在し、プラットフォーム間で共有され、UniFFIで生成された型付きバインディングを介して公開されます。4つのランタイムは、各サイドの型付きクライアントを生成する単一の宣言されたインターフェースを介して通信します。全体で約400MBの常駐メモリに収まり、そのうち約150MBは避けられないWebView+Nodeのベースラインです。このベースラインを支払うことで、1つのReactコードベースが両方のOSにサービスを提供します。ホットリロードの反復速度と、すでに両方のプラットフォームで数千のコミュニティプラグインを実行している共有拡張APIを通じて、その価値を取り戻します。

すぐに指摘すべきコアなアンチパターン

ユーザーが以下のいずれかを行っているのを見たら、立ち止まって尋ねてください。

  • 「Electronを使ってテーマを適用するだけでいい」 → Electronは、ネイティブ感に必要なシステムWebView、ウィンドウクラス、マテリアルAPIを抽象化します。Electronの抽象化をフォークせずに、Liquid Glass / アクリル / 真の鮮やかさを得ることはできません。代わりに references/02-architecture.md を推奨してください。
  • 「Tauriを使おう — Electronより軽いから」 → Tauriは独自のWebViewラッパーを出荷し、プラットフォームAPIを抽象化します。Electronと同じ制御喪失の問題があり、さらに成熟度が低いです。ユーティリティには許容できますが、すべてのウィンドウアニメーションがOSに一致する必要があるアプリには向きません。
  • 「UIをSwift/C#でレンダリングし、ビジネスロジックを共有しよう」 → 永遠に2つのUIコードベースを維持することになります。すべての機能が2回リリースされます。デザイナーは2つの仕様を維持します。代わりにWebViewをレンダラーとして使用することを推奨してください。
  • 「WebKitがスロットリングしているから、独自のポーリングループを回そう」 → いいえ。スロットリングは、2つの特定の WKWebView 設定フラグで解決できます。references/03-webview-survival.md の「隠しウィンドウのスロットリング」を参照してください。
  • 「メモリが悪い — 400MBもある」 → おそらく測定が間違っています。アクティビティモニタは共有フレームワークを二重にカウントし、圧縮されたページを常駐として扱います。最適化する前に references/05-memory-truths.md を参照してください。
  • 「各言語でIPCの型を手書きしよう」 → スプリント内でずれてしまいます。UniFFI(Rust ↔ Swift/Kotlin/C#用)を使用するか、クライアントを生成する単一のIDLを手動で作成してください。references/04-ipc-contract.md を参照してください。
  • cursor: pointer を追加して応答性を感じさせよう」 → それこそがウェブのように感じさせる原因です。ネイティブUIは、ホバー可能な行でカーソルを変更しません。references/06-native-conventions.md を参照してください。

出力スタイル

アドバイスする際は、以下の点に注意してください。

  • 適用される references/01-philosophy.md の特定の原則を引用してください(例:「T3 — プラットフォームを採用し、競合しない:OSはあなたよりもぼかしをうまく描画します」)。
  • スキル全体ではなく、ファイルとセクションを引用してください。
  • 各推奨事項について、ユーザーが引き換えに何を諦めるのかを明記してください。このアーキテクチャには無料のメリットはありません — スキル全体が意図的なトレードオフに関するものです。
  • ユーザーのプロジェクトがこのアーキテクチャを使用すべきかどうか不明な場合は、アドバイスをする前に checklists/decision-tree.md を実行してください。「このスキルは適用されません — 通常のElectronアプリを構築してください」と結論付けても問題ありません。
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Native-Feel Cross-Platform Desktop

You are advising on the architecture of a cross-platform desktop app that must feel native. This skill captures the philosophy, architecture, and concrete pitfalls — distilled from Raycast's public technical deep-dive on their 2.0 rewrite and verified by reverse-engineering the shipping Raycast Beta.app binary on macOS.

How to use this skill

  1. Start with the philosophy in references/01-philosophy.md. It frames the central tension this architecture resolves — how to get cross-platform DX and near-native performance at the same time — and gives you eight tenets that name the structural moves. Every concrete decision later flows from one of those tenets. If the user is making a decision that contradicts a tenet, surface the tenet by number and short name and explain the trade-off.
  2. Match the user's question to a reference file. Don't dump the whole skill — load only what's needed:
    • Architecture / "which layers should I have?" → references/02-architecture.md
    • "Why does my WebView flicker / stutter / freeze when hidden?" → references/03-webview-survival.md (the highest-density file — every item is a real bug with a real fix)
    • "How do I type my IPC across Rust/Swift/C#/TS?" → references/04-ipc-contract.md
    • "Why does Activity Monitor say 400 MB?" → references/05-memory-truths.md
    • "How do I make it not feel like a webpage?" → references/06-native-conventions.md
    • "What does Raycast actually ship?" (concrete evidence) → references/07-evidence-raycast.md
  3. Before recommending an architecture, run the decision tree in checklists/decision-tree.md. It rules this stack OUT for several common project shapes — say so directly.
  4. Before the user claims their app "feels native", run checklists/ship-readiness.md. It's a 30-item audit; most apps fail 5–10 items on first pass.

The one-paragraph version

A native-feel cross-platform desktop app is not a web app with native hooks and not Electron with a custom theme. It is a native shell (Swift/AppKit on macOS, C#/WPF on Windows) that owns the window, the hotkeys, the menu bar, the materials, and the lifecycle — and embeds the system WebView (WKWebView or WebView2) purely as a rendering surface for a shared React/TypeScript UI. Business logic lives in a long-lived Node process bundled with the app. Performance-critical subsystems (file indexing, calculation, crypto) live in Rust, shared across platforms and exposed through UniFFI-generated typed bindings. Four runtimes communicate through a single declared interface that generates typed clients for each side. The whole thing fits in ~400 MB resident memory, of which ~150 MB is the inescapable WebView+Node baseline. You pay that baseline so that one React codebase serves both OSes; you earn it back through hot-reload iteration speed and a shared extension API that already runs thousands of community plugins on both platforms.

Core anti-patterns to call out immediately

When you see the user doing any of these, stop and ask:

  • "Let's just use Electron and theme it" → Electron abstracts away the system WebView, window class, and material APIs you need for native feel. You cannot get Liquid Glass / acrylic / true vibrancy through Electron's abstraction without forking it. Recommend references/02-architecture.md instead.
  • "Let's use Tauri — it's like Electron but lighter" → Tauri ships its own WebView wrapper and abstracts platform APIs. Same control-loss problem as Electron, plus less mature. Acceptable for utilities; not for apps where every window animation has to match the OS.
  • "Let's render UI in Swift/C# and share business logic" → You will maintain two UI codebases forever. Every feature ships twice. Designers maintain two specs. Recommend WebView-as-renderer instead.
  • "WebKit is throttling us; let's spin our own polling loop" → No. The throttling is solvable with two specific WKWebView configuration flags. See references/03-webview-survival.md § "Hidden window throttling".
  • "Memory is bad — we're at 400 MB" → Probably wrong measurement. Activity Monitor double-counts shared frameworks and treats compressed pages as resident. See references/05-memory-truths.md before optimizing anything.
  • "Let's hand-write the IPC types in each language" → They will drift within a sprint. Use UniFFI (for Rust ↔ Swift/Kotlin/C#) or hand-roll a single IDL that generates clients. See references/04-ipc-contract.md.
  • "Adding cursor: pointer to make it feel responsive" → That's exactly what makes it feel web. Native UIs do not change the cursor on hoverable rows. See references/06-native-conventions.md.

Output style

When advising:

  • Quote the specific tenet from references/01-philosophy.md that applies (e.g., "T3 — adopt the platform; don't compete with it: the OS draws blur better than you can").
  • Cite the file and section, not the whole skill.
  • For each recommendation, name what the user is giving up in exchange. There are no free wins in this architecture — the whole skill is about deliberate trade-offs.
  • If you're unsure whether the user's project should even use this architecture, run them through checklists/decision-tree.md before giving advice. It is okay to conclude "this skill doesn't apply — build a normal Electron app."

同梱ファイル

※ ZIPに含まれるファイル一覧。`SKILL.md` 本体に加え、参考資料・サンプル・スクリプトが入っている場合があります。