Навык source-command-webapp-capture
Capture live web applications to generate demo videos, component libraries, design tokens, and UI inconsistency audits.
- Звёзды на GitHub
- 95
- Файлы
- 1
- Последний коммит
- 18 окт. 2026 г.
- Лицензия
- AGPL-3.0-or-later
- Разрешённые инструменты
- —
Что делает навык source-command-webapp-capture?
source-command-webapp-capture — это Agent Skill. Capture live web applications to generate demo videos, component libraries, design tokens, and UI inconsistency audits.
Сводка сгенерирована из SKILL.md навыка.
О skill source-command-webapp-capture
Capturing live web applications to generate technical documentation and design assets is the primary function of this tool. Developers and designers use it to transform a running application into a collection of useful resources including demo videos with accompanying scripts, component libraries, and design tokens. It also produces a Claude Design handoff zip file and a shadcn/ui map to assist in frontend development workflows.
An agent should load this skill when a user requests to run the migrated source command webapp-capture. The process results in a UI inconsistency audit and various structured files that help bridge the gap between live code and design specifications. It relies on the specific command procedure found in the commands directory to execute the capture process correctly.
Что агент может делать с ним
- 1Generate product demonstration materialsCreate a video walkthrough of a live web application along with a written script.
- 2Build component libraries and design tokensExtract design tokens and component structures from a running website to build a library.
- 3Perform UI quality auditsIdentify visual inconsistencies within a live web application through an automated audit.
Написано на основе skill SKILL.md. Каждый сценарий использования проверен по цитате из него.
Как установить навык source-command-webapp-capture
Каждая команда копирует папку навыка в каталог навыков клиента. Перезапустите клиент или начните новую сессию, чтобы загрузить его.Установка навыка source-command-webapp-capture в Плагин
/plugin marketplace add legioncodeinc/vibe-coding-tools /plugin install browser-and-app-testing-tools@wasp-nest
Установка навыка source-command-webapp-capture в Claude Code
~/.claude/skills/source-command-webapp-capture/SKILL.md
$ npx degit legioncodeinc/vibe-coding-tools/plugins/browser-and-app-testing-tools/skills/source-command-webapp-capture ~/.claude/skills/source-command-webapp-captureУстановка навыка source-command-webapp-capture в Claude Code (project)
.claude/skills/source-command-webapp-capture/SKILL.md
$ npx degit legioncodeinc/vibe-coding-tools/plugins/browser-and-app-testing-tools/skills/source-command-webapp-capture .claude/skills/source-command-webapp-captureУстановка навыка source-command-webapp-capture в Codex
~/.agents/skills/source-command-webapp-capture/SKILL.md
$ npx degit legioncodeinc/vibe-coding-tools/plugins/browser-and-app-testing-tools/skills/source-command-webapp-capture ~/.agents/skills/source-command-webapp-captureУстановка навыка source-command-webapp-capture в Gemini CLI
~/.gemini/skills/source-command-webapp-capture/SKILL.md
$ npx degit legioncodeinc/vibe-coding-tools/plugins/browser-and-app-testing-tools/skills/source-command-webapp-capture ~/.gemini/skills/source-command-webapp-captureУстановка навыка source-command-webapp-capture в Claude.ai
npx degit legioncodeinc/vibe-coding-tools/plugins/browser-and-app-testing-tools/skills/source-command-webapp-capture source-command-webapp-capture && zip -r source-command-webapp-capture.zip source-command-webapp-capture # claude.ai → Customize → Skills → + → Create skill → Upload a skill → source-command-webapp-capture.zip
SKILL.md
Открыть на GitHubsource-command-webapp-capture
Use this skill when the user asks to run the migrated source command webapp-capture.
Read the command procedure in full before acting. Resolve paths in that procedure relative to its commands/ directory. Codex invokes this as a skill, not a slash command.
Файлы в этом навыке
1Вопросы о навыке source-command-webapp-capture
Как установить навык source-command-webapp-capture в Claude Code?
Выполните npx degit legioncodeinc/vibe-coding-tools/plugins/browser-and-app-testing-tools/skills/source-command-webapp-capture ~/.claude/skills/source-command-webapp-capture. Claude Code загружает навыки из ~/.claude/skills (все проекты) или .claude/skills (один проект) и использует навык, когда его описание соответствует задаче.
Какие клиенты могут использовать навык source-command-webapp-capture?
Любой клиент, который читает формат Agent Skills: Claude Code, Codex, Gemini CLI и claude.ai (загрузить как ZIP). Скрипты в навыке выполняются только там, где клиент разрешает выполнение кода.
What does the webapp-capture command produce?
It generates a demo video and script, a component library with design tokens, a Claude Design handoff zip, a shadcn/ui map, and a UI inconsistency audit.
How should I use the source-command-webapp-capture skill?
Use this skill when a user asks to run the migrated source command webapp-capture.