alexi-build/raycast-extensions-skill
Overview
This skill helps you build and maintain Raycast extensions with React, TypeScript, and the Raycast API. It focuses on choosing the correct UI component, using the right data persistence and feedback mechanisms, and safely accessing restricted APIs like AI and BrowserExtension. The guidance is driven by the repo's reference files for each component and API surface.
How this skill works
I guide you through selecting the core UI (List, Grid, Detail, or Form), consulting the corresponding reference file, and producing a concise implementation using @raycast/api components. The skill enforces best practices for feedback (showToast vs showHUD), data handling (Cache vs LocalStorage), and permission checks (environment.canAccess checks for AI and BrowserExtension). It includes cookbook patterns and code snippets for common scenarios and points to the specific reference files used.
When to use it
- Creating a searchable or paginated UI: use List for text, Grid for images.
- Displaying long-form or rich content: use Detail with markdown and metadata.
- Collecting structured user input: use Form with a SubmitForm action.
- Caching frequent/transient data or persisting user settings.
- Invoking AI or BrowserExtension APIs only when environment.canAccess returns true.
Best practices
- Start by identifying the primary UI component before writing code to keep the interface focused.
- Use showToast for loading/success/failure flows; reserve showHUD for quick background feedback.
- Use Cache for performance-sensitive, transient data and LocalStorage for persistent user preferences.
- Always guard AI and BrowserExtension calls with environment.canAccess to avoid runtime errors.
- Include accessible actions (ActionPanel) and a SubmitForm action for forms.
Example use cases
- Build a searchable file list that shows metadata and rich detail pages using List + Detail.
- Create an image browser extension with Grid and image-focused accessories and actions.
- Make a note or snippet form that persists templates to LocalStorage and caches recent items for speed.
- Add AI-powered summaries guarded by environment.canAccess(AI), falling back to a simple read-only Detail view.
- Integrate a BrowserExtension flow to read tabs or inject content only after permission checks.
FAQ
Use List for text-heavy, searchable datasets; Grid is better for image-centric or highly visual items.
When should I use Cache vs LocalStorage?
Use Cache for transient, frequently accessed data to improve responsiveness; use LocalStorage when data must persist across restarts or be explicitly saved by the user.
