raycast-extensions
Build Raycast extensions — commands, List/Form/Grid views, hooks like useFetch, AI integration, manifest. Use when the user says 'raycast extension', 'add a raycast command', or is working in a project with @raycast/api and a Raycast manifest.
소스 정보
- 저장소
- nweii/agent-stuff
- 최근 소스 활동
- 2026년 5월 8일 21:59
- 감지된 SKILL.md 언어
- 영어
- 스타
- 10
- 포크
- 0
설치 방법
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
소스 파일 검토
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
파일 탐색기
13 개 파일SKILL.md 표시 중
SKILL.md
소스 지침 · 읽기 전용 미리보기- name
- raycast-extensions
- description
- Build Raycast extensions — commands, List/Form/Grid views, hooks like useFetch, AI integration, manifest. Use when the user says 'raycast extension', 'add a raycast command', or is working in a project with @raycast/api and a Raycast manifest.
- metadata
- {"author":"nweii","version":"1.1.0"}
# Raycast Extension Development
Build Raycast extensions using React, TypeScript, and Node.js.
## Quick Start
1. **Create extension**: Run "Create Extension" command in Raycast
2. **Install & develop**: `npm install && npm run dev`
3. **Edit**: Modify `src/index.tsx`, changes hot-reload automatically
4. **Test**: Extension appears at top of Raycast root search
## Choosing a UI Primitive
| Need | Component |
|------|-----------|
| Searchable list of items | `List` |
| Image gallery/grid | `Grid` |
| User input collection | `Form` |
| Rich content display | `Detail` |
| Status bar presence | `MenuBarExtra` |
### Decision Tree
1. **Displaying items the user searches/filters?**
- Text-focused → `List`
- Image-focused → `Grid`
2. **Collecting user input?** → `Form`
3. **Showing detailed content?** → `Detail` (supports markdown + metadata)
4. **Always-visible status bar?** → `MenuBarExtra`
## Core Patterns
### List with ActionPanel
```tsx
import { ActionPanel, Action, List } from "@raycast/api";
export default function Command() {
return (
<List>
<List.Item
title="Item"
actions={
<ActionPanel>
<Action.CopyToClipboard content="Copied!" />
<Action.OpenInBrowser url="https://raycast.com" />
</ActionPanel>
}
/>
</List>
);
}
```
### Data Fetching
```tsx
import { List } from "@raycast/api";
import { useFetch } from "@raycast/utils";
export default function Command() {
const { data, isLoading } = useFetch<Item[]>("https://api.example.com/items");
return (
<List isLoading={isLoading}>
{data?.map((item) => <List.Item key={item.id} title={item.name} />)}
</List>
);
}
```
### AI Integration
```tsx
import { AI, Clipboard } from "@raycast/api";
export default async function Command() {
const answer = await AI.ask("Summarize this text");
await Clipboard.copy(answer);
}
```
> [!NOTE]
> AI requires Raycast Pro. Check access with `environment.canAccess(AI)`.
## References
For detailed documentation, see:
- **UI Components**: [references/ui-components.md](references/ui-components.md) - List, Detail, Form, Grid, ActionPanel, MenuBarExtra
- **Hooks & Utilities**: [references/hooks-utilities.md](references/hooks-utilities.md) - useFetch, LocalStorage, Clipboard, OAuth, runAppleScript
- **AI API**: [references/ai-api.md](references/ai-api.md) - AI.ask, useAI, model selection, streaming
- **Package Structure**: [references/package-structure.md](references/package-structure.md) - manifest, commands, preferences
## Examples
Runnable examples in `examples/`:
| File | Pattern |
|------|---------|
| `list-with-actions.tsx` | List + ActionPanel basics |
| `list-with-detail.tsx` | List with detail panel |
| `form-with-validation.tsx` | Form + useForm validation |
| `detail-with-metadata.tsx` | Detail markdown + metadata |
| `grid-with-images.tsx` | Grid layout |
| `data-fetching.tsx` | useFetch patterns |
| `ai-integration.tsx` | AI.ask with streaming |
| `menubar-extra.tsx` | MenuBarExtra interactions |
GitHub에서 보기