Skip to main content
skill Claude Code CX Codex Cursor GitHub Copilot

native-sdk — Claude Code skill: what it does, how to install

Teaches coding agents to scaffold and build native desktop apps using Native SDK. Recommended when writing declarative .native markup and AOT-compiled TypeScript.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add vercel-labs/native --skill native-sdk -a claude-code
Open on GitHub

What native-sdk does

This skill guides agents through building native desktop apps with the Native SDK. The primary workflow pairs TypeScript logic in src/core.ts with declarative markup in .native files. Everything compiles ahead of time directly to machine code, leaving no browser or JavaScript runtime inside the shipped executable. Zig cores remain available via --template zig-core, while WebViews serve only as an optional path for embedding existing web content.

Every running application embeds a deterministic automation server. This lets coding agents inspect window states and capture screenshots. The skill functions as a discovery stub, directing the agent to pull native-ui or ts-core guides through the @native-sdk/cli tool.

Platform support is currently uneven: macOS represents the mature target, whereas Windows and Linux builds run primarily in CI. Keep in mind that standard TypeScript APIs like dates or file operations must run behind Cmd.request inside src/services/.

What it helps with

  • scaffold a compiled desktop project with native init
  • author declarative views inside .native markup files
  • wire application state updates in src/core.ts
  • capture screenshots and drive running windows through the automation server

Example prompts for the agent

  • Initialize a new Native SDK desktop project named desktop_app
  • Load native-ui instructions and bind the Model state to src/app.native
  • Inspect the running desktop window using the Native SDK automation server

How to install native-sdk

1Skills CLI (Vercel)

npx skills add vercel-labs/native --skill native-sdk -a claude-code

2Manually: put the files in place

~/.claude/skills/native-sdk/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/native-sdk/

Similar

frontend-dev MiniMax-AI Orchestrates frontend development, motion design, AI-generated media, and conversion copy. Built for landing pages, marketing sites, and dashboards. Claude Code CX Codex Cursor +1 3,200installs audit-website squirrelscan Runs squirrel CLI audits against a website, pinpoints SEO, performance, and security issues, and applies fixes directly to source code. Claude Code CX Codex Cursor +1 73,900installs inspector-docs CopilotKit Keeps CopilotKit documentation aligned with shipped Inspector overlay panes. Use it when adding, editing, or deleting tabs in @copilotkit/web-inspector. Claude Code CX Codex Cursor +1 1,000installs senior-fullstack sickn33 This skill guides implementation of features spanning interface, backend, database and deployment. It verifies coherence from request through authorization to data access and response handling. Claude Code CX Codex Cursor +1 2,300installs javascript-pro https://github.com/Jeffallan Skill for writing, debugging, and refactoring JavaScript code with ES2023+, async/await, ESM modules, and Node.js APIs. Use it to build vanilla JavaScript applications or optimize performance in browsers and Node.js. Claude Code CX Codex Cursor +1 6,000installs gpui-kit-design-guides longbridge Supplies normative desktop interface rules for GPUI Kit applications. Useful when creating new screens, styling components, or auditing UI against review checklists. Claude Code CX Codex Cursor +1 959installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. Claude Code CX Codex Cursor +1 673,100installs

Questions about native-sdk

How to install native-sdk in Claude Code?

Run npx skills add vercel-labs/native --skill native-sdk -a claude-code. The installer places the configuration at ~/.claude/skills/native-sdk/SKILL.md.

What does native-sdk do?

It provides an agent with conventions and CLI commands to build desktop software. It covers project scaffolding, declarative UI syntax, and ahead-of-time compilation rules.

Does the final application bundle a JavaScript runtime or Chromium?

No, the compiler turns TypeScript code directly into native binary instructions. The output ships without Node.js, an interpreter, or a WebView unless you explicitly embed one.

Source text

SKILL.md · Apache-2.0
---
name: native-sdk
description: Discovery skill for the Native SDK, the complete toolkit for building native desktop applications. Apps are authored in TypeScript + declarative Native markup (.native) by default and compiled to native code with no JS runtime in the binary; Zig cores are an explicit alternative, and WebViews are the optional web-content path. Use when the user asks what the Native SDK is, how to build a Native SDK app, author native UI, scaffold an app, configure app.json or legacy app.zon, add bridge commands, embed web content, package an app, test a running app, or automate a Native SDK app.
allowed-tools: Bash(native:*), Bash(npx @native-sdk/cli:*)
hidden: true
---

# Native SDK

The Native SDK is the complete toolkit for building native desktop applications. **The primary authoring path is TypeScript app logic in `src/core.ts` plus declarative Native markup in `.native` files.** The TypeScript core is checked and compiled ahead of time to native code, so the shipped binary contains no browser, WebView, JS runtime, or interpreter. Zig is how the toolkit itself works and is a first-class, explicitly chosen app-core alternative (`--template zig-core`); it is not the default inferred from the SDK's implementation. Every app embeds a deterministic automation server, so agents can snapshot, drive, and screenshot the running window. Desktop is the mature surface (macOS deepest, Linux and Windows exercised in CI); mobile embedding is experimental. WebView surfaces coexist as the optional path for embedding web content or hosting an existing web frontend.

## Start here

This file is a discovery stub for agents that installed the Native SDK once with a skills installer such as `npx skills add native-sdk`. Before implementing or explaining Native SDK app work, use the installed CLI to discover and load the current skill content:

```bash
native skills list
native skills get core
native skills get native-ui
native skills get ts-core
```

Use `native skills get core` for initial orientation. For the default app-authoring path, load **both** `native-ui` (views, bindings, the app loop) and `ts-core` (the TypeScript subset, effects, subscriptions, and modules) before implementing. Load `ts-services` too when the tree has `src/services/` or ordinary TypeScript needs filesystem/process/JSON/regex/Map/Date/class work behind `Cmd.request`. Use `native skills get core --full` when work reaches lower-level runtime wiring, WebViews, bridge/security, native capabilities, packaging, or debugging. Use `native skills get automation` when testing a running app, taking snapshots, requesting reloads, or using the built-in automation server. Use `native skills get zig` only for an existing Zig core, a toolkit extension, SDK implementation work, or a Zig 0.16 compile error.

## Quick orientation

```bash
npm install -g @native-sdk/cli
native init my_app
cd my_app
native dev
```

`native init my_app` generates the primary three-file app: `app.json`, `src/app.native` (the markup view), and `src/core.ts` (`Model`, `Msg`, `update`). Existing `app.zon` manifests remain supported. Inspect the tree before editing an existing app and preserve the core language it already uses. `src/main.zig` means the app explicitly uses the Zig-core template; web-frontend shells additionally carry `frontend/` and usually owned build/runtime wiring.

© vercel-labs · Apache-2.0 · vercel-labs/native

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor