raycast-extension-creator

Raycast Extension Creator

Raycast Extension을 TypeScript로 생성하고 설정하는 스킬.

언제 사용하는가

• Raycast Extension 개발 요청 시
• List, Form, Detail 등 UI가 필요한 앱 요청 시
• 클립보드 히스토리, HUD 알림, 폼 입력 등 Raycast API 필요 시
• 기존 쉘 스크립트를 Raycast Extension으로 업그레이드할 때

Raycast Extension vs Script Command

구분	Script Command (.sh)	Extension (TypeScript)
복잡도	단순 명령어	복잡한 로직/UI
API 접근	pbcopy/osascript	Raycast API 전체
클립보드 히스토리	polling 방식 (불안정)	Clipboard.copy (확실)
UI	없음	Form, List, Detail, Grid
사용 케이스	단순 스크립트	앱 수준 기능

Extension 생성 워크플로우

1. 프로젝트 초기화

mkdir -p <project-path>/src <project-path>/assets

2. package.json 템플릿

{
  "$schema": "https://www.raycast.com/schemas/extension.json",
  "name": "<extension-name>",
  "title": "<Extension Title>",
  "description": "<설명>",
  "icon": "icon.png",
  "author": "<author>",
  "categories": ["Productivity"],
  "license": "MIT",
  "commands": [
    {
      "name": "<command-name>",
      "title": "<Command Title>",
      "description": "<명령어 설명>",
      "mode": "view"
    }
  ],
  "dependencies": {
    "@raycast/api": "^1.65.0",
    "@raycast/utils": "^1.10.0"
  },
  "devDependencies": {
    "@raycast/eslint-config": "^1.0.8",
    "@types/node": "20.10.0",
    "@types/react": "18.2.38",
    "eslint": "^8.54.0",
    "prettier": "^3.1.0",
    "typescript": "^5.3.2"
  },
  "scripts": {
    "build": "ray build -e dist",
    "dev": "ray develop",
    "fix-lint": "ray lint --fix",
    "lint": "ray lint"
  }
}

3. tsconfig.json 템플릿

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "display": "Raycast Extension",
  "compilerOptions": {
    "lib": ["ES2021"],
    "module": "commonjs",
    "target": "ES2021",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "jsx": "react-jsx",
    "outDir": "dist"
  },
  "include": ["src/**/*"]
}