raycast-extensions
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.
معلومات المصدر
- المستودع
- ThinkfleetAI/thinkfleet-engine
- آخر نشاط في المصدر
- ١ فبراير ٢٠٢٦ في ٢١:٠٩
- لغة SKILL.md المكتشفة
- الإنجليزية
- النجوم
- ٠
- التفرعات
- ٠
خيارات التثبيت
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
مراجعة ملفات المصدر
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
عرض SKILL.md
SKILL.md
تعليمات المصدر · معاينة للقراءة فقط- 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.
# 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:
1. **Identify the core component**: Determine if the UI needs a `List`, `Grid`, `Detail`, or `Form`.
2. **Consult Reference**: Open and read the corresponding file in `references/api/` (e.g., `references/api/list.md`).
3. **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.
4. **Implementation**: Provide a concise implementation using `@raycast/api` components.
5. **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](references/api/list.md) | [Grid Reference](references/api/grid.md)
```tsx
<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](references/api/detail.md)
```tsx
<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](references/api/form.md)
```tsx
<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](references/api/toast.md) | [HUD Reference](references/api/hud.md)
```typescript
// 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](references/api/caching.md) | [Storage Reference](references/api/storage.md)
```typescript
// 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](references/api/ai.md) | [Browser Reference](references/api/browser-extension.md)
```typescript
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](references/api/action-panel.md)
- [Detail](references/api/detail.md)
- [Form](references/api/form.md)
- [Grid](references/api/grid.md)
- [List](references/api/list.md)
- [User Interface](references/api/user-interface.md)
- **Interactivity**
- [Actions](references/api/actions.md)
- [Alert](references/api/alert.md)
- [Keyboard](references/api/keyboard.md)
- [Navigation](references/api/navigation.md)
- [Raycast Window Search Bar](references/api/raycast-window-search-bar.md)
- **Utilities & Services**
- [AI](references/api/ai.md)
- [Browser Extension](references/api/browser-extension.md)
- [Clipboard](references/api/clipboard.md)
- [Environment](references/api/environment.md)
- [Feedback & HUD](references/api/feedback.md)
- [HUD](references/api/hud.md)
- [Toast](references/api/toast.md)
- [OAuth](references/api/oauth.md)
- [System Utilities](references/api/system-utilities.md)
- **Data & Configuration**
- [Caching](references/api/caching.md)
- [Colors](references/api/colors.md)
- [Icons & Images](references/api/icons-images.md)
- [Preferences](references/api/preferences.md)
- [Storage](references/api/storage.md)
- **Advanced**
- [Command Related Utilities](references/api/command-related-utilities.md)
- [Menu Bar Commands](references/api/menu-bar-commands.md)
- [Tool](references/api/tool.md)
- [Window Management](references/api/window-management.md)
## Examples
For end-to-end examples combining multiple components and APIs, see [examples.md](examples.md).
عرض على GitHub