# raycast-extension

This skill guides an agent through Raycast extensions built with React and TypeScript. Use it when a task calls for a Raycast command or tool.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 321 installs · ★ 26
- Author: johnlindquist
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/johnlindquist/claude/tree/HEAD/skills/raycast-extension/SKILL.md
- Updated: 2025-12-19
- HTML: https://affpapa.org/en/nevibecode/skills/raycast-extension

## What it does

The skill lays out a Raycast extension project with `package.json`, `tsconfig.json`, `.eslintrc.json`, generated type definitions, an `assets/` folder, and code under `src/`. It can guide the agent in defining commands, selecting `view`, `no-view`, or `menu-bar`, and adding a hotkey suggestion.

Its examples cover list and detail interfaces, background work with notifications, and data loading with `Cache`, `withCache`, and `useCachedPromise`. The project setup uses `@raycast/api` and `@raycast/utils`, then starts development with `npm install && npm run dev`.

The `@raycast/api` dependency belongs in `package.json`; without it, the Raycast command examples have no API package to import.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add johnlindquist/claude --skill raycast-extension -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/raycast-extension/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/raycast-extension/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add johnlindquist/claude --skill raycast-extension -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/raycast-extension/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add johnlindquist/claude --skill raycast-extension -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/raycast-extension/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install johnlindquist/claude raycast-extension
```

2. **Manually: put the files in place**
- File: `.github/skills/raycast-extension/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add johnlindquist/claude --skill raycast-extension -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/johnlindquist/claude --path skills/raycast-extension
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/raycast-extension/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add johnlindquist/claude --skill raycast-extension -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/johnlindquist/claude/tree/HEAD/skills/raycast-extension/SKILL.md

## When to use it
- scaffold a Raycast extension
- define commands in `package.json`
- build a list or detail interface
- create a background command with notifications
- cache data while refreshing it asynchronously

## Example prompts
- Create a Raycast extension in React and TypeScript with a command under `src/`.
- Set up a Raycast command in `view` mode and add a hotkey suggestion to `package.json`.
- Build a background Raycast command that caches data with `Cache` and refreshes it asynchronously.

## Similar
- [extension-qr-code](https://affpapa.org/en/nevibecode/skills/extension-qr-code.md) — skill · 28200 installs
- [extension-invite-links](https://affpapa.org/en/nevibecode/skills/extension-invite-links.md) — skill · 28100 installs
- [webflow-cli:designer-extension](https://affpapa.org/en/nevibecode/skills/webflow-clidesigner-extension.md) — skill · 1000 installs
- [chrome-extension-dev-js-typescript-cursorrules-pro](https://affpapa.org/en/nevibecode/rules/chrome-extension-dev-js-typescript-cursorrules-pro.md) — rule · ★ 41024
- [chrome-extension-development](https://affpapa.org/en/nevibecode/skills/chrome-extension-development.md) — skill · 2800 installs
- [chrome-extension](https://affpapa.org/en/nevibecode/skills/pproenca-chrome-extension.md) — skill · 717 installs

From the same set: [johnlindquist/claude](https://affpapa.org/en/nevibecode/by/johnlindquist/claude.md) — 3 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md