npx skills add google/agents-cli --skill google-agents-cli-adk-code
npx skills add flutter/skills

No início, eu estava lendo e aprendendo principalmente. No final, porém, eu sabia o suficiente sobre o que estava acontecendo para focar em coisas que estavam falhando consistentemente, começar a fazer minha própria pesquisa e ajustar o código para corrigir problemas. Depois de modificar as notas e o repositório de código, perguntava ao Antigravity como poderia atualizar a habilidade para que a geração futura do código parecesse mais com o que eu havia criado. Como resultado, a habilidade não era apenas instruções para o agente codificador, mas um registro do que estava aprendendo.

Loop no loop

Levou treze iterações para que eu chegasse a algo com o qual não me envergonharia de compartilhar. Aqui estão as primeiras seis, que foram principalmente sobre descoberta e anotação:

1. Autonomia e mapeamento de espaço de trabalho — Percebi que um único arquivo SKILL.md era muito difícil para o agente navegar. Refatorei a habilidade para ser modular, criando uma pasta dedicada referências/ e escrevi o primeiro guia especializado: referencias/agent_discovery.md. Isso permitiu que o Antigravity analisasse a fonte do agente e criasse AGENT_INTERFACE_NOTES.md para registrar o que aprendeu.
2. Definindo comportamento e experiência do usuário — O próximo passo foi o uso da especificação para a frente: O que faria? Como um usuário interagiria com ele? Adicionei uma nova fase à habilidade, instruindo-o a ler referências/frontend_usage.md e entrevistar-me sobre preferências de plataforma e requisitos de recursos. Isso me proporcionou FRONTEND_USAGE_NOTES.md, que definiu o propósito e o conjunto de recursos do aplicativo antes mesmo de tocar no código.
3. Estabelecendo o esboço estrutural — Arquitetura. Adicionamos referencias/frontend_architecture.md à habilidade, que focava em detalhes arquiteturais que a frente precisaria e eu fiz o agente produzir FRONTEND_ARCHITECTURE_NOTES.md.
4. Desenhando a estética visual — Criamos referencias/frontend_design.md para instruir o agente sobre como definir estética visual e adicionamos instruções de esqueleto a SKILL.md. Este guia direcionou o agente a entrevistar-me sobre preferências de tema, quebra de ponto e animação, e o Antigravity começou a produzir FRONTEND_DESIGN_NOTES.md.
5. Gerando e executando um aplicativo — Neste ponto, eu era capaz de dizer ao Antigravity para começar a gerar o código flutter real com base em todas as especificações que havíamos coletado. O aplicativo falhou bastante tragicamente, e percebi que algum tipo de arquivo geral “melhores práticas” seria necessário para superar problemas prováveismente recorrentes. Adicionamos referencias/frontend_best_practices.md aos arquivos da habilidade para guiar a codificação real, e começamos a corrigir as coisas uma de cada vez.

A partir daqui, continuei iterando com o Antigravity conforme enfrentava um problema de cada vez, atualizando o código, ajustando a habilidade para corresponder e então apagando a frente gerada para tentar novamente. No processo, o loop ficou mais apertado e as mudanças menores. Realizei sete iterações adicionais:

1. O aplicativo não pode fazer chamadas de rede! — Corrigiu as permissões e informações para macOS e iOS.
2. Todo esse markdown não está sendo formatado! — Usou flutter_markdown para exibir corretamente o texto do agente, que frequentemente contém markdown.
3. Por que o código não está certo? — Adicionou lints, regras de formatação e outras verificações pós-geração.
4. Classes seladas! — Tipos de mensagens diferentes devem compartilhar um tipo base para que o aplicativo possa usar declarações switch exaustivas.
5. Por que as conversas não estão rolando? — Adicionou um ScrollController para avançar automaticamente listas de mensagens quando novas chegam.
6. Por que o aplicativo caiu quando eu rodei na web? — Removi dart:io e me baseei em package:http para networking.
7. Eventos parciais na minha lista! — ADK envia uma sequência de eventos, às vezes em pedaços. A interface do usuário precisava montar e apresentá-los de forma coerente ao invés de fornecer à usuária uma lista de todos os parciais (com formatação markdown quebrada).
8. Por que a janela de ferramentas está em branco? — Como gerado, os aplicativos não lidavam corretamente com convenções de nomenclatura de ferramenta e o tratamento de eventos não identificava corretamente quando as ferramentas eram invocadas.

