Skip to content

/raycast

Raycast extension development. Use when working with @raycast/api imports, Raycast commands/tools, or building extensions.

shell
$ npx -y skills add bendrucker/claude --skill raycast --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

  • Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.
  • You can call itInvoke it directly when you want it.
  • Slash command/raycast
How auto-invocation works

Context preview

The summary Claude sees to decide when to auto-load this skill.

Raycast extension development. Use when working with @raycast/api imports, Raycast commands/tools, or building extensions.

SKILL.md

raycast.SKILL.md
name: raycast
description: Raycast extension development. Use when working with @raycast/api imports, Raycast commands/tools, or building extensions.
user-invocable: true
disable-model-invocation: true

Raycast

Project Structure

Commands map by name to `src/<name>.tsx`. Tools live in `src/tools/<name>.ts`. Use `.tsx` for UI commands, `.ts` for no-view commands and tools. Icons go in `assets/`. The `package.json` serves as both the npm manifest and the Raycast extension manifest.

See [references/manifest.md](references/manifest.md)

Manifest

The `package.json` is a superset of npm's format with Raycast-specific fields: `commands`, `tools`, `preferences`, `platforms`, `categories`, `icon`, and `author`. Command modes are `view` (renders UI), `no-view` (runs silently), and `menu-bar` (menu bar extra).

See [references/manifest.md](references/manifest.md)

Components

React-based UI with `@raycast/api`. Top-level views: `List`, `Grid`, `Detail`, `Form`. Wrap actions in `ActionPanel` with `Action` items. Always pass `isLoading` to top-level components. Use `List.EmptyView` for empty states.

See [references/components.md](references/components.md)

Hooks

`@raycast/utils` provides data-fetching and state hooks: `useFetch` for URL fetching, `usePromise` and `useCachedPromise` for async functions with stale-while-revalidate caching, `useForm` for form validation, `useLocalStorage` for persistent state, and `useExec` for shell commands. Use `keepPreviousData` to prevent flickering during search.

See [references/hooks.md](references/hooks.md)

AI Tools

Tools export a default async function with a typed `Input` parameter. JSDoc comments on the `Input` type teach the AI to use the tool. Export a `confirmation` function for destructive operations. Configure `ai.instructions` in `package.json` for extension-level guidance.

See [references/ai-tools.md](references/ai-tools.md)

Development

Bootstrap with `npx create-raycast-extension`. Install dependencies with `npm install`. Run `npm run dev` for development with hot reloading. Run `npm run build` to type-check and bundle. Run `npm run lint` for code style. Use npm (not yarn or pnpm) and commit `package-lock.json`.

Store

Extensions require Apple Style Title Case for names. Icons must be 512x512 PNG. Screenshots should be 2000x1250 PNG. Include a `CHANGELOG.md`. Add a `README.md` if setup is required. Run `npm run publish` to submit.

See [references/store.md](references/store.md)

Read more
Read it on GitHub ↗
Ships withbendrucker-claude

My personal plugin marketplace for Claude Code, Anthropic's AI coding assistant.

Get the whole plugin, auto-invoked
Stats
15
Stars
0
Views
1
Forks
Active
Maintenance
TypeScript
Language
MIT
License
14h ago
Last commit
1y ago
Created

Repo: bendrucker/claude