Raycast Extension

This generates complete Raycast extensions with React and TypeScript, handling all the boilerplate: package.json manifests, TypeScript configs, command implementations, and the proper project structure. The interesting part is the caching guidance. It shows you how to avoid that annoying empty state flash on load by reading cache synchronously before React renders, then refreshing in the background. It also calls out a common performance trap: using sync file operations like execSync or readdirSync during data fetching, which freezes the UI even when you have cached data showing. The examples cover the three command modes (view, no-view, menu-bar) and include patterns for SQLite access without copying files. Solid if you're building Raycast tools and want them to feel snappy.

skills.sh installs: 328
GitHub stars: 27
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add johnlindquist/claude --skill raycast-extension --agent claude-code

Installs into .claude/skills of the current project.

Files

Raycast Extension Development

Quick Start

Create project structure
Write package.json with extension config
Implement command in src/
Run npm install && npm run dev

Project Structure

my-extension/
├── package.json          # Extension manifest + dependencies
├── tsconfig.json         # TypeScript config
├── .eslintrc.json        # ESLint config
├── raycast-env.d.ts      # Type definitions (auto-generated)
├── assets/
│   └── extension-icon.png  # 512x512 PNG icon
└── src/
    └── command-name.tsx    # Command implementation