raycast-extension — Claude Code skill: build and install
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.
npx skills add johnlindquist/claude --skill raycast-extension -a claude-codeWhat raycast-extension 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.
What it helps with
- 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 for the agent
- Create a Raycast extension in React and TypeScript with a command under
src/. - Set up a Raycast command in
viewmode and add a hotkey suggestion topackage.json. - Build a background Raycast command that caches data with
Cacheand refreshes it asynchronously.
How to install raycast-extension
1Skills CLI (Vercel)
npx skills add johnlindquist/claude --skill raycast-extension -a claude-code2Manually: put the files in place
~/.claude/skills/raycast-extension/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/raycast-extension/
1Skills CLI (Vercel)
npx skills add johnlindquist/claude --skill raycast-extension -a codex2Manually: put the files in place
.agents/skills/raycast-extension/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add johnlindquist/claude --skill raycast-extension -a cursor2Manually: put the files in place
.cursor/skills/raycast-extension/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install johnlindquist/claude raycast-extension2Manually: put the files in place
.github/skills/raycast-extension/SKILL.md1Skills CLI (Vercel)
npx skills add johnlindquist/claude --skill raycast-extension -a gemini-cli2Platform CLI
gemini skills install https://github.com/johnlindquist/claude --path skills/raycast-extensionManually: put the files in place
.devin/skills/raycast-extension/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add johnlindquist/claude --skill raycast-extension -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about raycast-extension
How do I install raycast-extension in Claude Code?
Run npx skills add johnlindquist/claude --skill raycast-extension -a claude-code, then open ~/.claude/skills/raycast-extension/SKILL.md.
What does raycast-extension do?
It helps an agent create Raycast extensions, commands, and project configuration with React and TypeScript. The guidance also covers UI modes, caching, and asynchronous loading.
Which Raycast command modes does the skill cover?
It covers view for an interface, no-view for background work, and menu-bar for a menu bar command.
