mcpField
R
raycast-extensions

raycast-extensions

github.com/alexi-build開発1755 回インストール25 週間前に更新
リポジトリ

raycast-extensions について

React、TypeScript、Raycast API を使った Raycast 拡張機能の開発を支援するスキルです。API リファレンス、UI パターン、データ処理、制限付き API のアクセス確認を案内します。

主な機能

  1. 01React と TypeScript の実装ガイド
  2. 02Raycast API リファレンスの参照
  3. 03List、Grid、Detail、Form のパターン
  4. 04Cache と LocalStorage の利用ガイド
  5. 05制限付き API のアクセス確認

活用シーン

  1. 01検索可能な拡張機能の UI を構築
  2. 02フォームと詳細ビューを追加
  3. 03一時データと永続データの保存先を選択
  4. 04アクセス確認付きで AI やブラウザー機能を実装

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/alexi-build/raycast-extensions-skill --skill raycast-extensions

インストール後、Claude Code で/raycast-extensionsを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

examples.md
references/api/
alert.md
clipboard.md
command-related-utilities.md
actions.md
action-panel.md
browser-extension.md
caching.md
colors.md
ai.md
detail.md
environment.md
keyboard.md
feedback.md
hud.md
grid.md
navigation.md
pikachu-1.md
pikachu-3.md
pikachu-2.md
form.md
menu-bar-commands.md
icons-images.md
oauth.md
list.md
pikachu-4.md
preferences.md
pikachu.md
system-utilities.md
storage.md

詳細

Raycast Extensions スキル

React、TypeScript、Raycast API を使って、強力な拡張機能を構築します。

リポジトリの規約

  • Raycast 拡張機能リポジトリの CHANGELOG.md を更新するときは、日付のプレースホルダーとして常に {PR_MERGE_DATE} を使用します。
  • CHANGELOG.md に具体的な日付を記載しないでください。

クイックスタート（エージェントのワークフロー）

Raycast の機能の実装や修正を依頼された場合は、以下の手順に従ってください。

  1. 中心となるコンポーネントを特定する：UI に List、Grid、Detail、Form のどれが必要かを判断します。
  2. リファレンスを参照する：references/api/ 内の対応するファイル（例：references/api/list.md）を開いて読みます。
  3. 既定の方針を適用する：
    • フィードバック：読み込み／成功／失敗の通知には showToast を使用します。バックグラウンド処理の迅速な完了を知らせる場合に限り、showHUD を使用します。
    • データ：頻繁に使う一時的なデータには Cache を、ユーザーデータの永続化には LocalStorage を使用します。
    • アクセス：使用前に必ず environment.canAccess(AI) または environment.canAccess(BrowserExtension) を確認します。
    • 変更履歴：Raycast 拡張機能リポジトリの CHANGELOG.md を更新するときは、日付のプレースホルダーとして常に {PR_MERGE_DATE} を使用します。具体的な日付は記載しないでください。
  4. 実装：@raycast/api のコンポーネントを使って簡潔に実装します。
  5. 参照元を示す：使用した references/api/*.md ファイルへのリンクを記載します。

クックブックのパターン

1. List と Grid（検索可能な UI）

テキスト中心のデータには List を、画像中心のデータには Grid を使用します。

<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（リッチな Markdown）

長文のコンテンツや項目の詳細を表示する場合に使用します。

<Detail
  isLoading={isLoading}
  markdown="# Heading\nContent here."
  metadata={
    <Detail.Metadata>
      <Detail.Metadata.Label title="Status" text="Active" icon={Icon.Checkmark} />
    </Detail.Metadata>
  }
/>
3. Form（ユーザー入力）

必ず SubmitForm アクションを含めます。

<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. フィードバックとインタラクティブ機能

ほとんどのフィードバックには showToast を使用します。

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

// HUD (Overlay)
await showHUD("Done!");
5. データの永続化

パフォーマンス向上には Cache を、永続化には LocalStorage を使用します。

// Cache (Sync/Transient)
const cache = new Cache();
cache.set("key", "value");

// LocalStorage (Async/Persistent)
await LocalStorage.setItem("key", "value");
6. AI とブラウザー拡張機能（制限付き API）

必ず environment.canAccess のチェックで囲みます。

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

if (environment.canAccess(BrowserExtension)) {
  const tabs = await BrowserExtension.getTabs();
}

その他のリソース

API リファレンスの一覧

例

複数のコンポーネントと API を組み合わせたエンドツーエンドの例については、examples.md をご覧ください。

コメント

Markdown 対応