메뉴
Build and maintain Raycast extensions using the Raycast API. Triggers on @raycast/api, List, Grid, Detail, Form, AI.ask, LocalStorage, Cache, showToast, and BrowserExtension. Use this repo's references/api/*.md files as the primary source of truth for component specs and API usage.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | raycast-extensions |
| description | Build and maintain Raycast extensions using the Raycast API. Triggers on @raycast/api, List, Grid, Detail, Form, AI.ask, LocalStorage, Cache, showToast, and BrowserExtension. Use this repo's references/api/*.md files as the primary source of truth for component specs and API usage. |
Build powerful extensions with React, TypeScript, and the Raycast API.
CHANGELOG.md for the Raycast extensions repository, always use {PR_MERGE_DATE} as the date placeholder.CHANGELOG.md.Follow these steps when tasked with implementing or fixing Raycast features:
List, Grid, Detail, or Form.references/api/ (e.g., references/api/list.md).showToast for Loading/Success/Failure. Use showHUD only for quick background completions.Cache for frequent/transient data, LocalStorage for persistent user data.environment.canAccess(AI) or environment.canAccess(BrowserExtension) before use.CHANGELOG.md for the Raycast extensions repository, always use {PR_MERGE_DATE} as the date placeholder. Never write a literal calendar date.@raycast/api components.references/api/*.md file you used.Use List for text-heavy data and Grid for image-heavy data.
<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>
Use for displaying long-form content or item details.
<Detail
isLoading={isLoading}
markdown="# Heading\nContent here."
metadata={
<Detail.Metadata>
<Detail.Metadata.Label title="Status" text="Active" icon={Icon.Checkmark} />
</Detail.Metadata>
}
/>
Always include a SubmitForm action.
<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>
Prefer showToast for most feedback.
// Success/Failure
await showToast({ style: Toast.Style.Success, title: "Success!" });
// HUD (Overlay)
await showHUD("Done!");
Use Cache for performance, LocalStorage for persistence.
// Cache (Sync/Transient)
const cache = new Cache();
cache.set("key", "value");
// LocalStorage (Async/Persistent)
await LocalStorage.setItem("key", "value");
Always wrap in environment.canAccess checks.
if (environment.canAccess(AI)) {
const result = await AI.ask("Prompt");
}
if (environment.canAccess(BrowserExtension)) {
const tabs = await BrowserExtension.getTabs();
}
For end-to-end examples combining multiple components and APIs, see examples.md.