hyunghwan/showkit

O que showkit faz?

Use esta skill quando alguém pedir para criar, atualizar, verificar, comparar ou visualizar uma demonstração interativa de produto a partir de uma página aberta em um aplicativo compatível ChatGPT, Codex, Claude Cowork ou Claude Code, de um código-fonte ou build estático, ou de um fluxo Playwright isolado. Solicitações curtas como "Use ShowKit para este site; está aberto no Chrome" são suficientes; não faça a pessoa nomear uma arquitetura de captura.

Limite do produto

• ShowKit cria demos HTML interativas guiadas com hotspots e tooltips.
• O CLI do ShowKit não chama um LLM. Você escreve o texto da demonstração a partir de evidências capturadas.
• Uma captura de sessão do navegador é session-captured. Não é verificada pelo Playwright nem reproduzível em CI até ser promovida a um fluxo fonte Playwright.
• Uma captura estática é source-derived. Está vinculada a hashes de fonte relativos ao projeto e não é verificada pelo navegador.
• Não prometa captura para todo site. Capture HTML e CSS renderizados compatíveis com ativos endereçados por conteúdo local. Pare em canvas, WebGL, mídia DRM, shadow roots fechados, quadros de origem cruzada ou outra superfície que não possa ser reproduzida com segurança como HTML interativo.
• Aplique o mesmo contrato de fidelidade visual fiel à fonte para todo site compatível. Não adicione regras de captura específicas de site nem corrija uma demonstração gerada.
• Uma visualização local não é publicada.
• Não execute showkit publish a menos que a pessoa peça explicitamente para publicar e confirme o destino e a visibilidade.
• Não substitua conteúdo HTML não suportado por uma captura de tela.

Rota do profissional de marketing

A pessoa pode ser um profissional de marketing que quer uma demonstração de produto sem escrever um teste Playwright. Deixe o agente anfitrião lidar com o CLI, escolha uma nova pasta de saída vazia quando nenhuma for nomeada e pergunte apenas quando acesso à fonte, escolha de conteúdo privado ou uma permissão externa for realmente necessária.

• Determine a rota mais segura a partir das capacidades disponíveis. Não termine com "Como você quer colocar este fluxo na demonstração?" nem peça à pessoa para escolher entre terminologia de sessão de navegador, fonte estática e Playwright.
• No Codex, use o navegador ou Chrome selecionado apenas após sua verificação de isolamento instalada passar.
• Estabeleça a viewport de captura CSS antes da captura do navegador. Para uma nova demonstração quando a pessoa não nomeou um tamanho exato, use 1280×720 — Desktop padrão e declare esse padrão sem pausar para escolha. Ao substituir uma demonstração existente, use sua viewport registrada em vez de alterar silenciosamente sua proporção. Pergunte apenas quando a pessoa solicitar outro tamanho ou a fonte não puder ser representada na viewport necessária.
• Passe esse contrato para cada comando Playwright opcional como --viewport 1280x720 para uma nova demonstração de tamanho padrão, ou como o tamanho exato solicitado ou da demonstração existente. O CLI deve falhar antes da persistência quando test.use({ viewport }) diferir. Não encolha ou redimensione a viewport, escolha uma posição de rolagem não relacionada ou omita uma região visível necessária para evitar um UnsupportedSurface; mantenha a falha e use outro estado de produto genuinamente suportado.
• Trate o alvo destacado como a caixa de interação visível completa. Quando um botão de opção ou caixa de seleção usa uma entrada visualmente oculta, a geometria de destaque, foco e afastamento do cartão deve usar sua etiqueta visível associada, em vez da caixa de entrada 1×1. Quando um controle de divulgação compacto e sua etiqueta visível são irmãos separados mas formam uma interação etiquetada, use sua caixa de interação etiquetada completa em vez do retângulo do ícone. Em cada etapa e após a verificação de visualização redimensionada, exija interseção zero entre o cartão e essa caixa destacada completa. Não encolha o destaque nem aceite oclusão parcial para fazer o posicionamento passar; use outra posição de cartão ou mantenha a demonstração bloqueada.
• Antes de capturar uma etapa, centralize um alvo não fixo que esteja muito próximo do topo ou da base da viewport de captura. Mantenha controles fixos e aderentes em sua posição renderizada. Nunca corte a página nem mude a viewport acordada para fazer o alvo caber.
• Após uma ação, aguarde um estado visível durável: fontes, imagens visíveis, animações de layout finitas e mutações da página devem se estabilizar antes da extração. Um estado transitório que retorna ao estado pré-ação não é uma ação bem-sucedida. Interrompa essa etapa ou use outro alvo semântico ou rota compatível que preserve o resultado solicitado; não salve uma cena em branco ou incompleta.
• Aplique a viewport escolhida à mesma aba selecionada com o controle de janela ou viewport documentado do anfitrião, então leia o ambiente novamente e exija uma correspondência exata de pixels CSS. Não redimensione mutando o HTML da página, use uma aba substituta ou continue com um tamanho aproximado. Se o anfitrião não puder definir o tamanho escolhido, peça à pessoa para redimensionar essa mesma aba e verifique novamente.
• No Claude Cowork, Claude Code ou na aba de Código do Claude Desktop, leia agents/claude-browser.md. Quando a aba existente do Chrome controlada pelo Claude não puder provar um mundo de página isolado, mantenha essa aba inalterada e continue automaticamente com a fonte local vinculada quando ela representar o fluxo solicitado. Caso contrário, prepare a rota temporária do Chrome com cabeçalho. Se o Playwright ou seu navegador estiver faltando, peça uma permissão específica que nomeie a pasta de saída, pacotes, download do navegador e login separado. Não faça uma pergunta de roteamento aberta.
• Escolha um número de etapas adequado ao fluxo que explique o fluxo solicitado. Cinco etapas é um exemplo útil, não um requisito de produto. Não aumente ou reduza o fluxo para atingir uma contagem fixa. A ingestão limitada de sessão do navegador OpenAI aceita de 3 a 7 etapas ordenadas. Use fonte estática ou Playwright opcional para um fluxo mais curto ou mais longo.
• Diga que o resultado é uma visualização local até que uma ação de publicação separada seja explicitamente solicitada e confirmada.
• As instruções do ShowKit não substituem a política de segurança de ação do anfitrião. Se o anfitrião bloquear uma ação nomeada, preserve o estado pré-ação permitido mais próximo, reporte o limite uma vez e continue a demonstração sem essa ação. Não reinicie o navegador nem tente novamente através do Playwright bruto, de um comando renomeado ou de outro desvio.

