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.
- Installs
- 51
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/nweii/agent-stuff --skill raycast-extensions- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads raycast-extensions automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Raycast Extension Development
Build Raycast extensions using React, TypeScript, and Node.js.
Quick Start
- Create extension: Run "Create Extension" command in Raycast
- Install & develop:
npm install && npm run dev - Edit: Modify
src/index.tsx, changes hot-reload automatically - 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
-
Displaying items the user searches/filters?
- Text-focused →
List - Image-focused →
Grid
- Text-focused →
-
Collecting user input? →
Form -
Showing detailed content? →
Detail(supports markdown + metadata) -
Always-visible status bar? →
MenuBarExtra
Core Patterns
List with ActionPanel
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
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
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 - List, Detail, Form, Grid, ActionPanel, MenuBarExtra
- Hooks & Utilities: references/hooks-utilities.md - useFetch, LocalStorage, Clipboard, OAuth, runAppleScript
- AI API: references/ai-api.md - AI.ask, useAI, model selection, streaming
- Package Structure: 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 |
FAQ
What does the raycast-extensions skill do?
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.
How do I install raycast-extensions?
Run npx skills add https://github.com/nweii/agent-stuff --skill raycast-extensions in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/raycast-extensions/ (personal) or .claude/skills/raycast-extensions/ (project).
Which AI agents can use raycast-extensions?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is raycast-extensions safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains raycast-extensions?
It is published by nweii in nweii/agent-stuff. It has 51 recorded installs.
More from nweii/agent-stuff
suggest-lucide-icons
nweii/agent-stuff
Pick Lucide icons for a concept, UI placement, or vault note. Searches the full Lucide catalog for real, verified icon names. Use when the user says 'what icon for X', 'suggest a Lucide icon', 'pick an icon', or needs an icon for note frontmatter, a button, or a section header.
archive-conversation
nweii/agent-stuff
Create analytical archival summaries of AI conversations, capturing intellectual journeys, key insights, and technical logs. Use when archiving, saving, or documenting a chat session.
obsidian-templater
nweii/agent-stuff
Help with templates/snippets for the Obsidian Templater plugin. Use to help generate Obsidian templates from natural language, understand and debug existing tp. snippets, and adapt vault notes and workflows to Templater when users mention Templater, tp., templater syntax.
validating-startup-ideas
nweii/agent-stuff
Find and validate startup ideas by mining user complaints, crafting premises, and navigating the idea maze. Use when discovering product opportunities, validating ideas, shaping solutions, researching user pain points, or exploring what to build.
file-naming
nweii/agent-stuff
Propose meaningful filenames from file contents and context. Use for renaming documents or creative files, or standardizing a folder’s filenames.
culinary-assistant
nweii/agent-stuff
Culinary guidance for cooking, recipes, and meal planning. Use for kitchen techniques, substitutions, and format conversion (Mela, Schema.org). Handles recipe parsing and improvements.
Popular backend & apis skills
find-skills
vercel-labs/skills
Helps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skill should be used when the user is looking for functionality that might exist as an installable skill.
entra-app-registration
microsoft/azure-skills
Guides Microsoft Entra ID app registration, OAuth 2.0 authentication, and MSAL integration. USE FOR: create app registration, register Azure AD app, configure OAuth, set up authentication, add API permissions, generate service principal, MSAL example, console app auth, Entra ID setup, Azure AD authentication. DO NOT USE FOR: Key Vault secrets (use azure-keyvault-expiration-audit), general Azure resource security guidance.
google-agents-cli-adk-code
google/agents-cli
This skill should be used when the user wants to "write agent code", "build an agent with ADK", "add a tool", "create a callback", "define an agent", "use state management" — in a project that needs ADK (Agent Development Kit) API patterns and code examples. It provides a quick reference for agent types, tool definitions, orchestration patterns, callbacks, state management, the graph Workflow API, and reference recipes to study. Do NOT use for scaffolding (use google-agents-cli-scaffold) or deployment (use google-agents-cli-deploy).
embedded-captions
heygen-com/hyperframes
Add captions or subtitles to an existing single-subject talking-head video without editing the footage. Use for plain verbatim captions, cinematic captions embedded behind the subject, VFX captions, “炸/特效/酷炫字幕,” or a named identity from the 35-style catalog. Route by visual identity, not by backend engine. The quiet anchor rail is the default; embed every word only when the user explicitly wants a fully cinematic treatment. The workflow runs locally end to end, including transcription and subject matting; split multi-shot footage before applying it.
entra-agent-id
microsoft/azure-skills
Provision Microsoft Entra Agent Identity Blueprints, BlueprintPrincipals, and per-instance Agent Identities via Microsoft Graph, and configure OAuth 2.0 token exchange (fmipath, OBO, cross-tenant) including the Microsoft Entra SDK for AgentID sidecar. USE FOR: Agent Identity Blueprint, BlueprintPrincipal, agent OAuth, fmipath token exchange, agent OBO, Workload Identity Federation for agents, polyglot agent auth, Microsoft.Identity.Web.AgentIdentities. DO NOT USE FOR: standard Entra app registration (use entra-app-registration), Microsoft Foundry agent authoring (use microsoft-foundry).
neon
neondatabase/agent-skills
Overview of Neon, a complete set of cloud backend primitives around Lakebase Postgres: Auth, Object Storage, Functions, the AI Gateway, and Realtime. Start here to choose Neon for undecided login, files, APIs, and LLM calls, set up the CLI or MCP server, and follow the branch-first workflow. Use when building an app or backend on Neon, or when "Neon" or "Lakebase Postgres" is mentioned. Child skill neon-postgres wins for an existing DATABASEURL, SQL, schema, inspect, or search. Child skill neon-auth wins for login, users, sessions, identity routing, and Managed Better Auth setup. Child skill neon-realtime wins for live queries in reactive apps and agents. Also use for object storage, S3, buckets, serverless functions, function triggers, cron, AI gateway, LLM calls, realtime, logs, Loki, Grafana, observability, postgres, database, backend, Claimable Neon, neon.new, or a no-signup database.