hassancs91

Desktop App Starter — Development skill for Claude Code

Development community

Free Electron + React + TypeScript starter for building desktop apps with Claude Code.

How to install Desktop App Starter

This entry records only its repository, not the path inside it, so there is no exact command to give. Open hassancs91/desktop-app-starter and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Desktop App Starter does

Free Electron + React + TypeScript starter for building desktop apps with Claude Code.

Alternatives in Development

  • Native Feel Skill — An Agent Skill for designing cross-platform desktop apps that feel native — distilled from Raycast's 2.0 deep 1.9k ★
  • React Native Movie App — Get hands-on with React Native and Expo in this crash course 787 ★
  • React Native Restate — Build a full-stack Real Estate app from scratch with Google Authentication, dynamic routing, and more 678 ★

README

Desktop App Starter

A free starter for building desktop apps with Claude Code. Electron 41, React 19, TypeScript and Tailwind 4, and it already runs.

![The Desktop App Starter home screen](docs/images/home.png)

Open the folder in Claude Code and ask for a screen in plain words. Claude reads `CLAUDE.md` first, reuses the pieces that are already here, adds your feature the way the rest of the app is built, and writes a test. It doesn't have to rebuild the window, the bridge, the settings or the components for every new app.

MIT licensed. Use it for anything, including apps you sell.

Want license keys, code signing and auto-update too? That's the [full Desktop App Boilerplate](https://learnwithhasan.com/boilerplates/electron-starter-template/), also included in my course [Build With AI 1.0](https://learnwithhasan.com/courses/build-with-ai-10/). [See what's different](#free-vs-full).

What's inside

  • The window. Title bar, sidebar and status bar. A new screen is one line in a registry.
  • 6 themes. System, light, dark, slate, midnight and high contrast.
  • Settings that persist, typed and checked with Zod.
  • API key storage by the OS. Your key is encrypted with Electron safeStorage and never reaches the UI.
  • Claude, ready to call. askClaude, streamClaude and askClaudeJson in the main process, on the official @anthropic-ai/sdk. The default model is Claude Opus 5.5.
  • 21 ready components, plus 8 layout and 3 motion pieces: buttons, inputs, select, table, modal, confirm dialog, toasts, tabs, tooltips and more. They're all on the Components screen.
  • Your files. File and folder pickers, drag and drop, and a file service that only touches what the user picked.
  • A safe bridge. Main, preload and UI are split, and every message between them is typed and checked.
  • Installer builds for Windows, Mac and Linux, wired in.
  • CLAUDE.md. The rules Claude Code reads before it writes anything, so every screen lands in th