local-explorer

작성자: cloudflare

로컬 탐색기 또는 로컬 API에 제품/리소스를 추가하는 방법. 새로운 로컬 API나 UI 라우트를 구현할 때 사용합니다.

npx skills add https://github.com/cloudflare/workers-sdk --skill local-explorer

Cloudflare Local Explorer Products

Use this skill when adding a new product or resource type to the local API and/or local explorer.

Start Here

Read these files before editing:

  • packages/miniflare/src/workers/local-explorer/explorer.worker.ts
  • packages/miniflare/src/plugins/core/explorer.ts
  • packages/miniflare/src/plugins/core/types.ts
  • One existing resource implementation in packages/miniflare/src/workers/local-explorer/resources/, preferably the product most similar to the new one
  • One matching test in packages/miniflare/test/plugins/local-explorer/

If there are UI changes, also read:

  • packages/local-explorer-ui/src/components/Sidebar.tsx
  • Existing route files under packages/local-explorer-ui/src/routes/
  • Existing product e2e tests under packages/local-explorer-ui/src/__e2e__/

Workflow

  1. Add the API surface to packages/miniflare/scripts/openapi-filter-config.ts.
  2. Generate Miniflare's filtered spec and backend types from a full Cloudflare OpenAPI spec:
OPENAPI_INPUT_PATH=<path-to-full-openapi-spec> pnpm --dir packages/miniflare generate:api
  1. Inspect packages/miniflare/src/workers/local-explorer/openapi.local.json and generated types. If the generated schemas include fields local explorer will not support, add ignores in openapi-filter-config.ts and regenerate.
  2. The explorer worker should have access to all user resource bindings. Ensure proxyBindings include bindings to the new product and that getExplorerServices() exposes any extra bindings the explorer worker needs. Wire product bindings through constructExplorerBindingMap() and constructExplorerWorkerOpts() in packages/miniflare/src/plugins/core/explorer.ts.
  3. Add or extend resource binding metadata in packages/miniflare/src/plugins/core/types.ts.
  4. Implement handlers in packages/miniflare/src/workers/local-explorer/resources/<product>.ts. Make sure to account for cross-instance aggregation, if applicable.
  5. Register Hono routes in packages/miniflare/src/workers/local-explorer/explorer.worker.ts.
  6. Validate request bodies and query params with generated Zod schemas from generated/zod.gen.ts using validateRequestBody() and validateQuery().
  7. Return Cloudflare API envelope responses using wrapResponse() and errorResponse() from common.ts unless an existing endpoint for that product uses a different response shape.
  8. Add Miniflare tests in packages/miniflare/test/plugins/local-explorer/<product>.spec.ts.
  9. Regenerate the UI API client:
pnpm --dir packages/local-explorer-ui build
  1. Add UI routes/components. Use Kumo components for new UI. See https://github.com/cloudflare/kumo/blob/main/AGENTS.md.
  2. Add Playwright e2e tests under packages/local-explorer-ui/src/__e2e__/<product>/ for new visible product flows.

OpenAPI Rules

  • Do not edit generated files like packages/miniflare/src/workers/local-explorer/openapi.local.json or packages/miniflare/src/workers/local-explorer/generated/ directly.
  • Prefer upstream Cloudflare API paths when a public API exists.
  • Use extensions.paths in openapi-filter-config.ts only for local-only APIs or APIs that do not exist in the public Cloudflare API.
  • Add ignores for unsupported params, headers, request body properties, and response fields rather than pretending to support them.

Backend Patterns

  • Local list endpoints such as listing KV namespaces should not implement pagination as this may require cross-instance aggregation. Pagination should be supported when targeting individual resources, such as listing KV keys within a specific namespace.
  • For cross-worker aggregation, use aggregateListResults(), getPeerUrlsIfAggregating(), and fetchFromPeer() from aggregation.ts; do not hand-roll peer discovery. Add tests for both local-only behavior and aggregated behavior when the product can span multiple instances.
  • If an API needs direct filesystem access, call through the loopback service (c.env.MINIFLARE_LOOPBACK) to a Node.js endpoint. The local explorer API runs inside workerd, so it cannot access the host filesystem directly.
  • If an endpoint needs metadata that is not available on the runtime binding itself, put that metadata in BindingIdMap and pass it through CoreBindings.JSON_LOCAL_EXPLORER_BINDING_MAP.
  • If a product should appear in /api/local/workers, add it to WorkerResourceBindings and populate it in constructExplorerWorkerOpts().

UI Patterns

  • The UI API client is generated from packages/miniflare/src/workers/local-explorer/openapi.local.json into packages/local-explorer-ui/src/api/generated/.
  • Sidebar resources come from /api/local/workers; update LocalExplorerWorkerBindings usage and Sidebar.tsx when the product should appear in navigation.
  • Add route files under packages/local-explorer-ui/src/routes/. TanStack Router regenerates src/routeTree.gen.ts during UI build/dev.
  • Preserve worker selection by carrying the worker search param through product links when following sidebar patterns.
  • Use Kumo for new UI components wherever possible. Do not introduce a parallel component system.
  • Do not use tailwindCSS color tokens, use Kumo color tokens instead.

cloudflare의 다른 스킬

dependabot-review
cloudflare
Dependabot PR을 분석하여 각 업데이트된 패키지에서 실제로 변경된 사항과 해당 변경 사항이 이 저장소에 영향을 미치는지 확인합니다. 변경된 API/메서드 등을 보고합니다.
module-registry
cloudflare
workerd에서 모듈 레지스트리를 작업할 때 로드 — 모듈 해석, 컴파일, 평가, 등록을 읽기, 수정, 디버깅, 검토하는 경우…
reproduce
cloudflare
cloudflare/agents GitHub 이슈를 재현하기 위해 최소한의 Agents/Worker 프로젝트를 스캐폴딩하고 임시 Cloudflare 계정에 배포한 후 보고합니다…
open-pr
cloudflare
클라우드플레어/에이전트 GitHub 이슈와 재현 결과를 바탕으로 수정 PR을 한 번에 생성합니다 — 브랜치 생성, 변경, 테스트, 푸시, 그리고 이슈에 연결된 PR 열기까지 수행합니다.
write-endpoints
cloudflare
chanfana를 사용한 OpenAPI 엔드포인트 구축을 위한 종합 가이드 - 스키마 정의, 요청 검증, CRUD 작업, D1 데이터베이스 통합 등
agents-sdk
cloudflare
Cloudflare Workers에서 Agents SDK를 사용하여 AI 에이전트를 구축하세요. 상태 저장 에이전트, 지속 가능한 워크플로우, 실시간 WebSocket 앱, 예약된 작업 등을 생성할 때 로드하세요.
changelog
cloudflare
Cloudflare 문서 사이트의 제품 변경 로그 항목을 생성, 업데이트 및 검토합니다. 변경 로그 MDX 파일을 생성하거나 기존 파일을 편집할 때 로드합니다.
cloudflare
cloudflare
Cloudflare 플랫폼 전반을 다루는 스킬로, Workers, Pages, 스토리지(KV, D1, R2), AI(Workers AI, Vectorize, Agents SDK), 네트워킹(Tunnel, Spectrum) 등을 포함합니다.