[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-75900":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":9,"languages":9,"totalLinesOfCode":9,"stars":10,"forks":11,"watchers":12,"openIssues":13,"contributorsCount":14,"subscribersCount":14,"size":14,"stars1d":13,"stars7d":15,"stars30d":16,"stars90d":14,"forks30d":14,"starsTrendScore":17,"compositeScore":18,"rankGlobal":9,"rankLanguage":9,"license":19,"archived":20,"fork":20,"defaultBranch":21,"hasWiki":22,"hasPages":20,"topics":23,"createdAt":9,"pushedAt":9,"updatedAt":24,"readmeContent":25,"aiSummary":26,"trendingCount":14,"starSnapshotCount":14,"syncStatus":27,"lastSyncTime":28,"discoverSource":29},75900,"native-feel-skill","yetone\u002Fnative-feel-skill","yetone","An Agent Skill for designing cross-platform desktop apps that feel native — distilled from Raycast's 2.0 deep-dive and reverse engineering of Raycast Beta.app. Eight architectural tenets, four-layer architecture, WebKit\u002FWebView2 survival guide, 75-item ship audit.",null,1778,72,1284,1,0,175,474,9,85.59,"MIT License",false,"master",true,[],"2026-06-12 04:01:19","\u003Cdiv align=\"center\">\n\n# native-feel.skill\n\n> *\"Cross-platform development AND near-native performance — refuse the trade-off.\"*\n\n[![License: MIT](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FLicense-MIT-yellow.svg)](LICENSE)\n[![Agent Skill](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FAgent-Skill-7c3aed)](https:\u002F\u002Fgithub.com\u002Fyetone\u002Fnative-feel-skill)\n\n\u003Cbr>\n\n**An Agent Skill for designing cross-platform desktop apps that feel native** — distilled from Raycast's 2.0 technical deep-dive and grounded in reverse-engineering of the shipping `Raycast Beta.app` binary.\n\nTwo goals usually pull against each other: convenient cross-platform development, and near-native performance. This skill captures the structural choices — eight architectural tenets, a four-layer architecture, a WebKit\u002FWebView2 survival guide, a 75-item ship audit — that let an app have both.\n\n\u003Cbr>\n\n**Install** — pick one:\n\n\u003C\u002Fdiv>\n\n**A. With [`skills`](https:\u002F\u002Fgithub.com\u002Fvercel-labs\u002Fskills) (any compatible agent):**\n\n```bash\nnpx skills add yetone\u002Fnative-feel-skill -g\n```\n\nThe `-g` flag installs globally (user-level) so every project picks it up.\n\n**B. Or paste this prompt to your AI agent:**\n\n```\nInstall the native-feel skill for me:\n\n1. Clone https:\u002F\u002Fgithub.com\u002Fyetone\u002Fnative-feel-skill into your\n   user-level skills directory as `native-feel-cross-platform-desktop\u002F`\n   (whatever path your agent reads skills from on this machine — e.g.\n   `~\u002F.claude\u002Fskills\u002F` for Claude Code).\n2. Verify that SKILL.md plus the references\u002F and checklists\u002F subdirs\n   are present.\n3. Confirm the install path when done.\n```\n\n\u003Cdiv align=\"center\">\n\n[Use cases](#use-cases) · [What this is](#what-this-is) · [Philosophy](#philosophy) · [Layout](#layout) · [Sources](#sources)\n\n\u003C\u002Fdiv>\n\n---\n\n## Use cases\n\nOnce installed, the skill activates automatically whenever the conversation touches cross-platform desktop architecture, WebView quirks, or making a UI feel native. Two common ways to use it:\n\n### Case 1 — Refactor an existing app to feel more native\n\nYou have an Electron \u002F Tauri \u002F web-wrapped app, and a designer (or your own eye) tells you it feels web-y. You want to know where to start and how far you can take it without a full rewrite.\n\n```\nYou    ❯ My Electron app feels web-y on macOS — the designer says it\n         doesn't pass for a real Mac app. Where do I start?\n\nAgent  ❯ Quickest path is the 75-item native-feel audit\n         (checklists\u002Fship-readiness.md). Most Electron apps fail\n         the same 6–8 items:\n           - cursor:pointer on rows (item 21)\n           - web-style modal overlays instead of native sheets (19)\n           - hardcoded brand accent instead of system accent (33)\n           - page fade-transitions (40)\n           - opaque window background instead of platform material (31)\n           - WebKit context menu still firing (23)\n         Each is a 5-to-30-minute fix; together they move you most\n         of the way to \"passes the 30-second skeptical user test.\"\n\n         Bigger question first: how far do you need to go? If \"good\n         enough\" means passing that 30-second test, Electron + this\n         audit gets you 80% there without rewriting. If you want\n         \"indistinguishable from a Mac app\" — Liquid Glass materials,\n         native popovers, sub-200ms launch — Electron has a ceiling\n         you'll hit. Want me to run the decision tree first?\n```\n\n### Case 2 — Build a cross-platform native-feel app from scratch\n\nGreenfield project, must run on macOS + Windows, and the native feel is the *point* — a launcher, a productivity tool, an AI workspace your users live in all day.\n\n```\nYou    ❯ Starting a new desktop app — macOS + Windows, native feel\n         is the whole pitch. What architecture should I use?\n\nAgent  ❯ Before architecture, the decision tree\n         (checklists\u002Fdecision-tree.md) rules this stack out for\n         several common shapes — quick check first:\n           - Cold-start budget?  (\u003C100ms → build native instead)\n           - Memory floor?       (\u003C150MB → build native instead)\n           - Extension ecosystem? (yes → need the Node layer)\n           - Runway?             (\u003C3mo → start on Electron)\n\n         If you pass, the four-layer architecture is:\n\n           ┌──────────────────────────────────────────────────┐\n           │ Native shell      Swift\u002FAppKit  +  C#\u002FWPF        │\n           │       ↕   one IPC schema, codegen for all sides  │\n           │ System WebView    WKWebView    +  WebView2       │\n           │   running React + TypeScript, shared 1:1         │\n           │       ↕                                          │\n           │ Node backend      single long-lived process      │\n           │       ↕                                          │\n           │ Rust core         UniFFI-bridged, sharable       │\n           │                   with iOS and server            │\n           └──────────────────────────────────────────────────┘\n\n         The expensive-to-get-wrong decisions, in order:\n           1. The IPC contract (one schema, codegen). Get this wrong\n              and you rebuild it later under duress.\n           2. WebView survival flags (occlusion off, alpha-prewarm,\n              _doAfterNextPresentationUpdate, font prewarming).\n           3. Memory hygiene (lazy-load extensions, tear down\n              secondary windows aggressively).\n\n         Want to start with the seam — where to draw the cross-\n         platform line — or with the IPC contract, since that's the\n         load-bearing piece?\n```\n\n### Other things the skill is good for\n\n- **\"Why is my WKWebView flickering when I hide and re-show it?\"** → walks you through `references\u002F03-webview-survival.md` (most likely A.1 throttling or A.2 startup flicker).\n- **\"How should typed IPC work across Rust, Swift, and TypeScript?\"** → the UniFFI-based pattern in `references\u002F04-ipc-contract.md`, with the exact `Coordinator`\u002F`EventHandler` shape Raycast Beta ships.\n- **\"My app is at 450 MB resident, is that bad?\"** → the six common Activity-Monitor mistakes and what to actually measure, in `references\u002F05-memory-truths.md`.\n- **\"Is my designer's spec ‘native enough’?\"** → the 70+ item conventions audit in `references\u002F06-native-conventions.md`.\n\n---\n\n> *\"We're not a web app with some native hooks sprinkled on top. We're a native app that uses web for its UI.\"* — Raycast\n\n## What this is\n\nA reference for architects, tech leads, and engineers who must build a desktop app that:\n\n- runs on **macOS + Windows** (optionally Linux) from a single UI codebase,\n- launches in under 500 ms and stays under 500 MB resident,\n- is **indistinguishable from a native app** to its users (no `cursor: pointer` tell-tales, no white-flash on launch, no WebKit context menu, no smooth-scroll JS),\n- supports a **plugin\u002Fextension ecosystem** in TypeScript,\n- can share performance-critical code with iOS and a server backend.\n\nThis is the four-layer architecture: **native shell → system WebView (WKWebView\u002FWebView2) → Node backend → Rust core**, wired together with a single typed IPC schema that generates clients for every runtime.\n\n## What this is not\n\n- Not for single-OS apps (just build native).\n- Not for Electron-style \"good enough\" apps (the polish budget here is 5–10× higher).\n- Not for apps with strict \u003C150 MB or \u003C100 ms cold-start budgets (the floor is real).\n- Not for games, document editors, or media players.\n\nRun [`checklists\u002Fdecision-tree.md`](checklists\u002Fdecision-tree.md) to find out if this architecture is even right for your project. It rules itself out for several common cases — saying so directly is more useful than over-fitting advice.\n\n## Layout\n\n```\nnative-feel-skill\u002F\n├── SKILL.md                                # entry point for the agent\n├── references\u002F\n│   ├── 01-philosophy.md                    # 8 tenets that drive every decision\n│   ├── 02-architecture.md                  # the four-layer architecture\n│   ├── 03-webview-survival.md              # WebKit\u002FWebView2 quirks + fixes (the goldmine)\n│   ├── 04-ipc-contract.md                  # typed IPC across Rust\u002FSwift\u002FC#\u002FTS\n│   ├── 05-memory-truths.md                 # why Activity Monitor lies\n│   ├── 06-native-conventions.md            # 70+ items the native-feel audit checks\n│   └── 07-evidence-raycast.md              # what a reverse-eng. of Raycast Beta shows\n└── checklists\u002F\n    ├── decision-tree.md                    # should you use this architecture?\n    └── ship-readiness.md                   # 75-item launch audit\n```\n\n## Philosophy\n\nThe central tension this architecture resolves: **how can a desktop app deliver convenient cross-platform development AND near-native performance, when those goals usually pull against each other?** Eight tenets name the structural moves:\n\n1. **Place the seam at the rendering surface** — share above the WebView, diverge below it; this is the only altitude where both DX and native feel survive.\n2. **One schema, many languages** — pay the polyglot tax once at the declaration, never at the call site.\n3. **Adopt the platform; don't compete with it** — the OS draws blur, scrolling, materials, and dark mode better than you can.\n4. **Performance is a property of perception** — what the user feels, not what Activity Monitor reports.\n5. **The short iteration loop is the product** — 200 ms hot reload vs 30 s native rebuild is a 150× compounding advantage.\n6. **Cross boundaries intentionally** — IPC has a cost; design every crossing as async, batched, schema-typed.\n7. **Identity is muscle memory** — the hotkey, the rank order, the verbs are the app; everything else is implementation.\n8. **Separate baseline from margin** — the WebView+Node floor is rented; only your dirty pages are yours to optimize.\n\nRead [`references\u002F01-philosophy.md`](references\u002F01-philosophy.md) first. Everything else is consequence.\n\n## About Agent Skills\n\nAgent Skills are the emerging standard for packaging domain knowledge that any compatible agent (Claude Code, the Claude Agent SDK, or other Agent-Skill-aware runtimes) can discover and load. Once installed via the prompt at the top of this README, the skill activates automatically when the agent's conversation touches cross-platform desktop architecture, WebView quirks, or Raycast-style apps — the trigger conditions are declared in `SKILL.md`'s frontmatter.\n\n## Sources\n\n- Raycast's public technical post: [A Technical Deep Dive into the New Raycast](https:\u002F\u002Fwww.raycast.com\u002Fblog\u002Fa-technical-deep-dive-into-the-new-raycast)\n- Reverse engineering of `Raycast Beta.app` v0.60.0 (macOS 26+ build, Xcode 17, arm64) — see [`references\u002F07-evidence-raycast.md`](references\u002F07-evidence-raycast.md) for what was found and how.\n\n## License\n\nMIT — see [`LICENSE`](LICENSE).\n\n## Credits\n\nAuthored as an Agent Skill. The architecture this skill describes is Raycast's; the philosophy is the author's synthesis; the evidence is from the shipping app.\n","native-feel.skill 是一个用于设计跨平台桌面应用程序的工具，旨在让这些应用在不同平台上都能呈现出接近原生的体验。该项目提炼自Raycast 2.0的技术深度解析，并基于对Raycast Beta.app的逆向工程。它定义了八个架构原则、四层架构体系以及WebKit\u002FWebView2使用指南，并提供了一个包含75项检查点的发布审核清单，以确保应用在便捷开发的同时也能达到近似原生的性能表现。适用于需要快速改善现有Electron、Tauri或其他Web封装应用程序用户体验，使其更符合目标操作系统风格的场景。",2,"2026-06-11 03:53:39","CREATED_QUERY"]