Skill source-command-webapp-capture
Capture live web applications to generate demo videos, component libraries, design tokens, and UI inconsistency audits.
- Bintang GitHub
- 95
- File
- 1
- Commit terakhir
- 18 Okt 2026
- Lisensi
- AGPL-3.0-or-later
- Tool yang diizinkan
- —
Apa fungsi skill source-command-webapp-capture?
source-command-webapp-capture adalah agent skill. Capture live web applications to generate demo videos, component libraries, design tokens, and UI inconsistency audits.
Ringkasan dibuat dari SKILL.md skill ini.
Tentang 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.
Apa yang bisa dilakukan agent dengannya
- 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.
Ditulis dari SKILL.md milik skill tersebut. Setiap use case diverifikasi dengan kutipan darinya.
Cara install skill source-command-webapp-capture
Setiap perintah menyalin folder skill ke direktori skills client. Restart client atau mulai sesi baru untuk memuatnya.Install skill source-command-webapp-capture di Plugin
/plugin marketplace add legioncodeinc/vibe-coding-tools /plugin install browser-and-app-testing-tools@wasp-nest
Install skill source-command-webapp-capture di 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-captureInstall skill source-command-webapp-capture di 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-captureInstall skill source-command-webapp-capture di 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-captureInstall skill source-command-webapp-capture di 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-captureInstall skill source-command-webapp-capture di 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
Lihat di 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.
Berkas dalam skill ini
1Pertanyaan seputar skill source-command-webapp-capture
Bagaimana cara install skill source-command-webapp-capture di Claude Code?
Jalankan 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 memuat skill dari ~/.claude/skills (semua proyek) atau .claude/skills (satu proyek) dan menggunakan skill saat deskripsinya cocok dengan tugas.
Client mana saja yang bisa menggunakan skill source-command-webapp-capture?
Client apa pun yang membaca format Agent Skills: Claude Code, Codex, Gemini CLI, dan claude.ai (unggah sebagai ZIP). Script dalam skill hanya berjalan di client yang mengizinkan eksekusi kode.
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.