native-feel-cross-platform-desktop — Claude Code skill: desktop
A skill for designing cross-platform desktop apps that feel native: windowing, hotkeys, materials, fast launch.
npx skills add yetone/native-feel-skill --skill native-feel-cross-platform-desktop -a claude-codeWhat native-feel-cross-platform-desktop does
The skill triggers when you are designing, prototyping or rewriting a desktop app for macOS and Windows (optionally Linux) and it has to feel native to users. Inside: the architecture philosophy, layer breakdown, IPC contract, WebView survival notes, memory truths and native conventions. The material comes from Raycast's public write-up on their 2.0 rewrite and was checked by reverse-engineering their shipping macOS binary.
How it works: you start with references/01-philosophy.md and its eight tenets, then load only the file you need — 02-architecture.md for layers, 03-webview-survival.md for flicker and stutter in hidden windows, 04-ipc-contract.md for typing IPC across Rust, Swift, C# and TypeScript, 05-memory-truths.md for memory measurements, 06-native-conventions.md for what gives a webpage away. Before recommending an architecture it runs your project through checklists/decision-tree.md, and before you claim the app feels native it runs checklists/ship-readiness.md, a 30-item audit.
Worth knowing: the skill talks you out of some paths. Reach for Electron and just theme it, or pick Tauri because it is lighter, and it will tell you that you lose control over the system WebView, the window class and the material APIs. Fine for utilities, not for an app where every window animation has to match the OS. It also stays away from pure web apps and mobile.
What it helps with
- pick an architecture for a desktop app on macOS and Windows
- debug why a WebView flickers or freezes when the window is hidden
- type IPC across Rust, Swift, C# and TypeScript from one contract
- check whether 400 MB in Activity Monitor is a real number
- strip the UI habits that make an app read as a webpage
Example prompts for the agent
- Design the architecture for a cross-platform desktop app that feels native — which layers do I need?
- Why does my WKWebView freeze when the window is hidden? What do I fix?
- Run my project through the decision tree: should I even use this architecture?
How to install native-feel-cross-platform-desktop
1Skills CLI (Vercel)
npx skills add yetone/native-feel-skill --skill native-feel-cross-platform-desktop -a claude-code2Manually: put the files in place
~/.claude/skills/native-feel-cross-platform-desktop/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/native-feel-cross-platform-desktop/
1Skills CLI (Vercel)
npx skills add yetone/native-feel-skill --skill native-feel-cross-platform-desktop -a codex2Manually: put the files in place
.agents/skills/native-feel-cross-platform-desktop/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add yetone/native-feel-skill --skill native-feel-cross-platform-desktop -a cursor2Manually: put the files in place
.cursor/skills/native-feel-cross-platform-desktop/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install yetone/native-feel-skill native-feel-cross-platform-desktop2Manually: put the files in place
.github/skills/native-feel-cross-platform-desktop/SKILL.md1Skills CLI (Vercel)
npx skills add yetone/native-feel-skill --skill native-feel-cross-platform-desktop -a gemini-cli2Platform CLI
gemini skills install https://github.com/yetone/native-feel-skillManually: put the files in place
.devin/skills/native-feel-cross-platform-desktop/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add yetone/native-feel-skill --skill native-feel-cross-platform-desktop -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about native-feel-cross-platform-desktop
How do I install native-feel-cross-platform-desktop in Claude?
Run npx skills add yetone/native-feel-skill --skill native-feel-cross-platform-desktop -a claude-code. The skill then lands at ~/.claude/skills/native-feel-cross-platform-desktop/SKILL.md.
What does native-feel-cross-platform-desktop do?
It helps you design a desktop app for several OSes that feels native, covering architecture layers, the IPC contract, WebView survival and native conventions. It runs your project through a decision tree first and argues against paths that will not work.
Which projects should not use this skill?
Pure web apps, mobile apps and greenfield projects with no native-feel requirement. For those the skill itself recommends skipping this architecture.
Source text
SKILL.md · MIT
--- name: native-feel-cross-platform-desktop description: 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. --- # 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."
© yetone · MIT · yetone/native-feel-skill