prompt-api — скилл для Claude Code: что делает и как установить
Настраивает и отлаживает встроенный браузерный Prompt API в веб-приложениях на JavaScript и TypeScript. Помогает подключить локальную модель, стриминг и отслеживание загрузки.
npx skills add webmaxru/web-ai-agent-skills --skill prompt-api -a claude-codeЧто делает prompt-api
Скилл находит фронтенд-файлы в проекте через скрипт node scripts/find-frontend-targets.mjs . или вручную, после чего формирует сервис-обёртку на базе шаблона assets/language-model-service.template.ts. Скилл подключает проверки доступности через LanguageModel.availability() и настраивает создание сессий после действий пользователя. Для генерации текста он связывает вызовы prompt() или promptStreaming() с отменой через AbortController.
В коде учитываются ограничения спецификации: параметры temperature и topK не используются, поскольку они устарели для обычных страниц, а вызов tools считается экспериментальным. Скилл работает только в контексте окна браузера и сразу останавливает работу, если код запускается внутри Web Worker. Для встраивания во фреймы проверяется директива allow="language-model". При отсутствии нативной поддержки ИИ предлагает полифилы или фолбэк без нейросетей.
Без защищённого контекста окна и явного разрешения permissions-policy вызовы API в браузере завершатся ошибкой.
Какие задачи решает
- внедрить локальный Prompt API в клиентский JavaScript или TypeScript
- настроить стриминг ответов через
promptStreamingс отменой поAbortController - получить структурированный JSON-ответ с помощью
responseConstraint - показать прогресс загрузки модели через слушатель
monitor - сконфигурировать политику
allow="language-model"для работы вiframe
Примеры запросов агенту
- Добавь проверку LanguageModel.availability() и стриминг ответов в форму чата
- Настрой генерацию структурированного JSON через Prompt API с валидацией схемы
- Сделай отслеживание прогресса загрузки модели для нашего веб-приложения
Как установить prompt-api
1Через Skills CLI (Vercel)
npx skills add webmaxru/web-ai-agent-skills --skill prompt-api -a claude-code2Вручную: положить файлы
~/.claude/skills/prompt-api/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/prompt-api/
1Через Skills CLI (Vercel)
npx skills add webmaxru/web-ai-agent-skills --skill prompt-api -a codex2Вручную: положить файлы
.agents/skills/prompt-api/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add webmaxru/web-ai-agent-skills --skill prompt-api -a cursor2Вручную: положить файлы
.cursor/skills/prompt-api/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install webmaxru/web-ai-agent-skills prompt-api2Вручную: положить файлы
.github/skills/prompt-api/SKILL.md1Через Skills CLI (Vercel)
npx skills add webmaxru/web-ai-agent-skills --skill prompt-api -a gemini-cli2Командой платформы
gemini skills install https://github.com/webmaxru/web-ai-agent-skills --path skills/prompt-apiВручную: положить файлы
.devin/skills/prompt-api/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add webmaxru/web-ai-agent-skills --skill prompt-api -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о prompt-api
Как установить prompt-api в Claude Code?
Выполните команду npx skills add webmaxru/web-ai-agent-skills --skill prompt-api -a claude-code в терминале или скопируйте файл в ~/.claude/skills/prompt-api/SKILL.md.
Что делает скилл prompt-api?
Он автоматизирует интеграцию браузерного Prompt API в веб-проекты: создаёт сессии LanguageModel, обрабатывает потоковый вывод, следит за скачиванием весов и добавляет безопасные фолбэки.
Можно ли использовать Prompt API внутри Web Worker?
Нет, спецификация требует защищённый контекст окна (window), поэтому в Web Worker интеграция работать не будет.
Исходный текст
SKILL.md · MIT
--- name: prompt-api description: Implements and debugs browser Prompt API integrations in JavaScript or TypeScript web apps. Use when adding LanguageModel availability checks, session creation, prompt or promptStreaming flows, structured output, download progress UX, or iframe permission-policy handling. Don't use for server-side LLM SDKs, REST AI APIs, or non-browser providers. license: MIT metadata: author: webmaxru version: "1.4" --- # Prompt API ## Procedures **Step 1: Identify the integration surface** 1. Inspect the workspace for browser entry points, UI handlers, and any existing AI abstraction layer. 2. Execute `node scripts/find-frontend-targets.mjs .` to inventory likely frontend files and existing Prompt API usage when a Node runtime is available. 3. If a Node runtime is unavailable, inspect the nearest `package.json`, HTML entry point, and framework entry files manually to identify the browser app boundary. 4. If the workspace contains multiple frontend apps, prefer the app that contains the active route, component, or user-requested feature surface. 5. If the inventory still leaves multiple plausible frontend targets, stop and ask the user which app should receive the Prompt API integration. 6. If the project is not a browser web app, stop and explain that this skill does not apply. **Step 2: Confirm Prompt API viability** 1. Read `references/prompt-api-reference.md` before writing code. 2. Read `references/examples.md` when the feature needs a spec-valid message shape for text, multimodal, prefix, or tool-enabled sessions. 3. Read `references/compatibility.md` when the feature must support multiple browser generations or decide between native support and polyfills. 4. Read `references/polyfills.md` when the feature needs concrete package installation or backend configuration examples for Prompt API or Task API polyfills. 5. Verify that the feature runs in a secure window context and that the `language-model` permissions-policy allows access from the current frame. 6. If the integration must run in a Web Worker or other non-window context, stop and explain the platform limitation. 7. Choose the session shape the feature needs: `prompt()`, `promptStreaming()`, `initialPrompts`, `append()`, `measureContextUsage()`, or `responseConstraint`. If the feature needs tool-calling, note that `tools` is EXPERIMENTAL (experimental contexts only) in the spec and must be gated with feature detection or limited to origin-trial or extension contexts. 8. If the project uses TypeScript, add or preserve typings that cover the Prompt API surface used by the project. **Step 3: Implement a guarded session wrapper** 1. Read `assets/language-model-service.template.ts` and adapt it to the framework, state model, and file layout in the workspace. 2. Gate session creation behind `LanguageModel.availability()` using the same creation options that the feature will use at runtime, including expected modalities. Do not pass `tools` to `availability()` in portable page code since `tools` is EXPERIMENTAL. 3. Create sessions only after user activation when model download or instantiation may begin. 4. Use `AbortController` for cancelable prompts and call `destroy()` when the session is no longer needed. 5. If the feature runs in a cross-origin iframe, require `allow="language-model"` on the embedding iframe. 6. Do not depend on `params()`, `topK`, or `temperature`; the spec now marks `topK` and `temperature` as DEPRECATED (extension contexts only), so portable web page integrations must not require them. 7. Treat `availability()` as a passive capability check: if it reports `downloading` before user activation, do not assume the current page initiated that download or lock the UI into an app-started busy state. **Step 4: Wire UX and fallback behavior** 1. Surface distinct states for unavailable devices, model download, ready sessions, and in-flight prompts. 2. If download progress matters to the feature, attach a `monitor` listener during `LanguageModel.create()` and render progress in the UI. 3. Keep a non-AI fallback for unsupported browsers, unsupported devices, or blocked iframe contexts. 4. If the feature needs structured output, pass a JSON Schema through `responseConstraint`, use `omitResponseConstraintInput` only when the prompt already carries the required format instructions, and parse the returned string before using it. 5. Respect prompt-shape validation rules: `system` messages belong in `initialPrompts`, `prefix: true` applies only to the final `assistant` message, and `assistant` message content must remain text-only. 6. If `availability()` reports `downloading` before the app has called `create()`, present that as informational browser state rather than a page-owned active download, and keep controls usable unless the app itself is busy. **Step 5: Validate behavior** 1. Test short responses with `prompt()` and long responses with `promptStreaming()` when applicable. 2. Verify that repeated prompts reuse context intentionally, that destroyed sessions are not reused, and that the app uses compatibility checks for context measurement and overflow handling across browser versions. 3. Read `references/troubleshooting.md` if the integration throws `NotSupportedError` or behaves differently across frames or execution contexts. 4. Run the workspace build, typecheck, or tests after editing. ## Error Handling * If `LanguageModel` is missing, prefer progressive enhancement with a maintained Prompt API polyfill or a non-AI fallback instead of inventing a custom compatibility layer. * If `availability()` returns `downloading` before the app has called `create()`, treat it as passive browser state. Only surface live progress and block prompt submission when the app itself has started `LanguageModel.create()`. * If `availability()` or `prompt()` throws `NotSupportedError`, align the creation and prompt options with the actual modalities, languages, and message roles used by the feature. If `tools` was passed to `availability()` or `create()`, note that `tools` is EXPERIMENTAL and may not be supported in the current browser context. * If the feature must run in Web Workers, redirect the integration to a window context because the Prompt API is not available in workers. * If the feature lives in a cross-origin iframe, require `allow="language-model"` from the embedding page before continuing. * If `node scripts/find-frontend-targets.mjs .` cannot run, identify the browser app boundary manually and continue only after a single target app is clear.
© webmaxru · MIT · webmaxru/web-ai-agent-skills