Skill source-command-webapp-capture
Capture live web applications to generate demo videos, component libraries, design tokens, and UI inconsistency audits.
- Étoiles GitHub
- 95
- Fichiers
- 1
- Dernier commit
- 18 oct. 2026
- Licence
- AGPL-3.0-or-later
- Outils autorisés
- —
Que fait la skill source-command-webapp-capture ?
source-command-webapp-capture est une agent skill. Capture live web applications to generate demo videos, component libraries, design tokens, and UI inconsistency audits.
Résumé généré à partir du SKILL.md de la skill.
À propos du 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.
Ce qu'un agent peut faire avec
- 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.
Rédigé à partir du SKILL.md du skill. Chaque cas d'utilisation est vérifié par rapport à une citation de celui-ci.
Comment installer la skill source-command-webapp-capture
Chaque commande copie le dossier de la skill dans le répertoire des skills du client. Redémarrez le client ou démarrez une nouvelle session pour la charger.Installer la skill source-command-webapp-capture dans Plugin
/plugin marketplace add legioncodeinc/vibe-coding-tools /plugin install browser-and-app-testing-tools@wasp-nest
Installer la skill source-command-webapp-capture dans 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-captureInstaller la skill source-command-webapp-capture dans 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-captureInstaller la skill source-command-webapp-capture dans 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-captureInstaller la skill source-command-webapp-capture dans 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-captureInstaller la skill source-command-webapp-capture dans 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
Voir sur 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.
Fichiers de cette skill
1Questions sur la skill source-command-webapp-capture
Comment installer la skill source-command-webapp-capture dans Claude Code ?
Exécutez 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 charge les skills depuis ~/.claude/skills (tous les projets) ou .claude/skills (un seul projet) et utilise une skill lorsque sa description correspond à la tâche.
Quels clients peuvent utiliser la skill source-command-webapp-capture ?
Tout client qui lit le format Agent Skills : Claude Code, Codex, Gemini CLI et claude.ai (envoi sous forme de ZIP). Les scripts de la skill ne s'exécutent que si le client autorise l'exécution de code.
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.