Skill source-command-webapp-capture
Capture live web applications to generate demo videos, component libraries, design tokens, and UI inconsistency audits.
- Estrellas en GitHub
- 95
- Archivos
- 1
- Último commit
- 18 oct 2026
- Licencia
- AGPL-3.0-or-later
- Herramientas permitidas
- —
¿Qué hace la skill source-command-webapp-capture?
source-command-webapp-capture es una agent skill. Capture live web applications to generate demo videos, component libraries, design tokens, and UI inconsistency audits.
Resumen generado a partir del SKILL.md de la skill.
Sobre la 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.
Lo que un agente puede hacer con ella
- 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.
Escrito a partir del SKILL.md de la skill. Cada caso de uso se verifica con una cita del mismo.
Cómo instalar la skill source-command-webapp-capture
Cada comando copia la carpeta de la skill al directorio de skills del cliente. Reinicia el cliente o inicia una nueva sesión para cargarla.Instalar la skill source-command-webapp-capture en Plugin
/plugin marketplace add legioncodeinc/vibe-coding-tools /plugin install browser-and-app-testing-tools@wasp-nest
Instalar la skill source-command-webapp-capture en 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-captureInstalar la skill source-command-webapp-capture en 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-captureInstalar la skill source-command-webapp-capture en 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-captureInstalar la skill source-command-webapp-capture en 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-captureInstalar la skill source-command-webapp-capture en 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
Ver en 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.
Archivos de esta skill
1Preguntas sobre la skill source-command-webapp-capture
¿Cómo instalo la skill source-command-webapp-capture en Claude Code?
Ejecuta 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 carga las skills desde ~/.claude/skills (todos los proyectos) o .claude/skills (un proyecto) y usa una skill cuando su descripción coincide con la tarea.
¿Qué clientes pueden usar la skill source-command-webapp-capture?
Cualquier cliente que lea el formato Agent Skills: Claude Code, Codex, Gemini CLI y claude.ai (subir como ZIP). Los scripts de la skill se ejecutan solo donde el cliente permite la ejecución de código.
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.