Programação e agentes

Como instalar e usar sua primeira skill

Instale a Web Design Guidelines e peça ao agente uma revisão de uma página que você já tem.

Guia baseado na documentação. O fluxo completo não foi testado pela equipe.

Antes de começar

  • Agente compatível com Agent Skills
  • Node.js e npm para usar o comando do exemplo
  • Um projeto de teste ou cópia do seu projeto
01

Escolha uma tarefa pequena

Escolha uma tarefa cujo resultado você consiga conferir: revisar um formulário, organizar um documento ou melhorar um componente. Neste exemplo, vamos usar uma página web que já existe.

Uma skill reúne instruções e recursos para o agente. As ferramentas necessárias para executar a tarefa podem precisar de instalação separada.

02

Confira quem mantém o pacote

Abra a fonte da Web Design Guidelines, confira o autor e leia o arquivo SKILL.md. Veja se o pacote tem scripts, dependências ou acesso a serviços externos. Confirme a compatibilidade na documentação do seu agente.

Guarde a URL e a data da consulta para encontrar a referência depois.

03

Adicione somente a skill escolhida

Abra a pasta do projeto de teste no terminal. Se o seu cliente aceitar o CLI Skills, execute o comando abaixo e selecione o agente nas opções do instalador. Caso ele use outra forma de instalação, siga a documentação do aplicativo.

Comando / exemplo
npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines
04

Peça uma revisão da página

Abra uma conversa no projeto e indique a página que quer revisar. Comece pelo diagnóstico para escolher quais alterações fazer.

Você pode pedir: use Web Design Guidelines para revisar o formulário de contato. Aponte problemas de rótulos, teclado e mensagens de erro. Indique o arquivo de cada problema e explique como reproduzi-lo. Não altere arquivos nesta etapa.

05

Confira o resultado e registre o que funcionou

Abra a página no navegador e tente reproduzir os problemas apontados. Escolha uma correção pequena, peça a alteração e confira o resultado. Anote o agente, a versão do pacote e o que funcionou.

Se o agente não encontrar a skill, confira onde ela foi instalada e reinicie a sessão conforme a documentação do cliente. Confira esses pontos antes de instalar outros pacotes.

O que você terá ao final

Uma skill instalada no seu agente e uma primeira revisão para conferir no navegador.

Vale conferir

  • A compatibilidade varia entre clientes e versões.
  • O comando instala código/instruções de terceiros; leia a fonte antes de executá-lo.
  • Conteúdo conferido na documentação. Este fluxo não foi testado pela Agentspedia.

Documentação usada neste guia

O que são Agent SkillsWeb Interface Guidelines da VercelFonte da Web Design Guidelines

Recursos usados neste guia

Skill

Orientações da Vercel sobre busca de dados, renderização e tamanho do código enviado ao navegador em React e Next.js.

TécnicoAgentes compatíveis com Agent Skills
Skill

Skill da Anthropic para criar, revisar e avaliar instruções reutilizáveis para agentes.

TécnicoClaude
Skill

Checklist da Vercel para conferir acessibilidade, formulários, navegação, tipografia e interações.

Já uso IAAgentes compatíveis com Agent Skills
KIT GRATUITO DE MARKETING

Fábrica de Views.

Prompts, 9 estilos e anúncios de exemplo para criar conteúdo com IA. Cadastre seu e-mail e baixe o kit completo na hora.

Se informar, poderemos entrar em contato sobre o kit. O telefone não é necessário para baixar.

Seus dados serão usados conforme a Política de Privacidade.

AGENTSPEDIA

Encontre seu próximo passo.

Busca no catálogo

Conte o que quer fazer. Eu encontro ferramentas e tutoriais da Agentspedia para você começar.

Carregando o catálogo…

A pergunta é enviada ao servidor da Agentspedia para buscar no catálogo. Com IA ativa, também é processada na nossa VPS Hostinger. Não envie dados pessoais. Privacidade