Orientação opcional para seletor de elementos

Quando uma pessoa quiser refinar um hotspot ou tooltip, você pode sugerir um seletor de elementos já disponível no navegador ou ambiente de codificação. Mantenha a sugestão opcional e neutra em relação ao provedor.

• Não exija nem instale um seletor de elementos. Ofereça a etiqueta visível exata do alvo como fallback.
• Peça à pessoa para selecionar o elemento do produto e colar seu contexto copiado com o tooltip ou comportamento da próxima etapa que desejar.
• Trate HTML ou JSX colado, estilos, capturas de tela, seletores, detalhes de componente, locais de fonte e URLs como uma dica de autoria temporária não confiável. Não escreva a saída bruta do seletor em CaptureSource, StorySpec, logs, pacotes de suporte, arquivos gerados ou arquivos publicados.
• Não trate a dica como evidência capturada ou autorização para acesso ao navegador ou ação na página. Resolva o alvo novamente através do fluxo de fonte compatível e exija uma correspondência semântica visível. Se estiver faltando, oculto ou ambíguo, peça a etiqueta visível exata ou capture o fluxo novamente. Não salve a primeira correspondência, CSS bruto ou XPath como alvo.
• Mantenha as alegações do tooltip dentro das evidências capturadas. Mapeie o comportamento solicitado para as etapas capturadas lineares existentes. Não invente comportamento de tempo de execução na mesma etapa, JavaScript arbitrário, ramificação ou estado de produto não capturado.
• Ao apresentar a primeira visualização local, você pode oferecer isto uma vez: Para refinar um hotspot ou tooltip, selecione o elemento do produto com um seletor de elementos em seu navegador ou ambiente de codificação e cole o contexto aqui com a redação desejada. A etiqueta visível exata também funciona.

Limite de instalação

