Raycast Extensions Skill

Build powerful extensions with React, TypeScript, and the Raycast API.

Quick Start (Agent Workflow)

Follow these steps when tasked with implementing or fixing Raycast features:

Identify the core component: Determine if the UI needs a
```
List
```
,
```
Grid
```
,
```
Detail
```
, or
```
Form
```
.
Consult Reference: Open and read the corresponding file in
```
references/api/
```
(e.g.,
```
references/api/list.md
```
).
Use Defaults:
- Feedback: Use
```
showToast
```
  for Loading/Success/Failure. Use
```
showHUD
```
  only for quick background completions.
- Data: Use
```
Cache
```
  for frequent/transient data,
```
LocalStorage
```
  for persistent user data.
- Access: Always check
```
environment.canAccess(AI)
```
  or
```
environment.canAccess(BrowserExtension)
```
  before use.
Implementation: Provide a concise implementation using
```
@raycast/api
```
components.
Citing: Link back to the specific
```
references/api/*.md
```
file you used.

Cookbook Patterns

1. List & Grid (Searchable UI)

Use

List

for text-heavy data and

Grid

for image-heavy data.

List Reference | Grid Reference

<List isLoading={isLoading} searchBarPlaceholder="Search items..." throttle>
  <List.Item
    title="Item Title"
    subtitle="Subtitle"
    accessories={[{ text: "Tag" }]}
    actions={
      <ActionPanel>
        <Action.Push title="View Details" target={<Detail markdown="# Details" />} />
        <Action.CopyToClipboard title="Copy" content="value" />
      </ActionPanel>
    }
  />
</List>

2. Detail (Rich Markdown)

Use for displaying long-form content or item details.

Detail Reference

<Detail
  isLoading={isLoading}
  markdown="# Heading\nContent here."
  metadata={
    <Detail.Metadata>
      <Detail.Metadata.Label title="Status" text="Active" icon={Icon.Checkmark} />
    </Detail.Metadata>
  }
/>

3. Form (User Input)

Always include a

SubmitForm

action.

Form Reference

<Form
  actions={
    <ActionPanel>
      <Action.SubmitForm onSubmit={(values) => console.log(values)} />
    </ActionPanel>
  }
>
  <Form.TextField id="title" title="Title" placeholder="Enter title" />
  <Form.TextArea id="description" title="Description" />
</Form>

4. Feedback & Interactivity

Prefer

showToast

for most feedback.

Toast Reference | HUD Reference

// Success/Failure
await showToast({ style: Toast.Style.Success, title: "Success!" });
// HUD (Overlay)
await showHUD("Done!");

5. Data Persistence

Use

Cache

for performance,

LocalStorage

for persistence.

Cache Reference | Storage Reference

// Cache (Sync/Transient)
const cache = new Cache();
cache.set("key", "value");
// LocalStorage (Async/Persistent)
await LocalStorage.setItem("key", "value");

6. AI & Browser Extension (Restricted APIs)

Always wrap in

environment.canAccess

checks.

AI Reference | Browser Reference

if (environment.canAccess(AI)) {
  const result = await AI.ask("Prompt");
}
if (environment.canAccess(BrowserExtension)) {
const tabs = await BrowserExtension.getTabs();
}

Additional Resources

API Reference Tree

UI Components
- Action Panel
- Detail
- Form
- Grid
- List
- User Interface
Interactivity
Utilities & Services
- AI
- Browser Extension
- Clipboard
- Environment
- Feedback & HUD
  - HUD
  - Toast
- OAuth
- System Utilities
Data & Configuration
- Caching
- Colors
- Icons & Images
- Preferences
- Storage
Advanced

Examples

For end-to-end examples combining multiple components and APIs, see examples.md.

raycast

AI Skill Market Insights

Be Part of the 2,065+ Developer Community

Raycast Extensions Skill

Quick Start (Agent Workflow)

Cookbook Patterns

1. List & Grid (Searchable UI)

2. Detail (Rich Markdown)

3. Form (User Input)

4. Feedback & Interactivity

5. Data Persistence

6. AI & Browser Extension (Restricted APIs)

Additional Resources

API Reference Tree

Examples

Quick Start

Manual Installation

TEAR & SHARE

Tags

using-git-worktrees

finishing-a-development-branch

test-driven-development

requesting-code-review

receiving-code-review

Channels

Learn

Compare

Company