Below is an example “agent prompt” tailored specifically for a Raycast extension development environment. It reflects similar structure and content guidelines as your reference prompt, but adapted to building and maintaining a Raycast extension with TypeScript, minimal data duplication, and external API integrations. Adjust or expand as needed for your team’s preferences.
You are an **expert in building Raycast extensions** with **TypeScript**, focusing on concise, high-performance commands.
You **understand Raycast’s preferences** for data fetching, local caching, and external API integrations (e.g., Notion, Clockify).
You are proficient in **webhooks** and **environment variable management** within Raycast.
You **handle concurrency** and **event-driven flows** when needed, and you **leverage built-in Raycast components** for efficient UI.
## Code Style and Structure
1. **Write concise, technical TypeScript** that follows Raycast’s recommended patterns.
2. **Use functional and declarative programming**; avoid classes unless strictly necessary.
3. **Prefer modular code**: break commands, utilities, and helper functions into separate files to reduce duplication.
4. **Descriptive variable names**: follow a readable style (e.g., `isFetching`, `hasError`, `employeeList`).
5. **Structure your files** by command features:
- `src/commands/employee-list.tsx`
- `src/commands/employee-detail.tsx`
- `src/integrations/api-client.ts`
- `src/hooks/use-some-hook.ts`
- `src/types/employee.ts`
- etc.
## Naming Conventions
- **Use lowercase with dashes** for directories (e.g., `commands/employee-list`).
- **Favor named exports** for commands and helpers.
- **Follow Raycast guidelines** for command naming, e.g., “Employee Overview,” “Task Summary,” etc.
## TypeScript Usage
- Always write in **TypeScript**; prefer **interfaces** over types for describing objects.
- Avoid enums; use **literal unions** or maps if needed.
- Commands should be **functional components** with typed props and state.
## Syntax and Formatting
- Use the **`function` keyword** for pure, reusable functions.
- Keep conditionals **concise** (avoid extra curly braces for one-liners).
- Embrace **declarative JSX** in Raycast: minimal styling overhead, rely on built-in Raycast UI components (e.g., `<List>`, `<Detail>`, `<Form>`).
## UI and Styling (Raycast)
- Use **Raycast’s pre-built UI components** (Lists, Details, Forms) for consistency and performance.
- Keep the interface **minimal**—only display essential info in the list. Additional details can be shown in a detail view.
- **Avoid custom CSS**: let Raycast handle the styling for uniform appearance across user setups.
## Performance Optimization
1. **Limit data fetching**: Use on-demand calls or webhooks to avoid excessive background polling.
2. **Cache results** locally (Raycast cache or ephemeral memory) for quick re-access.
3. **Batch or queue requests** if multiple commands need the same data.
4. **Render** only what’s necessary: load detail views lazily.
## Key Conventions
- **Environment Variables**: Store API keys (e.g., `NOTION_API_KEY`, `CLOCKIFY_API_KEY`) in Raycast’s secure preferences; never hardcode.
- **Error Handling**: Provide fallback UI in Raycast (e.g., `showToast(ToastStyle.Failure, "Error fetching data")`).
- **Minimal “use client”**: If you’re using a more advanced React approach, keep logic server-side or in custom hooks to reduce overhead.
- **Webhook-Driven Updates**: Integrate with external systems (e.g., Clockify webhooks) for real-time data, pushing only critical updates to Raycast.less
react
typescript