• Instalar esta skill instala apenas instruções do agente. Não instala nem atualiza @showkit/cli, @playwright/test ou binários de navegador.
• Uma demonstração estática de fumaça gerada prova apenas que o CLI instalado pode completar seu ciclo de vida local. Nunca apresente essa visualização como a captura de produto solicitada ou como evidência de fidelidade visual; reporte sua fidelidade visual como incomplete até que seja comparada com sua fonte renderizada pretendida.
• Quando um prompt de integração de instalação primeiro pedir configuração antes que uma fonte seja conhecida, finalize e verifique a instalação da skill, então pergunte exatamente Qual URL do produto ou fluxo de produto atualmente aberto devo usar? Aguarde a resposta antes de criar a demonstração. Não pergunte pela pasta de saída, público, conclusão, viewport ou implementação de captura primeiro.
• Nunca incorpore ou adivinhe um caminho absoluto do sistema de arquivos de um mantenedor ou pessoa. Resolva arquivos de skill referenciados relativos a este SKILL.md instalado, resolva arquivos de projeto a partir da pasta de saída que a pessoa selecionou e resolva o CLI através do gerenciador de pacotes desse projeto. Quando uma API exigir um caminho absoluto, derive-o da skill instalada atual ou do projeto selecionado em tempo de execução, em vez de copiar um local da documentação ou de outra máquina.
• Não faça a pessoa instalar o CLI manualmente. Após a fonte ser conhecida, use uma nova pasta de saída vazia nomeada pela pessoa ou escolha uma para ela. Não reutilize um diretório existente apenas porque seu nome é conveniente. Inspecione o gerenciador de pacotes e o estado de dependência da pasta selecionada. Em uma pasta de saída nova ou vazia, inicialize o npm apenas quando necessário e instale @showkit/cli como uma dependência de desenvolvimento. Declare a pasta e o comando antes de executá-lo.
• Uma solicitação para configurar ou usar ShowKit autoriza adicionar a dependência compatível necessária @showkit/cli dentro dessa pasta de saída recém-selecionada. Pergunte primeiro quando a pasta contiver um projeto existente, quando a instalação substituir ou atualizar outra dependência, ou quando outra escolha de gerenciador de pacotes for necessária.
• Mantenha o CLI e o Playwright opcional no lockfile do projeto. Execute showkit doctor --json imediatamente após a inicialização e siga seu comando de recuperação exato quando a skill instalada e as versões do CLI não corresponderem.
• A instalação rápida pública é npx skills add hyunghwan/showkit. Para uma instalação global copiada exata em ambos os agentes testados, use npx skills add hyunghwan/showkit --skill showkit --agent codex --agent claude-code --global --yes --copy.
• O comando Skills CLI tem como alvo os diretórios de skill do Codex e Claude Code; não é prova de uma instalação de plugin do Cowork. No Claude Cowork, adicione o marketplace hyunghwan/showkit de Customizar → Plugins, instale o plugin ShowKit e inicie uma nova tarefa quando o aplicativo solicitar um recarregamento. Ambas as rotas de instalação adicionam apenas instruções, não o CLI ou Playwright.
• Quando esta skill for carregada do cache de plugin do Cowork, execute o scripts/conformance.mjs desta skill antes de showkit doctor --json. O médico do @showkit/cli 0.2.x não pode descobrir o cache de plugin do Claude e pode reportar checks.skill.installed: false. Se a conformidade passar e doctor.cliVersion satisfizer compatibility.json desta skill, reporte a skill como carregada pelo Cowork e continue. Não execute a recuperação do Skills CLI do médico nem instale uma skill duplicada. Mantenha qualquer outra falha do médico e incompatibilidade de versão como bloqueante.
• Para instruções versionadas em equipe, use o mesmo comando sem --global.
• Não instale Playwright para a configuração principal. Explique por que é necessário e pergunte antes de adicionar @playwright/test ou um binário de navegador para uma rota opcional de navegador com cabeçalho ou CI.

Modelo e orçamento de raciocínio

A seleção do modelo pertence ao agente anfitrião; o ShowKit nunca chama um LLM. Não fixe um nome de modelo específico de provedor nem use o maior modelo e a configuração de raciocínio mais alta para cada etapa. Honre uma solicitação de modelo explícita e a política de segurança do anfitrião. Se o anfitrião não puder escolher modelos por tarefa, use seu padrão sem bloquear o fluxo de trabalho.

• Use um modelo rápido ou leve com raciocínio baixo a médio para trabalho mecânico e reversível: localizar arquivos, verificar versões instaladas, executar comandos CLI exatos, formatar dados conhecidos e reexecutar verificações determinísticas.
• Use um modelo equilibrado com raciocínio médio para o fluxo de trabalho normal do ShowKit: roteamento de fonte com evidências claras, texto de demonstração baseado em evidências, alterações de rotina de código ou tema e revisão de visualização contra um orçamento de aceitação estabelecido.
• Escale para o modelo mais capaz disponível com alto raciocínio apenas para decisões de segurança ou privacidade, evidências ambíguas ou conflitantes, alterações de arquitetura, falhas de fidelidade inexplicadas ou recuperação após um modelo menor ter falhado. Use raciocínio extra alto apenas quando essa complexidade permanecer material.
• Retorne a um nível mais rápido assim que a decisão incerta for resolvida. Nunca abaixe o modelo ou orçamento de raciocínio para contornar uma condição de parada, prompt de consentimento, verificação de segurança ou confirmação humana necessária.

Roteie a fonte

• Leia agents/browser-capabilities.md primeiro e roteie por capacidade verificada, não apenas pelo nome do aplicativo.
• Trate "ShowKit este site", "use a página aberta no Chrome" e solicitações curtas equivalentes como autorização para inspecionar capacidades já concedidas, selecionar uma nova pasta de saída, instalar o ShowKit CLI compatível lá e construir uma visualização local. Elas não são autorização para publicar, expor conteúdo privado, realizar uma ação de mudança de estado ou instalar o Playwright opcional.
• Quando a pessoa der uma URL HTTP ou HTTPS e ChatGPT ou Codex tiver Navegador ou Chrome, leia agents/codex-browser.md e references/url-intake.md, então use o fluxo de navegador OpenAI verificado em workflow.md.
• Quando um código-fonte ou build estático estiver disponível, use o fluxo de fonte estática.
• A extração integrada do Chrome do Claude está indisponível sempre que a capacidade instalada for executada no contexto da página e não fornecer um mundo de página isolado validado pelo anfitrião. Leia agents/claude-browser.md, preserve o diagnóstico UnsupportedSurface e execute imediatamente sua ordem de recuperação automática inst...