major-ai-skills
Version:
Installable agentic skills / AI agent skills (SKILL.md) for Claude Code, Cursor, Codex CLI, Gemini CLI & Antigravity - 402+ professional app, token-efficiency, and common-sense skills. SEO/GEO ready.
172 lines (145 loc) • 8.73 kB
Markdown
name: raycast
description: "Build Raycast extensions with React and TypeScript, create Script Commands, and troubleshoot URL schemes and extension execution on macOS."
category: macos
risk: safe
source: self
source_type: self
date_added: "2026-08-26"
tags: ["raycast", "macos-launcher", "raycast-api", "react-typescript", "script-commands", "accessibility-window", "claude"]
tools: ["claude", "cursor", "gemini", "codex"]
# Raycast macOS Extensible Productivity Launcher AI Skill Guide (Claude)
## Overview & Engine Architecture
Raycast is a high-speed, extensible macOS launcher engineered in native Swift with a **React/TypeScript Extension Runtime (`@raycast/api`)** running in a secure, embedded Node.js process. Raycast features standalone **Script Commands** (authored in Bash, Python, Swift, Ruby, or Node.js with special metadata comment headers), **Quicklinks**, dynamic **Snippets with placeholders**, **AI Chat / Prompt integrations**, and an **Accessibility-driven Window Management engine**. Claude operates as a Principal macOS Tool Architect and Raycast Extension Developer, specializing in **React-based Raycast UI extension development**, **Script Command metadata authoring**, **TCC Accessibility permission diagnostics**, and **deep `raycast://` URL scheme integration**.
### Raycast Multi-Tier Architecture & Extension Runtime Stack
```
┌─────────────────────────────────────────────────────────────┐
│ Raycast Engine Architecture │
│ │
│ Presentation & Native Swift Core │
│ ├── Low-Latency Swift HUD Window (Floating Global Launcher)│
│ ├── Spotlight Replacement & Global Hotkey Engine (⌘+Space) │
│ └── Accessibility Window Management (`AXUIElement` Engine) │
│ │
│ Extension & React Runtime (`@raycast/api`) │
│ ├── Embedded Node.js Worker & React Reconciler │
│ ├── Component Library (`List`, `Form`, `Detail`, `Grid`) │
│ └── Action Panel (`ActionPanel`, `Action.CopyToClipboard`) │
│ │
│ Script Commands & IPC Protocol │
│ ├── Script Command Runner (Metadata Header Parser) │
│ └── Deep URL Scheme Engine (`raycast://extensions/...`) │
└─────────────────────────────────────────────────────────────┘
```
## Operational Capabilities & Agent Directives
1. **React / TypeScript Extension Authoring**: Develop modular Raycast extensions using `@raycast/api` and `@raycast/utils` implementing `List`, `Detail`, `Form`, and `ActionPanel` views with clean state management.
2. **Metadata Script Command Authoring**: Write standalone script commands in Bash, Python, or Swift with valid `@raycast.schemaVersion`, `@raycast.title`, `@raycast.mode`, and `@raycast.icon` headers.
3. **Accessibility Window Snapping Triage**: Remediate window management failures by verifying Raycast's `AXUIElement` Accessibility permissions in macOS System Settings.
4. **Deep Linking & Quicklinks**: Construct `raycast://` URL schemes to trigger specific commands, execute extension deep links, and load custom AI prompts.
## Production TypeScript Code: Custom Raycast Extension Command (`@raycast/api`)
Save this file as `src/search-repositories.tsx` inside a Raycast Extension project (`npm install @raycast/api @raycast/utils`):
```tsx
// ==============================================================================
// Raycast Extension Command (React / TypeScript): GitHub Repo Switcher
// Fetches, filters, and opens local git repositories in VS Code or Terminal.
// ==============================================================================
import { Action, ActionPanel, Icon, List, showToast, Toast } from "@raycast/api";
import { useExec } from "@raycast/utils";
import { useState } from "react";
interface RepoItem {
name: string;
path: string;
}
export default function Command() {
const [searchText, setSearchText] = useState("");
// Scan user Projects directory using fast find command
const { isLoading, data, error } = useExec(
"find",
["/Users/" + process.env.USER + "/Projects", "-maxdepth", "2", "-name", ".git"],
{
onError: (err) => {
showToast({
style: Toast.Style.Failure,
title: "Failed to scan projects",
message: err.message,
});
},
}
);
const repos: RepoItem[] = (data || "")
.split("\n")
.filter((line) => line.length > 0)
.map((gitDir) => {
const repoPath = gitDir.replace(/\/\.git$/, "");
const repoName = repoPath.split("/").pop() || "Unnamed";
return { name: repoName, path: repoPath };
});
const filteredRepos = repos.filter((r) =>
r.name.toLowerCase().includes(searchText.toLowerCase())
);
return (
<List
isLoading={isLoading}
onSearchTextChange={setSearchText}
searchBarPlaceholder="Filter local git repositories..."
>
{filteredRepos.map((repo) => (
<List.Item
key={repo.path}
icon={Icon.Folder}
title={repo.name}
subtitle={repo.path}
actions={
<ActionPanel>
<Action.Open
title="Open in VS Code"
target={repo.path}
application="Visual Studio Code"
/>
<Action.Open
title="Open in Terminal"
target={repo.path}
application="Terminal"
/>
<Action.CopyToClipboard title="Copy Path" content={repo.path} />
</ActionPanel>
}
/>
))}
</List>
);
}
```
## Technical Troubleshooting Matrix
| Issue & Failure Signature | Root Cause Analysis | Diagnostic & Resolution Pathway |
| :--- | :--- | :--- |
| **Window Management Commands (Snap/Resize) Fail** | Raycast lacks macOS Accessibility permissions to manipulate window bounds via `AXUIElement`. | 1. Open *System Settings $\rightarrow$ Privacy & Security $\rightarrow$ Accessibility*.<br>2. Toggle **Raycast** OFF and ON.<br>3. Restart Raycast. |
| **Script Command Does Not Appear in Launcher** | Script file missing executable bit (`chmod +x`) or contains malformed `@raycast.schemaVersion` header. | 1. In terminal, run: `chmod +x ~/.raycast-scripts/my_script.sh`.<br>2. Verify header format: `// @raycast.schemaVersion 1` and `// @raycast.title My Script`.<br>3. In Raycast Preferences $\rightarrow$ Extensions $\rightarrow$ Reload. |
| **`npm run dev` Fails with Node.js Version Error** | Raycast API requires Node.js version 18.0.0 or higher. | Update Node.js via Homebrew: `brew install node` or `nvm use 20`. |
| **`Command + Space` Opens Apple Spotlight Instead** | macOS default Spotlight hotkey collision. | In System Settings $\rightarrow$ *Keyboard $\rightarrow$ Keyboard Shortcuts $\rightarrow$ Spotlight*, uncheck **Show Spotlight search**, then assign `⌘ + Space` to Raycast. |
## Command Line Syntax & Raycast Script Command Header Template
```bash
#!/usr/bin/env bash
# ==============================================================================
# Raycast Script Command Template (Save as executable script)
#
# @raycast.schemaVersion 1
# @raycast.title System Memory Free
# @raycast.mode compact
# @raycast.icon 🚀
# @raycast.packageName Developer Utilities
# ==============================================================================
echo "Free Memory: $(vm_stat | grep 'Pages free' | awk '{print $3 * 4096 / 1024 / 1024}') MB"
```
### Essential File Locations
- **Raycast Application Support**: `~/Library/Application Support/com.raycast.macos`
- **Custom Script Commands**: `~/Library/Application Support/com.raycast.macos/script-commands`
- **Raycast Preferences**: `~/Library/Preferences/com.raycast.macos.plist`
## Agent Operational Directive
> **MANDATORY**: When authoring Raycast Script Commands, always specify `@raycast.schemaVersion 1`, assign an appropriate `@raycast.mode` (`compact`, `fullOutput`, or `silent`), and ensure executable file permissions (`chmod +x`).