Um exemplo de “coisa que deu errado”

Para dar uma ideia do trabalho feito em cada um dos iterações, vamos caminhar por uma das mudanças: como a interface do usuário lida com eventos parciais.

O servidor ADK transmite eventos representando pequenos pedaços de conteúdo ou estágios parciais da execução de ferramentas. Se o aplicativo cliente renderizar cada evento de rede recebido como uma mensagem individual na lista de chat, no entanto, a interface se tornará fragmentada. Uma única resposta do agente apareceria como dezenas de blocos isolados e quebrados.

A forma antiga (uma lista ingênua):

// Renderizando cada pedaço de evento bruto em uma lista view
ListView.builder(
  itemCount: rawEvents.length,
  itemBuilder: (context, index) {
    // Cada bloco parcial de texto é renderizado em um bolha separada
    return ChatBubble(text: rawEvents[index].contentText);
  },
)

Este código leva a uma interface que parece com isso:

A solução para isso não é particularmente difícil, uma vez que você sabe o que fazer. Claro, eu não sabia, então comecei a perguntar coisas como “Como o ADK usa SSE para transmitir eventos?” e “Qual é a estrutura de dados em rede para um evento e como sei se é um evento parcial?”. Se houvesse algo chamado ‘aprendizado por vibração’, eu estava fazendo isso.

Descobri que você só precisa verificar uma bandeira, então ajustei o código na classe AgentProvider do frontend, pedi ao Antigravity para revisar caso eu tivesse esquecido algo óbvio e rodei o aplicativo para verificar. Foi preciso mais uma solicitação ao Antigravity para atualizar as melhores práticas de modo que cada novo frontend usasse essa abordagem.

A nova maneira (agregação no AgentProvider):

await for (final event in stream) {
  if (event.partial && event.contentText != null) {
    // Acumule o texto de streaming
    _activeStreamingAuthor = event.author;
    _activeStreamingResponse =
        (_activeStreamingResponse ?? ‘’) + event.contentText!;
  } else {
    // Finalizado: Limpe o acumulador e adicione à lista de eventos permanentes
    _activeStreamingResponse = null;

    final updatedEvents = List<Event>.from(_activeSession!.events)
        ..add(event);

    // Combine delta do estado
    Map<String, dynamic> mergedState = _extractSessionStateMap(
      _activeSession!,
    );
    if (event.actions.stateDelta.isNotEmpty) {
      mergedState.addAll(event.actions.stateDelta);
    }

    // Crie uma nova cópia da sessão com eventos e estado atualizados
    _activeSession = Session.fromJson({
      'id': _activeSession!.id,
      'app_name': _activeSession!.appName,
      'user_id': _activeSession!.userId,
      'events': updatedEvents.map((ev) => _serializeEvent(ev)).toList(),
      'state': mergedState,
    });

    _processCompletedEvent(event);
  }

  notifyListeners();
}

Tente você mesmo

Sou uma pessoa que aprende fazendo, e tentar algo totalmente fora da minha zona de conforto (como um novo idioma e uma nova SDK) foi bastante intimidante. Ter essa estrutura, no entanto, me ajudou muito, e agora tenho uma nova habilidade de agente.

Se você ainda não fez, baixe o Antigravity e dê uma tentada — levou apenas algumas horas para mim, e aprendi alguns truques novos.

Para começar:

1. Baixe Antigravity para integrar o assistente de codificação agêntico ao seu ambiente de desenvolvimento.
2. Visite a documentação AGY getting started para aprender como definir suas próprias habilidades de desenvolvedor personalizadas e referências de diretrizes.
3. Esboce uma habilidade simples para um framework que você deseja explorar, e continue iterando até obter algo do seu gosto!