source-command-webapp-capture skill
Capture live web applications to generate demo videos, component libraries, design tokens, and UI inconsistency audits.
- GitHub yıldızları
- 95
- Dosyalar
- 1
- Son commit
- 18 Eki 2026
- Lisans
- AGPL-3.0-or-later
- İzin verilen araçlar
- —
source-command-webapp-capture skill ne işe yarar?
source-command-webapp-capture bir agent skill'dir. Capture live web applications to generate demo videos, component libraries, design tokens, and UI inconsistency audits.
Özet, skill'in SKILL.md dosyasından oluşturuldu.
source-command-webapp-capture skilli hakkında
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.
Bir agent bununla neler yapabilir
- 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'in SKILL.md dosyasından yazılmıştır. Her kullanım durumu oradaki bir alıntı ile kontrol edilir.
source-command-webapp-capture skill nasıl kurulur
Her komut, skill klasörünü istemcinin skills dizinine kopyalar. Yüklemek için istemciyi yeniden başlatın veya yeni bir oturum başlatın.source-command-webapp-capture skill'ini Eklenti uygulamasına kur
/plugin marketplace add legioncodeinc/vibe-coding-tools /plugin install browser-and-app-testing-tools@wasp-nest
source-command-webapp-capture skill'ini Claude Code uygulamasına kur
~/.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-capturesource-command-webapp-capture skill'ini Claude Code (project) uygulamasına kur
.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-capturesource-command-webapp-capture skill'ini Codex uygulamasına kur
~/.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-capturesource-command-webapp-capture skill'ini Gemini CLI uygulamasına kur
~/.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-capturesource-command-webapp-capture skill'ini Claude.ai uygulamasına kur
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
GitHub'da görüntülesource-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.
Bu becerideki dosyalar
1source-command-webapp-capture skill soruları
source-command-webapp-capture skill'ini Claude Code uygulamasına nasıl kurarım?
npx degit legioncodeinc/vibe-coding-tools/plugins/browser-and-app-testing-tools/skills/source-command-webapp-capture ~/.claude/skills/source-command-webapp-capture komutunu çalıştırın. Claude Code, skill'leri ~/.claude/skills (tüm projeler) veya .claude/skills (tek proje) konumundan yükler ve açıklaması görevle eşleştiğinde skill'i kullanır.
source-command-webapp-capture skill'ini hangi istemciler kullanabilir?
Agent Skills biçimini okuyan her istemci: Claude Code, Codex, Gemini CLI ve claude.ai (ZIP olarak yükleyin). Skill içindeki betikler yalnızca istemcinin kod çalıştırmaya izin verdiği yerlerde çalışır.
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.