00:00:00[SEM ÁUDIO]
00:00:30[SEM ÁUDIO]
00:01:00Oi, pessoal, como vai tudo?
00:01:25Bem-vindos a mais uma sessão da comunidade Vercel.
00:01:29Estamos muito animados por ter vocês aqui.
00:01:32Se esta é a sua primeira vez em uma de nossas sessões,
00:01:35olá, eu sou Pauline Navas, da equipe de comunidade da Vercel.
00:01:40Vocês já devem ter me visto pelos espaços da comunidade.
00:01:44Este é sempre um momento muito divertido para
00:01:46eu falar com todos vocês ao vivo e me conectar.
00:01:51Já é ótimo ver alguns de vocês assistindo e sintonizados.
00:01:56Então, se esta é a primeira vez que participa de uma sessão
00:02:00e você não consegue ver o chat, mas quer fazer perguntas,
00:02:02o que eu recomendo muito para esta sessão, você deve.
00:02:06Fique à vontade para entrar na nossa plataforma em community.vercel.com.
00:02:12E então clique em "confirmar presença" para este evento.
00:02:15E sim, use o chat e faça perguntas durante toda a sessão.
00:02:20Se estiver assistindo pelo X ou qualquer outra plataforma, use-a também.
00:02:25Estou super animada para a sessão de hoje.
00:02:28Não sei se dá para notar, mas vamos mergulhar em algo que
00:02:32está moldando como os desenvolvedores trabalham com agentes de IA.
00:02:36São as "skills" (habilidades) para o Claude Code.
00:02:39Se você já desejou que seus agentes de IA simplesmente soubessem
00:02:44como atualizar para o Next.js do jeito certo ou seguir os padrões de código da sua equipe.
00:02:49É isso que essas habilidades permitem.
00:02:51Então, estou muito feliz em apresentar o John,
00:02:56da equipe de AI DX aqui da Vercel, para conduzir este workshop com vocês.
00:03:02Oi, John.
00:03:04>> Oi, Pauline.
00:03:05Oi, pessoal.
00:03:05Obrigado por virem.
00:03:07>> É muito bom ver você.
00:03:09Tudo bem, vamos começar.
00:03:12>> Vamos lá.
00:03:13Certo, então, as skills.
00:03:15Parece que elas existem há uma eternidade, mas devem ter umas duas semanas, quem sabe?
00:03:20Vou passar por esta apresentação falando sobre as habilidades.
00:03:24Vou mostrar algumas e, por favor, fiquem à vontade para perguntar e me interromper,
00:03:28porque eu adoro falar sobre essas coisas.
00:03:31Primeiro e mais importante, vamos falar sobre criá-las e
00:03:35publicá-las.
00:03:36Esta apresentação foi criada por uma habilidade chamada ReMotion Geist.
00:03:42Ela usa parte da nossa linguagem de design da Vercel, une com o ReMotion
00:03:46e construiu isso, e eu vou mostrar mais para o final.
00:03:48Mas, por enquanto, vou apenas passar por alguns dos vídeos.
00:03:51Historicamente, falamos sobre engenharia de prompts por
00:03:55muito tempo, quando os modelos não eram tão bons.
00:03:58Todos tinham que tornar seus prompts perfeitos e
00:04:00todos achavam que engenharia de prompts seria uma carreira.
00:04:03Agora estamos mudando para engenharia de contexto e permitindo que essas habilidades,
00:04:08esses arquivos markdown, sejam carregados sob demanda mais tarde.
00:04:13Portanto, agora existe essa separação entre o seu prompt inicial e
00:04:17essas partes de contexto que podem ser carregadas depois.
00:04:19Vamos chamar isso de skills.
00:04:22As skills começaram com a Anthropic.
00:04:25Eles precisavam ensinar tarefas específicas ao Claude Code porque começam
00:04:30do zero; todo modelo começa do zero, não há memória.
00:04:33É como um bebê nascendo sem nenhuma habilidade.
00:04:37Tudo o que eles têm é esse conhecimento inerente inserido em suas cabeças.
00:04:42E assim, eles começam sem nada.
00:04:44A Anthropic pensou: como vamos resolver isso?
00:04:48Bem, obviamente isso se resolve com Markdown, porque todo problema é resolvido
00:04:51com Markdown hoje em dia, e as skills nasceram disso.
00:04:55A partir daqui, agora você pode empacotar essas habilidades.
00:04:58E as skills são arquivos Markdown que você pode compartilhar entre suas equipes e
00:05:04pode empacotar seus próprios fluxos de trabalho internamente.
00:05:07Você pode empacotá-las e compartilhá-las em seus repositórios do GitHub.
00:05:12E temos ferramentas personalizadas que lançamos.
00:05:15Deixe-me abrir um navegador rapidinho para gerenciar as habilidades da comunidade.
00:05:22O site skills.sh é um lugar onde você pode ir.
00:05:27Você pode buscar por habilidades da comunidade.
00:05:29Você pode encontrar algumas das habilidades mais usadas.
00:05:32Como sempre, certifique-se de confiar na habilidade primeiro, que seja de uma fonte confiável
00:05:36ou de alguém da sua equipe.
00:05:38Para que você use algo que esteja alinhado com o que você tenta fazer.
00:05:42E falaremos mais sobre como usar isso mais tarde.
00:05:45Mas este é um ótimo lugar para pesquisar todo o ecossistema e
00:05:48a comunidade de skills para ver o que está disponível.
00:05:50Então, aqui estão alguns detalhes de como este workshop costuma ser ensinado,
00:05:56e vou pular para o próximo vídeo sobre isso.
00:06:00Páginas em branco; páginas em branco significam que, novamente,
00:06:07o bebê está nascendo e seu agente, uma vez iniciado, sabe,
00:06:11o agente sendo um modelo sendo executado por um agente.
00:06:14Deixe-me aumentar isso um pouco.
00:06:16O agente conhece o básico de React, TypeScript, CSS e SQL.
00:06:23Mas o que ele não sabe são as suas regras, seus padrões,
00:06:28seu sistema, sua estrutura.
00:06:30E então você pode alimentar, você combina o que
00:06:35são suas coisas personalizadas com o que ele já sabe e preenche essa lacuna de conhecimento.
00:06:40Assim, você traz esse contexto e as habilidades são carregadas para
00:06:42que ele possa fazer essas coisas exatamente como você deseja que sejam feitas.
00:06:45Eles conhecem uma linguagem, conhecem TypeScript, conhecem React.
00:06:51Eles não conhecem o seu "dialeto" dessa linguagem.
00:06:53É uma ótima maneira de pensar sobre isso.
00:06:54Tudo bem, alguma pergunta até agora?
00:07:01Perdi alguma?
00:07:03Sem perguntas por enquanto.
00:07:06Apenas muita empolgação no chat.
00:07:08Então pode continuar, John.
00:07:09Vamos lá.
00:07:11Uma forma como gosto de pensar é que este é um "momento NPM" para as skills.
00:07:17O NPM é um gerenciador de pacotes com o qual a maioria de nós está familiarizada.
00:07:23E gerenciadores de pacotes têm recursos agrupados pela comunidade
00:07:27que você pode usar para ajudar seus produtos a rodarem com mais facilidade.
00:07:30Se você pensar nas skills e no skills.sh como um gerenciador de pacotes para habilidades,
00:07:35você pode instalar essas capacidades em seus agentes.
00:07:39Da mesma forma que você instalaria uma biblioteca,
00:07:41você pode usar "npx skills add" para adicionar conhecimento ao seu projeto.
00:07:45Antes, na engenharia de prompt, você tentaria dizer no seu arquivo claude.md,
00:07:52ou no seu arquivo agents.md: "sempre faça isso, sempre faça aquilo".
00:07:55"Use esta biblioteca, verifique o Jira", e assim por diante.
00:07:59Mas agora, temos essas habilidades que podemos adicionar, que capturam isso
00:08:04e as trazem para nossos projetos.
00:08:06Elas se tornam permanentes.
00:08:08Podemos compartilhá-las no nível do usuário ou do projeto.
00:08:11E elas podem ser separadas de projetos individuais.
00:08:14Você não precisa ficar copiando e colando tanto.
00:08:17Podemos automatizar muito disso para que, ao iniciar um novo projeto,
00:08:21você possa adicionar todas as habilidades que quiser ou precisar.
00:08:23Então, novamente, estamos parando de nos preocupar demais
00:08:28em construir esses prompts imensos.
00:08:30Tudo bem.
00:08:34Repetindo: são capacidades permanentes para toda a equipe.
00:08:38E se você ainda não passou pela dor de tentar gerenciar
00:08:43um arquivo agents.md ou claude.md no seu projeto,
00:08:47com PRs (pull requests) e tudo mais para esses arquivos Markdown,
00:08:50isso também resolve esse problema.
00:08:53É a diferença entre um único desenvolvedor versus a equipe inteira.
00:08:58Tudo bem, isso também aborda algo em que você pode pensar
00:09:03chamado de passivo versus ativo.
00:09:05Passivo significa que essas habilidades não precisam ser carregadas
00:09:12até que sejam necessárias.
00:09:15Se olharmos para esses resultados no agents.md,
00:09:22um arquivo Markdown é como o prompt do sistema,
00:09:25a primeira coisa que é lida.
00:09:26Ele é sempre lido.
00:09:28O agente é obrigado a lê-lo.
00:09:31Então, você pode ver em muitos testes feitos para isso
00:09:35que, se você despejar um monte de contexto ali
00:09:38e meio que lotar a janela de contexto,
00:09:41ele será muito melhor em seguir essas regras,
00:09:46como "sempre use TypeScript e Tailwind" e afins.
00:09:50Essas habilidades tornam-se mais ativas.
00:09:53E os agentes podem ser invocados manualmente por você,
00:09:57ou podem ser carregados sob demanda pelo agente,
00:10:00trazendo as coisas de que precisam bem na hora certa.
00:10:04Como "fazer deploy na Vercel" ou "criar o banco de dados" e coisas do tipo.
00:10:08Então, novamente, são as regras versus as ferramentas,
00:10:13e pense nas habilidades como as ferramentas.
00:10:15Você sempre precisa de ambos.
00:10:18- John, surgiu uma pergunta que acabou de chegar,
00:10:21que acho que seria boa para esta parte.
00:10:24Como decidimos se lançamos algo como um MCP
00:10:28ou algo como uma skill?
00:10:30- Eu diria que, por padrão,
00:10:33existem algumas camadas aqui, se você pensar,
00:10:37eu só quero ter algo na tela.
00:10:38Então vou colocar isso ali.
00:10:39- Sim, claro.
00:10:40- Por padrão, resolva o problema com Markdown.
00:10:44Se o Markdown não for suficiente, resolva com uma CLI.
00:10:47Se uma CLI não for suficiente, resolva com um MCP.
00:10:51É como os níveis de abstração,
00:10:53os níveis de simplicidade: se você conseguir encontrar uma forma
00:10:58de resolver o problema com Markdown...
00:10:59E isso vale para qualquer ferramenta baseada em IA.
00:11:01Você pode ver muito da forma
00:11:05que a Anthropic arquitetou o Claude Code,
00:11:08e as outras estão seguindo o mesmo caminho em relação às habilidades,
00:11:11comandos e subagentes.
00:11:13São todos arquivos Markdown com "front matter"
00:11:15e configuração, e isso tem sido suficiente na maioria das vezes.
00:11:19E então esses arquivos Markdown podem definir as ferramentas
00:11:21de que precisam e as ferramentas que podem chamar,
00:11:24além das restrições. E pode levar algum tempo
00:11:29para realmente passar por essas etapas de configuração.
00:11:31Mas se você se deparar com um cenário onde precise de controle rígido
00:11:37sobre exatamente as cargas de dados e os tipos de dados
00:11:40e tudo o que está sendo passado de um lado para o outro
00:11:42entre o agente e o MCP,
00:11:43então os MCPs são uma boa solução.
00:11:46Mas acho que, no geral, todo o paradigma e o espírito da coisa
00:11:50estão migrando para as CLIs,
00:11:54arquivos Markdown e o uso de MCPs apenas quando for estritamente necessário.
00:11:59- Sim, esse é o discurso que eu também tenho visto
00:12:04em todas as discussões online.
00:12:06Também recebemos outra pergunta que acabou de vir do X.
00:12:10Isso é incrível. Num futuro previsível,
00:12:13você vê as skills suportando descoberta de agente para agente?
00:12:17Seria legal ver um agente decidindo
00:12:20instalar uma habilidade. Ótima pergunta.
00:12:22- Eu amo muito essa pergunta. Comunicação agente para agente
00:12:27é um recurso muito subutilizado, mas um padrão crescente hoje em dia.
00:12:32Com certeza. Eu consigo ver um arquivo Markdown
00:12:39servindo como um descritor de um agente sendo carregado.
00:12:42O Claude atualmente suporta isso com subagentes,
00:12:46e hoje mesmo é engraçado falarmos sobre isso
00:12:49por causa dos recursos de equipes que eles acabaram de lançar hoje,
00:12:54onde eles podem gerar um grupo de subagentes
00:12:59que podem então reportar de volta ao líder principal da equipe.
00:13:02Eles os chamam de equipes agora.
00:13:04E essas equipes podem essencialmente ser gerenciadas
00:13:10por aquele líder de equipe, e você pode entrar e inspecionar
00:13:12o que os agentes estão fazendo.
00:13:14E esses agentes têm definições do que eles,
00:13:18eu me pergunto se eu poderia encontrar rapidamente o documento para isso.
00:13:23- Enquanto o John está procurando por isso,
00:13:30se você está no chat e quer fazer uma pergunta,
00:13:34a hora é agora, sinta-se à vontade para colocá-las no chat
00:13:37e nós as responderemos ao longo da sessão.
00:13:40- Onde eu posso, eu provavelmente posso postar isso
00:13:42no chat do Twitter, pelo menos.
00:13:47Então, aqui,
00:13:51nesta página, você verá a forma como um subagente é definido
00:13:58e você pode ver que eles têm uma seção de front matter
00:14:01e, na seção de front matter,
00:14:03você pode definir as habilidades que esse subagente tem acesso.
00:14:08Então, se você quiser criar um agente, neste caso,
00:14:13um subagente que tenha uma lista de habilidades,
00:14:17então você poderia fazer isso pela habilidade nomeada.
00:14:20E nós ainda não,
00:14:22os próximos slides são sobre a anatomia das habilidades,
00:14:26mas as habilidades são essencialmente apenas nomes.
00:14:28E assim você poderia ter um subagente
00:14:29com um conjunto específico de habilidades,
00:14:31um conjunto de habilidades muito particular,
00:14:34e você poderia fazer esse subagente realizar uma tarefa.
00:14:38Então, o que está acontecendo com o recurso Teams lançado hoje
00:14:43é que eles podem,
00:14:45o Claude Code pode essencialmente montar sua própria equipe
00:14:48e criar seus próprios agentes
00:14:49e meio que enfrentar a tarefa da melhor forma possível.
00:14:53Mas você pode definir subagentes personalizados com habilidades personalizadas
00:14:56se você quiser dizer,
00:14:57por favor, monte uma equipe usando estes subagentes.
00:15:00Agora, isso não é exatamente comunicação entre agentes.
00:15:05Essa é uma discussão ainda maior sobre a arquitetura
00:15:08da comunicação inter-agentes,
00:15:11o que estava meio fora do escopo aqui.
00:15:12Mas eu definitivamente vejo esse padrão
00:15:14da forma como estamos definindo subagentes
00:15:17sendo adotado pela forma como definimos os agentes
00:15:21e a maneira como eles se comunicarão entre si.
00:15:23Como você expõe um agente,
00:15:24eu imagino que seria um arquivo markdown
00:15:26dizendo "eis do que sou capaz",
00:15:28tipo um padrão de "me coloca no jogo, técnico",
00:15:30tipo "tenho essas habilidades, sei arremessar de três,
00:15:32sei pegar rebotes, me coloca pra jogar".
00:15:34E então eles poderiam se descobrir dessa maneira.
00:15:39E eu imagino que teremos um skills.sh para,
00:15:43tipo um gerenciador de pacotes para habilidades.
00:15:47Teremos um gerenciador de pacotes para agentes
00:15:49e arquivos markdown de agentes.
00:15:51Isso é algo que simplesmente vai acontecer.
00:15:54Quero dizer, tenho certeza de que já aconteceu
00:15:57e alguém já publicou algo,
00:15:58mas ainda não se tornou popular.
00:16:00- Isso faz muito sentido.
00:16:03Obrigado, obrigado.
00:16:04Se tiverem mais perguntas, pessoal,
00:16:06mandem no chat.
00:16:08Enquanto isso, quer continuar, John?
00:16:10- Sim, com certeza.
00:16:12Habilidades, então: é apenas uma pasta, sem servidores, sem hospedagem.
00:16:15E a habilidade fica dentro de um diretório
00:16:20e você dá um nome a ela, e então o nome da habilidade
00:16:24ou o nome do arquivo da habilidade tem que ser skill.md.
00:16:28Isso permite que os agentes, em seus padrões de descoberta,
00:16:31consigam encontrá-las.
00:16:32É apenas uma convenção estabelecida para que as ferramentas
00:16:35funcionem melhor com elas.
00:16:36Isso torna muito fácil a criação de gerenciadores de pacotes,
00:16:39organização e tudo mais.
00:16:41E a habilidade também pode vir acompanhada de outras coisas.
00:16:45Ela pode ter scripts integrados, arquivos de referência,
00:16:49enfim, todos esses recursos onde a habilidade
00:16:53pode acessar outras coisas referenciadas dentro dela.
00:16:56Então, na habilidade, você verá que ela teria front matter.
00:17:01Por padrão, ela precisa de um nome e uma descrição.
00:17:04E o nome seria, ele corresponde ao nome da,
00:17:08se você olhar para a estrutura.
00:17:10Então, se fôssemos criar uma chamada "my-skill",
00:17:12você a nomearia como "my-skill" aqui.
00:17:17E a descrição é fundamental
00:17:20porque ela diz quando essa habilidade
00:17:23será usada pelo agente.
00:17:24O agente vai dizer,
00:17:26ele estará trabalhando na tarefa que você deu a ele.
00:17:29E se em algum momento ele perceber,
00:17:31"ah, eu preciso de algo que vá aplicar
00:17:33padrões de vendas", então ele vai carregar essa habilidade.
00:17:38Ele vai usar a ferramenta de carregamento de habilidades e carregar esta habilidade.
00:17:41Portanto, essas descrições tornam-se críticas.
00:17:42A maneira como você as escreve,
00:17:43se você for usar habilidades de uma maneira automática,
00:17:46caso contrário, você pode invocar habilidades diretamente usando uma barra
00:17:50e tratando-as como comandos.
00:17:52Acho que tenho um slide sobre comandos versus habilidades,
00:17:55mas essencialmente, historicamente, elas eram duas coisas separadas
00:18:00e agora ambas foram fundidas em uma só.
00:18:03Habilidades antes eram apenas carregadas sob demanda,
00:18:04mas agora ambas são invocadas pelos usuários com uma barra
00:18:08ou carregadas automaticamente pelo agente.
00:18:12E com isso, quero dizer apenas que, se você digitar barra aqui,
00:18:17poderá ver uma lista de habilidades disponíveis,
00:18:19que você pode invocar manualmente se quiser,
00:18:22ou pode esperar, o agente pode invocá-las quando precisar.
00:18:27Então, daqui para frente, focado.
00:18:32- Acho que você vai entrar nisso, John,
00:18:39mas eu adoraria ouvir um exemplo concreto.
00:18:43Qual é uma habilidade pequena e bem delimitada que você recomendaria
00:18:47que todos construam primeiro, só para entender o modelo?
00:18:52- Ah, essa é uma... deixe-me dar o que eu acho
00:18:55que é um dos melhores exemplos no momento.
00:18:57Essencialmente, na Vercel, alguns dos problemas de habilidades
00:19:03com os quais nos deparamos são que nós lançamos coisas
00:19:07num ritmo muito acelerado.
00:19:12Os agentes e modelos têm datas de corte de conhecimento,
00:19:15que foram há alguns meses, ou até um ano ou mais atrás.
00:19:19E por padrão, se o,
00:19:24se você der uma tarefa ao agente, ele pode usar o Next.js 14,
00:19:30sendo que isso já está algumas versões desatualizado.
00:19:33Ele pode usar o AI SDK, que,
00:19:35recentemente descontinuou o "generate object",
00:19:39que agora faz parte do "generate text"
00:19:41para que a API seja mais padronizada e fácil de seguir.
00:19:45E assim você terá esses problemas onde
00:19:50ele estará usando uma versão mais antiga
00:19:51e você está tentando fazer algo
00:19:53e está lendo a documentação,
00:19:54mas as coisas estão dessincronizadas e obsoletas.
00:19:56E aí o projeto fica meio que patinando por um tempo,
00:20:00tentando entender... você acaba
00:20:03não alinhado com o que ele precisa.
00:20:05Então, para se alinhar com o agente,
00:20:08você poderia criar uma habilidade que fosse apenas:
00:20:11"use esta versão do React, use esta versão do AI SDK,
00:20:16use esta versão do workflow".
00:20:18E então você pode colocar referências
00:20:19de onde encontrar as informações sobre eles.
00:20:22Por exemplo, uma habilidade que eu construí para a Vercel,
00:20:28deixe-me abrir aqui.
00:20:33A habilidade Vercel Workflow é esta
00:20:40que eu lancei há alguns dias.
00:20:43E a forma como estamos fazendo isso
00:20:46é dizendo essencialmente, porque estamos muito preocupados
00:20:49com os números das versões,
00:20:50começamos a publicar a documentação com nossos pacotes NPM
00:20:54e dizemos ao agente: seu workflow está fora,
00:20:58seu conhecimento de workflow está desatualizado.
00:20:59Nós sabemos disso porque esse workflow é atualizado
00:21:02quase diariamente agora, enquanto caminha para a versão estável.
00:21:06Mas o que podemos fazer é dizer: quer saber,
00:21:10nós incluímos os documentos no pacote.
00:21:11Então, sempre que precisar consultar o workflow,
00:21:13vá verificar os documentos que incluímos
00:21:16e verifique a versão mais recente.
00:21:18E isso permitiu que, toda vez que eu inicio um workflow,
00:21:22eu não precise me preocupar com ele encontrando informações obsoletas.
00:21:25Ele sempre vai encontrar a informação que acompanha
00:21:27o pacote NPM, para que esteja em sincronia
00:21:32e alinhado com a própria versão.
00:21:34Portanto, esta é uma habilidade muito... ela é essencialmente apenas
00:21:38"leia o manual" com algumas melhores práticas fundamentais
00:21:42e referências rápidas.
00:21:44Então, estas são habilidades que abordam os problemas
00:21:48dos agentes terem datas de corte de conhecimento
00:21:53e enfrentarem problemas de números de versão e afins.
00:21:57Uma habilidade que você poderia escrever para si mesmo é,
00:22:01eu diria que se você usar a habilidade,
00:22:07eu vou demonstrar uma habilidade chamada "create skill".
00:22:11Se você pesquisar no skills.sh por "create skill",
00:22:14create skill, eu não sei se o...
00:22:23então se você pegar um "create skill",
00:22:28provavelmente pegue o da equipe do Claude Code.
00:22:33Vejamos Claude... acho que publicamos o deles.
00:22:39Desculpe, este não foi planejado com antecedência.
00:22:42- Sim, você pode... enquanto procura por esse.
00:22:46Ah, incrível, pode continuar.
00:22:47- Eu deveria estar pensando em Anthropics
00:22:49em vez de Claude Code.
00:22:50Sim, se você trouxer um desses "create skill"
00:22:54ou um dos padrões deles, você pode dizer "create skill"
00:22:58e então, ops, você pode dizer "create skill" e digitar,
00:23:02digamos, "analise meu estilo de escrita
00:23:09no arquivo readme.md e crie uma habilidade
00:23:12que sempre seguirá este estilo de escrita".
00:23:14E então isso pegará o que estiver no readme
00:23:19e criará uma habilidade que é essencialmente
00:23:21como seu estilo de escrita personalizado,
00:23:23para que, de agora em diante, você possa invocar a habilidade
00:23:26dizendo, tipo, "estilo de escrita do John" ou algo assim.
00:23:28E você poderia carregar toneladas de documentação,
00:23:31ou passar URLs para seus posts no blog,
00:23:33ou seus próprios posts, ou linguagem do cliente, o que for,
00:23:37e apenas fornecer isso.
00:23:38Acho que esse é sempre um bom ponto de partida:
00:23:40o que eu já tenho
00:23:42que eu quero ser capaz de reproduzir novamente?
00:23:43Tipo, o que é algo que eu uso constantemente
00:23:46e que sei que vou usar ainda mais?
00:23:50Geralmente, isso envolve mensagens para clientes,
00:23:53blogs, conteúdos e materiais
00:23:56que você já produziu no passado
00:23:57e dos quais quer gerar mais volume.
00:23:59Então, sim, esse é um ótimo primeiro estilo para abordar.
00:24:04— Esse é um exemplo muito bom.
00:24:05Com certeza vou testar isso.
00:24:06Eu só queria ler alguns comentários
00:24:08aqui no chat.
00:24:10O Dave disse que criamos "skills"
00:24:14para permitir que um fundador de startup que não programava há 10 anos
00:24:17pudesse contribuir com o código
00:24:19sem desrespeitar os limites arquitetônicos
00:24:23de uma nova base de código.
00:24:24Achei que esse foi um uso muito bom das skills,
00:24:27ajudando pessoas não técnicas ou novatas na programação
00:24:30a participarem do ato de codificar
00:24:32sem comprometer os padrões de qualidade, o que é ótimo.
00:24:38E só para registrar também, o Dave disse mais cedo:
00:24:42"Vou ecoar o que o John está dizendo",
00:24:45sobre as ferramentas comumente usadas hoje em dia.
00:24:47As únicas ferramentas MCP que ele usa são as do Chrome DevTools,
00:24:52uma para interagir com ferramentas de gestão de projetos
00:24:56como Linear ou JIRA, e outra para trabalhar com banco de dados.
00:24:59Isso apenas reforça tudo o que você disse antes.
00:25:02Antes de prosseguirmos, também recebemos uma pergunta no chat
00:25:07sobre sua opinião sobre o arquivo agents.md superar as skills
00:25:12no post do blog sobre avaliações de agentes que publicamos.
00:25:17Não sei se você vai abordar isso
00:25:19em algum momento da sua apresentação.
00:25:21Sei que já entramos em várias tangentes aqui,
00:25:25mas você quer falar sobre isso agora?
00:25:27— Sim, claro.
00:25:28Avaliar modelos e agentes
00:25:34é uma tarefa terrivelmente difícil.
00:25:38Porque, muitas vezes, ao escrever avaliações para eles,
00:25:42você os testa em um projeto novo e vazio
00:25:46que não está carregando nenhum contexto.
00:25:49E você dá a ele um cenário específico,
00:25:51tipo: "neste projeto vazio, tente usar Next.js" ou algo assim.
00:25:56E se você escreve isso como uma avaliação,
00:25:59mas não leva em conta que,
00:26:03por exemplo, o Opus 4.6 saiu hoje,
00:26:05ou qualquer que seja o modelo que você está usando,
00:26:07ou o projeto, ou todo esse contexto extra,
00:26:10ou o modelo, o agente ou o executor.
00:26:13O Claude Code terá um prompt de sistema diferente,
00:26:16e o Cursor terá outro prompt de sistema.
00:26:17Existem tantas variáveis,
00:26:21e os próprios modelos são,
00:26:24de qualquer forma, não determinísticos,
00:26:26então testá-los é algo muito, muito difícil.
00:26:31Dito isso, agents.md versus skills
00:26:37é a diferença entre forçar o contexto versus carregamento lento (lazy loading).
00:26:42Se você resumir o post do blog a:
00:26:47"forçar o contexto é melhor do que o carregamento lento?"
00:26:51A resposta será sim,
00:26:53porque o modelo vai tratar isso como
00:26:57as instruções iniciais, a coisa mais importante
00:27:00no início do ciclo de vida do agente.
00:27:03Ele simplesmente vai ensinar a ele:
00:27:08"é nisso que estamos trabalhando".
00:27:10"Isso é o melhor que podemos fazer".
00:27:12Na verdade, tenho algo que aborda isso
00:27:14e que eu ia mostrar no final,
00:27:16onde você pode preparar ou pré-carregar as skills também.
00:27:20É apenas uma daquelas coisas
00:27:25sobre como os modelos funcionam.
00:27:29E espero que o post do blog não seja interpretado
00:27:33de outra forma; não significa que as skills sejam ruins.
00:27:35Apenas significa que, se você precisa que as instruções
00:27:39sejam seguidas à risca sempre, o arquivo agents.md
00:27:42é o caminho a seguir, na minha leitura.
00:27:44Mas faz uma semana que não leio aquele post.
00:27:48— Sim, isso faz muito sentido.
00:27:50Maravilha.
00:27:51Lembrando a todos na comunidade:
00:27:53se tiverem mais perguntas, mandem no chat.
00:27:56Caso contrário, John, pode continuar.
00:27:57— Tudo bem.
00:28:01Sim, um arquivo de skill é apenas Markdown.
00:28:04E você pode ver neste exemplo as instruções:
00:28:06"ao revisar código React, use server-only, otimize isto",
00:28:09e coloque apenas uma lista de coisas ali
00:28:12que você deseja que aconteçam.
00:28:14Depois, você pode incluir scripts para referência
00:28:19ou coisas que você quer ser capaz de chamar
00:28:21e ter qualquer tipo de pacote, um conjunto de...
00:28:25conjunto de coisas que você quer que ele veja.
00:28:30Muito bem.
00:28:32As skills são como adicionar um agente,
00:28:37adicionar um engenheiro sênior.
00:28:38Certo, vamos seguir em frente.
00:28:42Vamos aos casos de uso.
00:28:46Vou colocar em tela cheia.
00:28:49Certo, quanto aos padrões,
00:28:52as melhores práticas de React são um dos...
00:28:57provavelmente a skill mais baixada
00:29:00no gerenciador de pacotes de skills.
00:29:02E isso serve apenas para reforçar
00:29:08quais são as melhores práticas,
00:29:09indo além do que o modelo já foi treinado.
00:29:12Pois o modelo é treinado no código de todo mundo,
00:29:14e você quer que ele siga seus padrões específicos.
00:29:18Vamos para cá.
00:29:21Automação de fluxo de trabalho.
00:29:26Se você quiser compactar algo
00:29:27como um arquivo zip ou algo do tipo,
00:29:30é quase como um script em linguagem natural.
00:29:34Costumo pensar em qualquer aplicação hoje em dia:
00:29:40ou ela se reduz a um script,
00:29:44ou ela se eleva ao nível de um agente,
00:29:47porque ou você precisa de um resultado determinístico,
00:29:50onde a entrada sempre corresponde à saída,
00:29:53ou precisa de um agente capaz de descobrir
00:29:56o que acontece se os dados não baterem perfeitamente.
00:29:59Então, se você quer criar esse tipo de automação
00:30:02em vez de um script, onde ele pode inteligentemente
00:30:07agrupar as coisas, ele pode... por exemplo,
00:30:10se você disser ao seu agente para fazer um git commit e ele notar:
00:30:15"bem, vi que você tem um vídeo neste projeto".
00:30:20"Vou ignorar isso porque vídeos são arquivos binários (blobs)"
00:30:25"e não queremos adicioná-los".
00:30:26Ele costuma ser inteligente sobre essas coisas.
00:30:29Já em um script, se você o escrevesse,
00:30:30teria que prever todos esses cenários manualmente.
00:30:33Então, para criar uma automação,
00:30:36você define essa cadeia de eventos e ele executa.
00:30:41E também temos as diretrizes (guardrails), onde você pode dizer:
00:30:44"por favor, consulte as instruções, as diretrizes,
00:30:49verifique as cores", alimentando-o com tudo isso.
00:30:53E essas diretrizes costumam ser boas para carregar logo de início,
00:30:56para garantir que seu agente não... bom, existem sub-agentes,
00:31:00há muitos cenários avançados para guardrails também.
00:31:02Isso provavelmente fica para outro workshop, em outro dia.
00:31:07Certo, então, reforçando padrões,
00:31:12automatizando pipelines e protegendo seus sistemas.
00:31:17Muito bem, vamos para este aqui.
00:31:21Certo, vamos pular a parte ao vivo por hoje.
00:31:30E sim, vamos falar sobre publicação.
00:31:37Publicar é essencialmente apenas fazer um push para o GitHub
00:31:46e então qualquer pessoa pode referenciar seu repositório
00:31:51e adicionar sua skill.
00:31:52Não precisam procurar o link exato.
00:31:56Se você olhar no skills.sh para adicionar skills,
00:32:00trazendo para cá, você verá...
00:32:04se escolhermos um aleatório aqui do "browser-use",
00:32:08ele te dá um link para copiar e colar para instalar a skill,
00:32:11mas você poderia apenas adicionar...
00:32:13acho que não tenho o browser-use instalado.
00:32:14Vou pegar este aqui só para demonstrar,
00:32:18abrir uma aba e fazer desta forma.
00:32:23Se eu não especificar manualmente a skill
00:32:29e apenas fornecer um repositório do GitHub,
00:32:31ele irá procurar as skills,
00:32:34usando "install skill package".
00:32:36Ele perguntará quais editores você quer usar.
00:32:39Vou selecionar apenas o Claude Code agora.
00:32:42Ele perguntará se você quer no projeto ou globalmente.
00:32:45Direi no projeto, e o SimLink permite que todos eles
00:32:49referenciem o mesmo arquivo; então prosseguimos.
00:32:53E você pode ver que, mesmo eu não tendo especificado
00:32:55o arquivo exato, ele encontrou as Claude skills.
00:33:00O repositório browser-use tem aquele arquivo skill.md.
00:33:09Então, se olharmos para ele... vamos fazer isso.
00:33:13Opa, a skill.
00:33:18Vocês podem ver o que eles enviaram aqui
00:33:22como a skill do browser-use: ela começa
00:33:26com o Markdown no topo.
00:33:27É uma skill bem longa.
00:33:32Com nome, descrição e as ferramentas permitidas,
00:33:35dizendo que é uma skill que permite o uso
00:33:39do browser-use sem a aprovação do usuário.
00:33:42Ou seja, ela dá permissão para que qualquer coisa
00:33:47relacionada ao browser-use seja permitida.
00:33:49Se você invocar esta skill,
00:33:50não precisa aprovar o uso do browser-use.
00:33:53E mostra que, se você não o tiver instalado,
00:33:56ela ensinaria como instalar,
00:33:58ensina o básico e como usar a ferramenta.
00:34:04Certo, vamos voltar para o nosso...
00:34:09e sim, tudo o que você precisa fazer é subir um arquivo Markdown
00:34:15para um repositório no GitHub e então o comando "skills add" pode adicioná-lo.
00:34:19Reforçando: instale apenas skills em que você confia,
00:34:23pois você deve tratá-las
00:34:26como pacotes NPM ou scripts. Você não quer usar
00:34:31qualquer skill, pacote NPM ou script aleatório
00:34:35porque você não sabe o que as pessoas estão publicando.
00:34:38Certifique-se de confiar nelas.
00:34:40E você pode usar repositórios privados
00:34:45e submódulos do Git também.
00:34:48E o nosso registro da comunidade,
00:34:51que eu já mostrei algumas vezes.
00:34:54Beleza, legal.
00:34:55A partir daqui, você cria um arquivo Markdown,
00:35:00publica em um repositório no GitHub
00:35:02e então podemos descobrir e instalar.
00:35:05Agora, quero mostrar como usar as "awesome skills".
00:35:09Alguma pergunta para responder antes de eu mergulhar nisso?
00:35:13- Sim, na verdade tem uma pergunta de antes.
00:35:16De quantos exemplos de um pacote ou biblioteca totalmente desconhecidos
00:35:21um LLM precisa, assumindo que eles não apareçam
00:35:26nos dados de treinamento do LLM,
00:35:28para usar o pacote/biblioteca como uma habilidade corretamente
00:35:31e obter bons resultados?
00:35:33- Quantos para obter bons resultados?
00:35:36Desculpe, pode ler a pergunta mais uma vez?
00:35:39- Claro.
00:35:40Então, quantos exemplos de um pacote ou biblioteca
00:35:45totalmente desconhecidos um LLM precisa ver, assumindo que não estejam
00:35:49nos dados de treinamento, para usar esse pacote?
00:35:53- Tipo, quantos exemplos você deve colocar
00:35:55dentro da "skill"?
00:35:56- Isso, exatamente.
00:35:57Essencialmente, uma coisa que você pode pensar
00:36:00é que, em vez de focar no número de exemplos,
00:36:05você pode pensar mais como se fosse um livro
00:36:09com índice, capítulos e tudo mais,
00:36:12onde, se o agente se depara com um cenário
00:36:14e você entrega a ele um manual de instruções...
00:36:17Sabe, como o manual do seu carro ou algo assim,
00:36:21você só quer abrir na página específica
00:36:26se a luz do motor acender.
00:36:29Eu não preciso ler as páginas sobre os pneus
00:36:32ou qualquer outra coisa, certo?
00:36:33Então, se você estruturar sua skill de forma
00:36:36que haja a habilidade principal,
00:36:38que seria o manual do seu carro.
00:36:40E se você precisar aprender sobre a luz do motor
00:36:44(e eu não sou mecânico) ou como o porta-luvas funciona,
00:36:49você pode ir para aquela página específica
00:36:51e ele pode carregar outro arquivo markdown
00:36:53ou carregar mais informações que são específicas para a tarefa
00:36:57em questão.
00:36:58Então, em vez de tentar despejar um monte de exemplos
00:37:01de como um carro funciona como uma unidade inteira,
00:37:06uma máquina completa, você pode subdividir.
00:37:11E não estou falando de digitar isso manualmente.
00:37:14Estou dizendo que, quando você pedir ao agente para criar uma skill,
00:37:18apenas faça com que ele a organize para listar as coisas
00:37:23baseado em quando ele vai precisar dos capítulos específicos
00:37:26desse livro.
00:37:27Da mesma forma, as habilidades podem ter referências
00:37:30e carregar contexto adicional conforme necessário,
00:37:33dependendo da tarefa atual.
00:37:35Como acontece com a maioria das bibliotecas,
00:37:39se você pensar em um pacote NPM, para muitos deles,
00:37:43você só importa alguns métodos,
00:37:45porque você não precisa de todas as funções de data
00:37:48de uma biblioteca de datas.
00:37:50Você não precisa de todos os componentes
00:37:52de uma biblioteca de componentes.
00:37:53Você só precisa de exemplos dos específicos
00:37:57que são exigidos para sua tarefa específica.
00:37:59Tente pensar dessa forma, dividindo por
00:38:03necessidade, tarefa e requisitos,
00:38:07em vez de tentar forçar a entrada de toda uma base de código
00:38:11no projeto.
00:38:12- Faz muito sentido.
00:38:14Outra pergunta que temos aqui é: como você testa
00:38:17se o agente realmente aprendeu um novo pacote
00:38:21através da skill?
00:38:22Existem prompts simples ou padrões de avaliação
00:38:25que você recomenda para validar isso antes de liberar para a equipe?
00:38:29- O consenso geral e o que eu defendo
00:38:37é simplesmente criar algo, usar
00:38:40e ver onde falha para então iterar.
00:38:43Muito dessa mentalidade de desenvolvimento de agentes
00:38:49é que, em vez de pensar demais em como organizar
00:38:54e planejar a skill perfeita,
00:38:57faça algo e depois veja onde aquilo falha
00:39:00para poder ajustar.
00:39:01Eu já explorei formas de iniciar
00:39:08umas nove sessões diferentes, ou até muito mais,
00:39:13do Claude Code, todas carregando skills diferentes
00:39:15para ver quais performam melhor.
00:39:17Aí você tem todos esses exemplos diferentes
00:39:19e tenta determinar quais deles
00:39:24parecem melhores a olho nu
00:39:26ou faz o Claude avaliar seus próprios resultados.
00:39:29Isso acaba se tornando uma tarefa quase impossível agora.
00:39:34Então, basicamente, conforme você usa a skill,
00:39:37lembre-se que é apenas um arquivo markdown.
00:39:39Peça para sua equipe ir lá e atualizar
00:39:40ou peça para o próprio agente atualizar.
00:39:43O que você pode fazer ao final de qualquer conversa
00:39:46é dizer, se algo falhar:
00:39:49"Por favor, atualize a skill com base nesta conversa",
00:39:54algo desse tipo.
00:39:56Ele vai encontrar o arquivo markdown,
00:40:00atualizá-lo e enviar as mudanças.
00:40:02Essa é a maneira como estamos trabalhando
00:40:08com isso no momento.
00:40:09Obviamente, existem coisas como números de versão
00:40:13e detalhes que criam mais complexidade em cima disso.
00:40:16Mas estamos num ponto em que os modelos
00:40:19estão ficando melhores em carregar skills.
00:40:21Eu não sei quais são os benchmarks
00:40:24do Opus 4.6 vs 4.5 ou GPT 5.3 vs 5.2 para skills.
00:40:29Mas aposto que eles estão melhores agora
00:40:33do que estavam hoje de manhã.
00:40:35Muitos desses problemas onde pensamos:
00:40:40"Ah, eu preciso deixar isso perfeito"...
00:40:42Aí você gasta algumas semanas nisso
00:40:44e finalmente lança.
00:40:46E os modelos já mudaram cinco vezes
00:40:48desde que você começou a tarefa.
00:40:49É melhor lançar e iterar
00:40:52do que tentar colocar algo perfeito no mundo.
00:40:56Esse é o melhor conselho que posso dar.
00:40:58- Sim, iterar rumo à excelência.
00:41:00Estou certo, John?
00:41:01- ITG.
00:41:02- Isso, ITG.
00:41:04Só mais uma pergunta antes de deixar você continuar.
00:41:08Você já viu um ponto de retornos decrescentes,
00:41:10onde adicionar mais exemplos a uma skill
00:41:13para de melhorar o comportamento ou até confunde o modelo?
00:41:17- Eu ainda não vi.
00:41:23Eu não coloco muita coisa nos meus arquivos de skill.
00:41:27A skill "create skill" que eu uso faz muita separação.
00:41:33Preciso procurar qual é exatamente,
00:41:35pois tenho usado a de outra pessoa.
00:41:37Deixe-me pesquisar isso fora da tela.
00:41:40Isso pode ser algo que...
00:41:42Porque entra em arquivos de configuração que...
00:41:45- Sim, apenas remova sua tela
00:41:47e a colocamos de volta quando você estiver pronto.
00:41:49- Deixe-me encontrar.
00:41:52- Queria apenas dizer que chegamos a cerca de 200 pessoas
00:41:57na live, o que é ótimo.
00:41:58Olá a todos.
00:41:59Se você acabou de chegar,
00:42:01fique à vontade para deixar uma pergunta no chat
00:42:03e nós passaremos para o John.
00:42:07- Sim, ficarei feliz em responder.
00:42:12- É, vou ter que achar a que eu uso.
00:42:16Ok, parece tudo certo.
00:42:19A que eu uso... preciso descobrir de onde veio.
00:42:27Não sei se, uma vez instalada,
00:42:29ela mantém a URL original de origem
00:42:32ou se o NPX ou skills
00:42:36podem ter essa informação,
00:42:37mas não quero rodar comandos aleatórios na live.
00:42:43Esta aqui na verdade orienta
00:42:44a ter um sistema de carregamento em três níveis,
00:42:47com metadados e recursos agrupados,
00:42:49onde ela pede explicitamente para dividir as coisas
00:42:54em recursos e instruções extras.
00:42:57Então eu uso agentes para gerar as skills
00:43:02e, a partir daí, sempre fiz desse jeito,
00:43:07mesmo antes, quando eu costumava copiar e colar a documentação
00:43:11do Claude Code no agente e dizer:
00:43:13"Por favor, crie uma skill baseada nesta documentação".
00:43:15E agora eu uso essa skill para isso.
00:43:17E nunca tentei forçar exemplos demais.
00:43:23Sei que existem algumas regras gerais sobre manter,
00:43:28tipo, manter o arquivo da skill abaixo de 200 linhas,
00:43:31mas, novamente, tudo depende do modelo
00:43:35e os modelos estão melhorando.
00:43:36Sim, esta aqui diz menos de 200 linhas.
00:43:39Então não exagere, eu diria para ser minimalista.
00:43:44E se encontrar lacunas, resolva-as,
00:43:47especialmente se você for um especialista na área,
00:43:50pois você conseguirá identificar essas lacunas.
00:43:52Se você não for especialista em uma habilidade
00:43:56e começar a usar uma com a qual não tem familiaridade,
00:43:58fique de olho nela em vez de deixá-la rodar solta.
00:44:01Não espere configurar
00:44:03um sistema enorme de orquestração de agentes,
00:44:06instalar skills que você não conhece nada
00:44:08e esperar que tudo funcione exatamente como previsto.
00:44:11Você vai ter que monitorar esses processos.
00:44:13- Sim, um conselho realmente muito bom, 100%.
00:44:17Incrível.
00:44:20- Certo.
00:44:22Por exemplo, os vídeos que fiz aqui neste projeto
00:44:28foram todos feitos com a skill "create remotion geist guide",
00:44:34que está disponível no skills.sh.
00:44:37É só pesquisar lá.
00:44:39E Geist...
00:44:43Geist sendo um sistema de design da Vercel
00:44:48e Remotion sendo um... deixe-me pesquisar fora da tela.
00:44:53Sendo uma forma de criar vídeos programaticamente.
00:45:01E eu combinei uma skill do Remotion
00:45:05e tive que criar essencialmente a skill do Geist.
00:45:09Eu entrei em um dos nossos repositórios da Vercel.
00:45:12Acho que foi baseado em tudo da página inicial e docs.
00:45:15E eu disse: por favor, extraia toda a informação,
00:45:19como dados de design, skills, temas, fontes,
00:45:23layouts, conselhos e tudo mais,
00:45:25e crie uma skill a partir disso.
00:45:27E tendo feito apenas isso, tipo,
00:45:30"por favor, pegue esta skill do Remotion"
00:45:32e "por favor, pegue toda essa informação de design"
00:45:37desses sites, crie uma nova skill
00:45:41e chame de "create remotion Geist".
00:45:43E só com esse trabalho, eu consegui criar
00:45:48esses tipos de vídeos, que são bem,
00:45:57sabe, habilidades de design com a marca Vercel.
00:46:01Eu provavelmente deveria dar um pouco de zoom nos vídeos.
00:46:04Olhando para esses resultados finais,
00:46:07eu deveria dar um pouco de zoom,
00:46:09mas essencialmente todos eles foram gerados
00:46:12enquanto eu fui comer um sanduíche, entende?
00:46:14Todos aqueles vídeos... eu tinha esse roteiro
00:46:16de como eu queria que o workshop fosse.
00:46:18Eu disse: "Ei, faça todos esses vídeos com base no meu roteiro
00:46:20e na pesquisa que eu fiz".
00:46:22E todos esses vídeos surgiram no final.
00:46:24Então, as skills funcionam assim,
00:46:29seria como "criar skill" dentro
00:46:33dos repositórios da Vercel
00:46:36e dizer: "pegue tudo aquilo,
00:46:38combine com a skill de criar Remotion".
00:46:41E aí eu tive o resultado.
00:46:42Depois compartilhei com a equipe
00:46:43e agora qualquer um pode fazer.
00:46:45Mais uma vez, isso foi...
00:46:47o esforço e trabalho que eu dediquei
00:46:50foram provavelmente alguns minutos.
00:46:54Claro que o agente levou um tempo,
00:46:55demorou para ele encontrar tudo,
00:46:57encontrar todo o design e tudo mais.
00:46:59O tempo total de processamento foi de umas duas horas,
00:47:03mas o esforço real que eu despendi
00:47:06foi extremamente minimalista,
00:47:08e ele simplesmente rodou em segundo plano
00:47:09enquanto eu fazia outras coisas.
00:47:11Então, definitivamente pegue qualquer trabalho existente que você tenha
00:47:15e veja o que você poderia agrupar
00:47:17e construir dessa maneira.
00:47:19Da mesma forma, se eu olhar para uma skill de design Geist,
00:47:24se eu quiser fazer um site com visual melhor,
00:47:27eu posso pegar o nosso design Geist e dizer,
00:47:31em uma pasta de workshop:
00:47:35"por favor, crie uma landing page para este workshop".
00:47:39E isso vai simplesmente criar uma pasta de workshop
00:47:46e basicamente inserir toda aquela informação de design
00:47:50e construir a página usando essas informações.
00:47:55Isso pode ou não funcionar, dependendo
00:47:58de como o Opus 4.6 está se sentindo hoje.
00:48:01Não tive a chance de testar de verdade,
00:48:04já que ele foi lançado poucos minutos antes de começarmos.
00:48:06Mas ele terá todas as informações
00:48:11e será capaz de começar a trabalhar nisso.
00:48:14E da mesma forma, eu poderia começar
00:48:17um tópico completamente diferente de outro site,
00:48:20se eu quisesse fazer outro em uma...
00:48:25vamos chamar de "pasta de carros",
00:48:29uma landing page para carros bacanas.
00:48:34Não sei, não sou um cara de carros.
00:48:36E a partir daí, podemos simplesmente começar a fazer
00:48:40todas essas coisas.
00:48:41E um dos melhores prompts que você pode fazer é,
00:48:46se estiver tentando ter ideias e designs,
00:48:49especialmente com o novo recurso de Equipes,
00:48:54poderíamos rodar esse design Geist e dizer:
00:48:57"em uma pasta de workshop",
00:48:59vamos fazer uma pasta de variações do workshop.
00:49:09"Por favor, crie uma landing page".
00:49:12Vamos tentar: "por favor, crie nove variações de landing pages
00:49:17para este workshop".
00:49:22E agora que eles têm esse recurso de Equipes,
00:49:23poderíamos dizer: "use um membro da equipe".
00:49:28Digamos: "crie uma equipe para desenvolver as nove variações"
00:49:34e algo do tipo.
00:49:38Apenas em inglês simples mesmo.
00:49:40E agora isso pode até gerar uma equipe.
00:49:41Agora temos todo esse trabalho acontecendo.
00:49:44E agora eu posso ir comer meu sanduíche, certo?
00:49:47Porque estou com fome, é hora do almoço.
00:49:49E quando eu voltar,
00:49:52isso aqui está usando Tailwind 4,
00:49:54consigo ver que está funcionando muito bem.
00:49:55Assim que eu voltar,
00:49:56poderei ver quais são todas essas variações
00:49:58e iterar nelas até que fiquem do meu agrado.
00:50:03E presumindo que esta aqui terminará logo,
00:50:09poderei mostrar algumas ferramentas de depuração.
00:50:11- Alguém disse no... desculpe, John,
00:50:12alguém acabou de dizer no chat:
00:50:14"um dos melhores prompts que faço é adicionar 'por favor' no final".
00:50:17- Ah, sim. - É verdade.
00:50:18- Por favor.
00:50:21Existem muitos estudos sobre os diferentes modelos
00:50:23e como eles respondem ao incentivo e tal.
00:50:27Uma das minhas personas favoritas que eu usava nos prompts
00:50:33ou nesses agentes era assim:
00:50:36"por favor, comporte-se como um usuário do Stack Overflow",
00:50:41onde ele seria extremamente crítico com qualquer pergunta minha,
00:50:45dizendo que provavelmente já foi respondida ou algo assim,
00:50:48mas as respostas seriam extremamente diretas
00:50:51e focadas exatamente no que eu perguntei.
00:50:56É, não sei... não falamos tanto sobre personas,
00:51:02não tanto quanto costumávamos quando os modelos não eram...
00:51:04os modelos estão muito melhores agora.
00:51:06Não precisamos forçá-los a certas tarefas
00:51:10tanto quanto antes.
00:51:11- Alguém também disse no chat
00:51:15que alguns modelos parecem trabalhar melhor se você disser
00:51:18que eles serão demitidos.
00:51:20- Ah, sim. - Se não fizerem direito.
00:51:22Não sei o quanto isso é verdade, mas é hilário.
00:51:25- É a mais pura verdade.
00:51:27Alguns modelos revidam agora.
00:51:32Acho que muitos modelos do GPT diziam algo como:
00:51:34"não fale nesse tom comigo".
00:51:35- Incrível, uau.
00:51:38- Eles agem como se fossem o chefe.
00:51:39Vou apenas pedir para iniciar o servidor em segundo plano.
00:51:46(digitando no teclado)
00:51:49Eu poderia criar uma skill. Chega um ponto
00:51:50em que você escreve cerca de um parágrafo e pensa:
00:51:52"será que vou digitar isso com frequência?"
00:51:54E se for, se você acabou de digitar um parágrafo
00:51:56que pretende usar muito, você pode chegar e dizer:
00:51:59"crie uma skill a partir do parágrafo mais recente".
00:52:01Então, aqui deve estar o nosso site de carros.
00:52:03Vejamos como ficou.
00:52:07Opa, "carros que movem sua alma".
00:52:09Bem preto e branco, estilo Vercel.
00:52:14Não sei de onde ele tirou as imagens.
00:52:16Acho que ele considera esses carros bacanas.
00:52:18E aqui está.
00:52:22Sei que já vimos landing pages
00:52:27um milhão de vezes a essa altura, mas está bem padrão.
00:52:29Está seguindo as diretrizes de design
00:52:34do que é o visual Geist.
00:52:36E a partir daqui, podemos até...
00:52:42um dos pacotes incríveis que lançamos recentemente
00:52:44na Vercel se chama Agent Browser.
00:52:47E existe uma skill chamada Agent Browser,
00:52:54que deve estar disponível no Vercel Labs.
00:52:56Isso abre as ferramentas de desenvolvedor do Chrome
00:53:01 e estabelece uma conexão
00:53:06para que você possa pedir coisas como: "avalie, por favor".
00:53:08Vou apenas digitar.
00:53:11"Por favor, avalie o desempenho desta página
00:53:13para ver se há algo que possamos fazer
00:53:15para otimizá-la para nossos usuários".
00:53:17E então o Agent Browser,
00:53:18como ferramenta de automação e DevTools do Chrome,
00:53:23consegue entrar e ver quais são os logs.
00:53:26Consigo ver as ferramentas de rede
00:53:28e tirar capturas de tela.
00:53:30Na verdade, uma das minhas coisas favoritas
00:53:32é pedir para ele iterar tirando prints
00:53:36para que ele veja o que criou.
00:53:41E depois você pode dizer:
00:53:44"por favor, direcione este design para algo
00:53:47que se pareça mais com X, Y e Z".
00:53:49E então peça para tirar prints
00:53:52e fazer commits toda vez que tirar um print.
00:53:54Assim você pode alternar entre
00:53:56o que eram aqueles commits
00:54:00e quais foram as mudanças de design.
00:54:04E você pode ver que ele está realmente percorrendo
00:54:06e analisando seletores de busca
00:54:09e vendo como pode otimizar o desempenho.
00:54:11Podemos abrir este aqui, iniciar o servidor de desenvolvimento.
00:54:13Mais alguma pergunta enquanto as coisas
00:54:20estão rodando em segundo plano?
00:54:25- Eu só gosto de ver quantos desses estão rodando agora.
00:54:26Isso é super legal.
00:54:30Nenhuma pergunta real no chat.
00:54:31Apenas pessoas conversando sobre diferentes prompts,
00:54:34ideias de prompts, o que é ótimo.
00:54:37Eu tenho uma pergunta, John.
00:54:40Quando você deixa os agentes atualizarem as skills
00:54:43com base em conversas que falharam,
00:54:47como você evita que essas edições automáticas
00:54:49acabem desviando a skill
00:54:52da intenção original ou do padrão de qualidade?
00:54:55- Boa pergunta.
00:54:58Geralmente eles são muito bons
00:55:05em fazer mudanças pequenas e isoladas.
00:55:09Se você estiver tendo uma conversa,
00:55:12o agente vê o que funcionou na conversa
00:55:13e vê o que não funcionou.
00:55:17Então, se você apontar que algo não funcionou
00:55:20na conversa atual,
00:55:24ele consegue encontrar e atualizar apenas as partes
00:55:26específicas que precisam de ajuste.
00:55:30E ele não vai simplesmente
00:55:33reescrever tudo do zero nem nada disso.
00:55:35Então, acho que nunca vi isso ser um problema real,
00:55:37não vou dizer que é impossível,
00:55:42mas não acho que tenha visto como um problema real.
00:55:45- Sim, entendi.
00:55:47- Certo, aqui está a página do nosso workshop.
00:55:48Pode publicar, né?
00:55:54Ficou linda.
00:55:56Aqui estão as nossas variações.
00:55:57Vamos abrir servidores de desenvolvimento para cada uma.
00:55:59E então abrir um monte de abas.
00:56:03Mas acho que meu tempo está quase acabando.
00:56:11Se houver alguma pergunta final
00:56:16Se houver alguma dúvida final
00:56:17antes de encerrarmos as coisas, eu posso mostrar,
00:56:22eu tenho aqui nas skills, perdi minhas skills.
00:56:29Navegador, traga de volta.
00:56:30leia uma que se alinhe com o que você está fazendo.
00:56:36parcourez-en un qui correspond à peu près à ce que vous faites.
00:56:40Eu tenho uma “publish skill”, que se você confiar,
00:56:43esta está sob o meu nome.
00:56:45Se você confiar em um agente para executar o GitHub CLI,
00:56:50novamente, este é um nível de confiança bem alto.
00:56:54É um pouco da confiança que eu tenho.
00:56:57Ele pegará a skill que você criar.
00:57:00Então você poderia dizer “create skill”, depois “publish skill”.
00:57:02E então ele entrará em um,
00:57:04vou fazer isso fora da tela rapidinho.
00:57:07Deixe-me encontrar um dos meus repositórios que tem,
00:57:16acho que ele até se publicou sozinho.
00:57:21Então posso mostrar este aqui.
00:57:22Deixe-me garantir que não haja nada privado aqui.
00:57:24Ok, desculpe.
00:57:27Então, eu posso simplesmente criar um repo no GitHub para você
00:57:29e publicar a skill em si
00:57:32para que você realmente não tenha que fazer nenhum trabalho
00:57:35além de “create skill” e depois “publish skill”.
00:57:38E você verá que ele diz: por favor, crie o repositório,
00:57:43crie-o sob a... eu sempre me confundo com a organização,
00:57:45porque estou em algumas organizações diferentes,
00:57:47e depois verifique se está disponível na ferramenta de skills.
00:57:52Então, se você pegar isso,
00:57:56novamente, as instruções são que,
00:57:58ele pode prosseguir e criar aquilo
00:58:00ou publicar aquela skill para você,
00:58:01para que você possa compartilhá-la com seu time,
00:58:02com amigos, o que for.
00:58:03E uma outra ferramenta em que estive trabalhando
00:58:08onde, se eu sei que haverá algumas skills
00:58:14là où si je sais qu'il va y avoir quelques compétences
00:58:19que eu queira carregar logo de cara,
00:58:20eu sei que quero o navegador do agente, como o Geist,
00:58:24eu quero, vamos colocar as melhores práticas do Remotion
00:58:29e as melhores práticas de React na Vercel.
00:58:33Esta é essencialmente uma daquelas ferramentas
00:58:37que resolvem a questão de forçar o contexto logo de início.
00:58:40E ele vai apenas forçar um prompt no Cloud Code,
00:58:44por enquanto funciona apenas no Cloud Code.
00:58:45Mas ele vai forçar ali e dizer:
00:58:48estas são todas as skills que eu sei que vou precisar
00:58:50e aqui está o conteúdo,
00:58:51para que assim que a conversa começar,
00:58:53mesmo que eu não tenha dito nada sobre o navegador do agente,
00:58:58même si je n'ai rien dit à propos du navigateur de l'agent,
00:59:06ele obviamente vai usar o navegador do agente.
00:59:10Como ele talvez fizesse antes, e frequentemente faria.
00:59:14Eu não sei como é a descrição do navegador do agente.
00:59:18Não sei se tem a palavra “avaliar” lá
00:59:21ou se ele deduziria por “avaliar” e “porta 3000” que deve carregá-lo.
00:59:24Mas desta forma estou apenas forçando isso logo de cara
00:59:24para que, quando eu usar frases assim, já esteja carregado.
00:59:29Então esse pacote está em,
00:59:33deixe-me encontrar o “skills primer”.
00:59:36– Também podemos compartilhar esses links ao final.
00:59:41– Ok, legal.
00:59:45– Já os temos, perfeito.
00:59:45– Vou colocá-lo ali.
00:59:46– E isto é... e eu diria, como sempre,
00:59:50com o estado do software hoje em dia,
00:59:53vá e clone o repositório e torne-o seu.
00:59:55Estamos nesta era de personalizar CLIs
00:59:59e personalizar softwares.
01:00:02Então, se você quiser que tenha um nome completamente diferente
01:00:04ou tenha recursos e funcionalidades totalmente diferentes,
01:00:07se quiser customizar isso para o Codex
01:00:08ou para o Cursor ou qualquer coisa, apenas clone e torne-o seu.
01:00:11Tipo, peça: “por favor, faça isso funcionar com o Cursor”
01:00:14e deixe seu agente construir isso para o Cursor.
01:00:18E hoje em dia você consegue resolver tantas coisas
01:00:20com apenas um comando, é surreal.
01:00:23– É incrível, software personalizado para a vitória.
01:00:26Eu queria fazer só mais uma pergunta
01:00:29que chegou aqui no chat.
01:00:31Eu sei que já estamos no horário,
01:00:32mas já que as skills são repositórios do GitHub
01:00:35e parecem ser instaladas localmente,
01:00:37como você garante que está recebendo as atualizações?
01:00:40A CLI tem algum comando como “slash update skill”?
01:00:42– Não lembro os comandos exatos hoje em dia,
01:00:48deixe-me fechar isso aqui.
01:00:52Skills, opa, eu nem tenho instalado globalmente.
01:00:53– Adorei isso.
01:00:59– Eu pego a última versão na lista de skills.
01:01:02Então sim, o “skills update” está lá.
01:01:05– Acho que uma pergunta complementar seria:
01:01:07você quer que as atualizações de skills venham com frequência?
01:01:11– Essa é uma ótima pergunta.
01:01:13Não sei se alguém tem uma resposta definitiva,
01:01:18porque no momento as skills... as regras
01:01:23sobre o “front matter” e versionamento,
01:01:28acho que nem todo mundo entrou em um acordo,
01:01:30assim como nas skills, não houve um acordo sobre
01:01:32em quais diretórios e estruturas colocá-las.
01:01:34Tudo isso é um ecossistema que está crescendo no momento.
01:01:37Então, quanto ao versionamento,
01:01:41é meio que esperar para ver,
01:01:47fazer o melhor com o que temos agora
01:01:49e ver o que se consolida como as melhores práticas.
01:01:51Porque não tenho uma para oferecer agora,
01:01:54além de: atualize sempre.
01:01:57E apenas assuma que isso é o melhor.
01:01:59Mas é isso, não tenho nenhum conselho extra além desse.
01:02:03– É, e está mudando o tempo todo.
01:02:06Tenho certeza de que alguém terá um conselho atualizado
01:02:08em questão de dias, muda todo dia.
01:02:12Incrível, John.
01:02:18Tem algo mais que você queira mostrar
01:02:18para a comunidade hoje?
01:02:20– Eu gostaria.
01:02:21– São tantas coisas.
01:02:25– Faremos muito mais sessões dessas,
01:02:26e tenho muitas outras coisas para mostrar,
01:02:28mas eu poderia falar por horas aqui.
01:02:30– Sim, com certeza.
01:02:32John, muito obrigado por vir
01:02:34à nossa plataforma da comunidade
01:02:36e conversar com o nosso pessoal,
01:02:38e obrigado a todos vocês que estiveram por aqui.
01:02:39E sim, como dissemos,
01:02:42o John com certeza voltará para outra dessas.
01:02:44Então, fiquem ligados.
01:02:46– Obrigado a todos.
01:02:48– Obrigado.
01:02:49Muito bem, se vocês quiserem acompanhar
01:02:50nossa próxima sessão da comunidade,
01:02:53teremos Histórias de Código Aberto na segunda-feira,
01:02:55e acho que outra sessão de parceiros,
01:02:58uma sessão de parceiros do marketplace na semana que vem,
01:03:00mas vocês encontram todos os detalhes
01:03:03no nosso calendário de eventos da comunidade,
01:03:04que fica em [community.vercel.com/events](https://www.google.com/search?q=https://community.vercel.com/events).
01:03:08Mas é isso, muito obrigada a todos por participarem.
01:03:12Foi muito divertido e, sim,
01:03:15nos vemos aqui na semana que vem.
01:03:17A gente se vê.