O que são as Skills do CLI da Nuvemshop e como elas me ajudam a editar layouts com IA?

As Skills do CLI da Nuvemshop, ou Agent Skills, são instruções para agentes de programação com IA. Entre esses agentes estão o Claude Code, o Cursor e o Codex. Com elas, o agente entende como um layout da Nuvemshop é estruturado e usa os comandos certos do CLI. Assim, agências e pessoas desenvolvedoras podem editar layouts a partir de solicitações em linguagem natural.

As Skills são usadas junto com o CLI, por isso primeiro você precisa ter o CLI instalado. Para fazer isso, veja como instalar e usar o CLI da Nuvemshop para editar layouts.

Que problema as Skills resolvem ao editar um layout com IA?

Entre imaginar um layout e entregá-lo, existe muito trabalho de código. Um agente de programação com IA pode ajudar nessa tarefa, mas precisa conhecer como os layouts da Nuvemshop funcionam.

As Skills dão esse contexto ao agente. Com elas instaladas, o agente identifica a qual família o layout de uma loja pertence: baseado em seções, como o Ipanema, ou legado.

Ele também sabe quais arquivos podem ser enviados sem fazer um fork, ou cópia isolada do layout, e o que o fork implica. Com essa informação, executa os comandos certos do CLI em vez de adivinhar.

Como as Skills funcionam quando faço uma solicitação ao agente?

As Skills já vêm incluídas no CLI, então não é preciso baixar nada separadamente. Um único comando do CLI vincula as Skills aos agentes de programação com IA instalados no seu computador.

Depois disso, não é necessário mencionar as Skills nas suas solicitações. O agente carrega a Skill certa de acordo com a tarefa. Por exemplo, diante da solicitação "adicione uma seção de banner ao meu layout", ele lê as Skills que se aplicam. Em seguida, executa os comandos necessários.

Em um layout baseado em seções, como o Ipanema, o agente baixa o layout e edita as seções. Depois, envia as alterações para uma cópia isolada do layout. Por fim, gera um link de pré-visualização para você revisar o resultado antes de publicar.

Você pode partir de uma referência visual. O agente pode usar uma URL, um arquivo HTML ou uma captura de tela. A partir dela, recria esse design como seções do layout da sua loja. As Skills não se integram com ferramentas de design: a referência sempre chega por meio do agente.

Quais são as vantagens de usar as Skills nos meus projetos de design?

Usar as Skills junto com o CLI traz estas vantagens para agências e pessoas desenvolvedoras:

• Contexto certo desde o início: o agente conhece a estrutura dos layouts da Nuvemshop e não depende de instruções longas a cada solicitação.
• Revisão antes de publicar: nos layouts baseados em seções, o resultado é revisado em uma versão de teste antes de ir ao ar.
• Foco na direção criativa: o agente executa as alterações no código, e quem lidera o projeto define o rumo do design.
• Instalação sem downloads extras: as Skills vêm no CLI e, por padrão, são atualizadas quando você atualiza o CLI.
• Compatibilidade com vários agentes: funcionam com agentes como Claude Code, Cursor e Codex, entre outros.

Em quais projetos posso usar as Skills e o que posso pedir ao agente?

Estes são alguns projetos em que você pode usar as Skills, com um exemplo de solicitação para cada um. Substitua os dados entre colchetes pelos do seu projeto.

• Adaptar o layout para uma campanha: propostas para Black Friday, Natal e outras datas, com alterações em toda a loja dentro de uma versão de teste. Por exemplo: "Adapte o layout completo da minha loja para a Black Friday: página inicial com banner em destaque, seção de ofertas e as cores da campanha."
• Migrar de um layout anterior para o Ipanema: o agente ajuda a adaptar a aparência de uma loja ao Ipanema, o layout mais moderno da Nuvemshop. Por exemplo: "Migre a minha loja do layout Rio para o Ipanema, mantendo as cores, a tipografia e a organização das páginas."
• Recriar uma loja de outra plataforma: a aparência da loja de origem serve de referência para recriar a identidade da marca na Nuvemshop. Por exemplo: "Quero migrar a minha loja da Shopify para a Nuvemshop. Use a loja [endereço da loja] como referência para recriar a página inicial e as páginas de produto."
• Usar referências de outras lojas: layouts e componentes de outras lojas inspiram novas experiências, e o agente adapta as ideias ao seu layout. Por exemplo: "Gostei do carrossel de produtos da loja [endereço da loja]. Crie um carrossel parecido na página inicial da minha loja, adaptado ao meu layout."

Para instalar as Skills, ver a lista completa e resolver problemas, consulte a documentação técnica das Skills do CLI. Para conhecer os comandos que o agente executa em cada etapa, veja como editar, pré-visualizar e publicar um layout com o CLI.