O Antigravity é uma IDE com foco em desenvolvimento assistido por IA, onde “skills” funcionam como pacotes de instruções reutilizáveis para orientar o assistente em tarefas específicas. Em vez de repetir orientações longas em cada conversa, uma skill define um comportamento, um formato de entrega e um conjunto de boas práticas para um tipo de trabalho, como planejar, programar, revisar, desenhar interfaces ou auditar segurança.
O repositório Antigravity Awesome Skills reúne mais de 251 skills em um formato universal, pensado para funcionar em diferentes assistentes de IA. O objetivo é acelerar fluxos de trabalho e padronizar entregas com instruções consistentes, incluindo categorias como desenvolvimento, design, agentes, infraestrutura, testes, marketing e segurança. Os recursos a seguir apresentam como organizar as skills no Antigravity, como acioná-las no dia a dia e como criar uma página index.html com Bootstrap 5.3.8 em dois cenários: sem skills e com skills melhorando o design com apoio de IA.
O que são skills no Antigravity e por que elas mudam o fluxo
Uma skill é um conjunto de instruções estruturadas que define como um assistente de IA deve atuar em um contexto. Na prática, ela reduz ambiguidade, pois descreve metas, restrições, formato de saída e critérios de qualidade. Isso melhora consistência em tarefas repetidas, como gerar uma landing page, revisar código, criar copy de marketing ou elaborar um plano técnico. O resultado tende a ser menos “tentativa e erro” e mais um processo guiado.
No Antigravity, a ideia central é que as skills sejam descobertas automaticamente quando colocadas em um diretório esperado do projeto. Ao chamar uma skill, o assistente passa a seguir aquele “modo de operação” e pode produzir resultados mais previsíveis. Esse mecanismo é especialmente útil em times, pois padroniza decisões como estrutura de arquivos, estilo de texto e checklist de acessibilidade. Além disso, as skills podem ser combinadas: uma para UX, outra para front-end e outra para revisão.
O que é o repositório Antigravity Awesome Skills e como ele é organizado
O Antigravity Awesome Skills é uma biblioteca curada de skills em um formato universal, o que significa que as mesmas skills tendem a funcionar em diferentes ferramentas que suportam “agentic skills”. O conteúdo cobre desde tarefas técnicas, como TDD (desenvolvimento orientado a testes) e arquitetura, até áreas como design, marketing e automação. A curadoria costuma incluir skills mais “opiniosas”, com padrões e checklists, o que acelera decisões. A licença é MIT, o que facilita uso e adaptação em projetos.
As categorias ajudam a encontrar rapidamente a skill certa para uma necessidade. Entre os grupos mais comuns aparecem automação e agentes, integrações com APIs, segurança, design e front-end, infraestrutura e Git, planejamento e revisão, processamento de documentos e crescimento. Essa variedade é útil quando a landing page precisa de algo além do HTML, como copy persuasiva, SEO básico e consistência visual. Mesmo em um projeto simples, uma skill de “frontend design” e outra de “copywriting” já costumam elevar o resultado.
Links oficiais citados no contexto do tema:
Compatibilidade e caminhos de instalação de skills
As skills desse repositório seguem um formato universal frequentemente chamado de SKILL.md, um padrão de arquivo em Markdown que descreve como a skill opera. O ponto importante é que várias ferramentas conseguem “descobrir” skills colocadas em diretórios específicos. No Antigravity, o caminho mais comum é .agent/skills/, pois tende a ser reconhecido automaticamente. Em outras ferramentas, podem existir diretórios específicos, mas o repositório recomenda um caminho unificado para reduzir diferenças.
Em um projeto, a instalação geralmente significa apenas clonar o repositório para dentro de .agent/skills (ou copiar as pastas de skills para esse local). Depois disso, o assistente passa a ter acesso às skills e pode ser acionado por um “comando” ou referência pelo nome. Mesmo quando existe compatibilidade parcial, como em algumas extensões, o conteúdo das skills ainda serve como referência para orientar prompts e padrões. O ganho real aparece quando o assistente reconhece a skill e aplica seu formato automaticamente.
Instalação do repositório no projeto com Git
O Git é um sistema de controle de versão que permite baixar, versionar e atualizar repositórios com histórico completo. Ao clonar o repositório para dentro de um diretório reconhecido, as skills ficam disponíveis no projeto. Esse método é simples e reprodutível, pois qualquer ambiente que rode Git consegue repetir o mesmo processo. Também é comum manter as skills fora do repositório principal do projeto, mas no cenário de aprendizado e testes, o clone direto costuma ser o caminho mais claro.
O comando a seguir mostra uma forma direta de clonar para o diretório recomendado, mantendo o projeto organizado. Esse procedimento pressupõe que o diretório .agent exista ou será criado automaticamente pelo comando quando o caminho for informado. Em ambientes onde já existe uma pasta de skills, a atualização pode ser feita com git pull. O resultado final é uma árvore de pastas com diversas skills prontas para uso.
# Clonar as skills no diretório padrão do Antigravity
git clone https://github.com/sickn33/antigravity-awesome-skills.git .agent/skills
# Entrar no diretório clonado (opcional, para verificar conteúdo)
cd .agent/skills
# Atualizar as skills posteriormente (quando já existe clone)
git pullComo acionar uma skill no fluxo de trabalho
Ao acionar uma skill, o assistente passa a seguir o conjunto de instruções definido por ela. Em muitos fluxos, usa-se um gatilho curto no prompt, como um identificador que referencia o nome da skill. O objetivo é transformar um pedido amplo em uma execução guiada por um “modo especializado”. Assim, em vez de solicitar “criar uma landing page bonita”, uma skill de UI/UX determina estrutura, hierarquia visual, contraste, tipografia e consistência.
O repositório costuma demonstrar chamadas usando um padrão como @nome-da-skill, seguido do pedido. Esse padrão pode variar conforme a ferramenta, mas a ideia permanece: escolher a skill certa e descrever o objetivo. Em um cenário de landing page com Bootstrap, é comum combinar skills de design e de front-end, para obter tanto o visual quanto a implementação. Quando há uma skill de revisão, ela pode ser usada no fim para checar acessibilidade e consistência.
Um exemplo textual comum de chamada de skill, mantendo a ideia de “modo especializado”, pode ser descrito assim:
@brainstorming definir a estrutura de uma landing page para um produto de software, com seções de benefícios, recursos, depoimentos e CTA.
@frontend-design propor um layout em Bootstrap 5.3.8 com tema escuro, boa hierarquia e componentes consistentes.
Como era “sem skills” e como tende a ser “com skills”
Sem skills, o processo costuma ser mais manual e sujeito a inconsistências. O assistente pode alternar padrões de estrutura, mudar classes, misturar estilos e esquecer requisitos como responsividade ou acessibilidade. Também é comum que o texto de marketing fique genérico, com títulos repetitivos e pouca clareza de valor. O resultado pode funcionar, mas com mais retrabalho.
Com skills, o fluxo tende a ficar previsível e incremental. Uma skill de planejamento define a arquitetura da página, outra de design estabelece identidade e componentes e uma terceira de revisão valida contraste, semântica e clareza do texto. A IA passa a seguir um “checklist embutido” e entrega com menos lacunas. O ganho se manifesta em consistência visual, organização do HTML e decisões mais estáveis ao longo de alterações.
Preparação de uma landing page com Bootstrap 5.3.8
Bootstrap é um framework (conjunto de ferramentas) de CSS e JavaScript que fornece componentes prontos e um sistema de grid responsivo. A versão 5.3.8 traz utilitários modernos e componentes como navbar, cards, accordion e modals, além de suporte facilitado a tema escuro. Em uma landing page, Bootstrap acelera a estrutura e reduz a necessidade de CSS do zero. Mesmo sem customização avançada, já é possível obter um layout consistente e responsivo.
Uma landing page é uma página com foco em conversão, geralmente com proposta de valor clara, seções curtas e chamadas para ação. Em termos de conteúdo, costuma incluir herói (título principal), benefícios, recursos, prova social e um CTA final. Em termos técnicos, o ideal é ter semântica correta, boa hierarquia de headings e responsividade. Também é importante evitar excesso de efeitos, priorizando legibilidade e performance.
Exemplo 1: index.html simples com Bootstrap (sem skills)
O exemplo a seguir mostra uma landing page funcional e direta, com uma navbar simples, uma seção principal e blocos de conteúdo. Esse modelo representa um cenário típico sem apoio de skills: atende ao básico, mas não enfatiza uma identidade visual forte nem reforça padrões avançados de UX. Ainda assim, a estrutura é limpa e serve como base. O Bootstrap é carregado via CDN e a página inclui o bundle JavaScript necessário para componentes interativos.
Antes do código, vale notar o que será apresentado: um único arquivo index.html com seções de herói, benefícios, recursos e rodapé. O layout usa grid responsivo com container e row, e cards simples para organizar informações. O texto é propositalmente neutro, pois esse cenário não usa uma skill de copywriting. O foco é mostrar uma implementação mínima e correta.
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Landing Page - Exemplo com Bootstrap</title>
<meta name="description" content="Landing page simples criada com Bootstrap 5.3.8.">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg bg-body-tertiary border-bottom">
<div class="container">
<a class="navbar-brand fw-semibold" href="#">Produto</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#menu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="menu">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#beneficios">Benefícios</a></li>
<li class="nav-item"><a class="nav-link" href="#recursos">Recursos</a></li>
<li class="nav-item"><a class="nav-link" href="#contato">Contato</a></li>
</ul>
</div>
</div>
</nav>
<header class="py-5">
<div class="container">
<div class="row align-items-center g-4">
<div class="col-12 col-lg-7">
<h1 class="display-5 fw-bold">Uma landing page objetiva com Bootstrap</h1>
<p class="lead text-body-secondary">
Estrutura clara, componentes prontos e layout responsivo.
Um ponto de partida simples para apresentar um produto.
</p>
<div class="d-flex gap-2">
<a class="btn btn-primary btn-lg" href="#contato">Começar</a>
<a class="btn btn-outline-secondary btn-lg" href="#recursos">Ver recursos</a>
</div>
</div>
<div class="col-12 col-lg-5">
<div class="p-4 border rounded-3 bg-body-tertiary">
<h2 class="h5 fw-semibold">Resumo</h2>
<p class="mb-0 text-body-secondary">
Página com navbar, seções e cards. Sem customização avançada.
</p>
</div>
</div>
</div>
</div>
</header>
<section id="beneficios" class="py-5 border-top">
<div class="container">
<h2 class="h3 fw-bold">Benefícios</h2>
<p class="text-body-secondary">
Benefícios descrevem resultados práticos. Nesta versão, o texto é genérico e direto.
</p>
<div class="row g-3">
<div class="col-12 col-md-4">
<div class="card h-100">
<div class="card-body">
<h3 class="h5 card-title">Rápido</h3>
<p class="card-text text-body-secondary">Componentes prontos reduzem tempo de construção.</p>
</div>
</div>
</div>
<div class="col-12 col-md-4">
<div class="card h-100">
<div class="card-body">
<h3 class="h5 card-title">Responsivo</h3>
<p class="card-text text-body-secondary">Grid do Bootstrap adapta layout a diferentes telas.</p>
</div>
</div>
</div>
<div class="col-12 col-md-4">
<div class="card h-100">
<div class="card-body">
<h3 class="h5 card-title">Organizado</h3>
<p class="card-text text-body-secondary">Seções bem definidas facilitam manutenção.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="recursos" class="py-5">
<div class="container">
<h2 class="h3 fw-bold">Recursos</h2>
<p class="text-body-secondary">
Recursos descrevem capacidades do produto. Nesta versão, o foco é apenas ilustrar componentes.
</p>
<div class="row g-3">
<div class="col-12 col-lg-6">
<div class="p-4 border rounded-3">
<h3 class="h5 fw-semibold">Seções e navegação</h3>
<p class="mb-0 text-body-secondary">Âncoras na navbar e rolagem padrão.</p>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="p-4 border rounded-3">
<h3 class="h5 fw-semibold">Cards e grid</h3>
<p class="mb-0 text-body-secondary">Cards para blocos e colunas para responsividade.</p>
</div>
</div>
</div>
</div>
</section>
<section id="contato" class="py-5 border-top bg-body-tertiary">
<div class="container">
<h2 class="h3 fw-bold">Contato</h2>
<p class="text-body-secondary">
Em uma landing page real, esta área pode ter formulário, mas aqui fica um CTA simples.
</p>
<a class="btn btn-primary btn-lg" href="#">Solicitar acesso</a>
</div>
</section>
<footer class="py-4 border-top">
<div class="container">
<p class="mb-0 text-body-secondary">© 2026 Produto. Página de exemplo.</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>O que costuma melhorar ao aplicar skills de design com IA
Quando skills de design e UI/UX entram no processo, o resultado costuma ganhar um “sistema” visual. Esse sistema envolve paleta coerente, espaçamentos consistentes, tipografia hierárquica e componentes com variações previsíveis. Mesmo usando apenas Bootstrap, é possível elevar bastante o visual com utilitários, tema escuro, gradientes discretos e seções com contraste. Também é comum melhorar a copy: títulos mais específicos e benefícios orientados a resultado.
A expressão “melhorar usando IA” tende a significar duas coisas: geração de alternativas e validação por checklist. A IA pode sugerir variações de layout, nomes de seções, microtextos de botões e ordem de conteúdo. Em seguida, uma skill de revisão pode checar clareza, redundância e consistência. Esse ciclo diminui retrabalho e evita decisões aleatórias.
Como organizar um pedido para a IA usando skills (modelo prático)
Um pedido bem organizado define objetivo, público, estilo visual, restrições técnicas e formato de entrega. Em vez de solicitar apenas “criar uma página”, descreve-se a estrutura desejada, o tema e os componentes. Isso permite que uma skill de front-end use Bootstrap de modo mais intencional. Também ajuda a obter um único arquivo pronto, com HTML completo e pequenas personalizações.
O modelo a seguir descreve o que será apresentado: um roteiro de prompt que combina planejamento, design e implementação. O texto mantém foco em uma landing page e inclui Bootstrap 5.3.8, tema escuro e seções típicas. O pedido também solicita decisões coerentes de espaçamento e copy mais específica. Esse tipo de organização reduz divergências e melhora a primeira entrega.
- Objetivo: landing page de apresentação de um produto/IDE com foco em produtividade.
- Estrutura: navbar, herói, benefícios, recursos, prova social, FAQ e CTA final.
- Visual: tema escuro, destaque com gradiente suave, cards com bordas discretas.
- Técnico: Bootstrap 5.3.8 via CDN, um arquivo index.html, sem CSS externo obrigatório.
- Entrega: HTML completo e pronto para abrir no navegador.
Exemplo 2: index.html mais refinado (com “design guiado por skills”)
O exemplo a seguir representa um resultado típico quando o design é tratado com mais intenção, como se uma skill de UI/UX e outra de front-end estivessem orientando decisões. O HTML continua simples e autossuficiente, mas há melhorias claras: tema escuro com data-bs-theme, seções com contraste, melhor hierarquia, badges, accordion de FAQ e um CTA mais destacado. O conteúdo permanece genérico o suficiente para servir como template, sem depender de assets externos como imagens.
Antes do código, fica descrito o que será apresentado: uma landing page em Bootstrap 5.3.8 com tema escuro, herói com destaque, seção de benefícios com ícones em forma de “badge”, recursos com cards, FAQ com accordion e rodapé. O layout usa utilitários de espaçamento e tipografia, evitando CSS customizado. Também há pequenos detalhes de acessibilidade, como rótulos e organização semântica básica. O objetivo é mostrar como “com skills” a página tende a ficar mais coesa.
<!doctype html>
<html lang="pt-BR" data-bs-theme="dark">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Landing Page (Bootstrap 5.3.8) - Layout Refinado</title>
<meta name="description" content="Landing page em Bootstrap 5.3.8 com layout refinado e seções completas.">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-body">
<nav class="navbar navbar-expand-lg sticky-top bg-body border-bottom">
<div class="container">
<a class="navbar-brand d-flex align-items-center gap-2 fw-semibold" href="#" aria-label="Página inicial">
<span class="badge text-bg-primary rounded-pill">AG</span>
<span>Antigravity Skills</span>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#menuRefinado" aria-controls="menuRefinado" aria-expanded="false" aria-label="Abrir menu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="menuRefinado">
<ul class="navbar-nav ms-auto align-items-lg-center gap-lg-2">
<li class="nav-item"><a class="nav-link" href="#visao-geral">Visão geral</a></li>
<li class="nav-item"><a class="nav-link" href="#beneficios-refinados">Benefícios</a></li>
<li class="nav-item"><a class="nav-link" href="#recursos-refinados">Recursos</a></li>
<li class="nav-item"><a class="nav-link" href="#faq">FAQ</a></li>
<li class="nav-item ms-lg-2">
<a class="btn btn-primary" href="#cta">Começar</a>
</li>
</ul>
</div>
</div>
</nav>
<header class="py-5">
<div class="container">
<div class="row align-items-center g-4">
<div class="col-12 col-lg-7">
<div class="d-inline-flex align-items-center gap-2 mb-3">
<span class="badge text-bg-success">251+ skills</span>
<span class="text-body-secondary small">Biblioteca agentic para fluxos de desenvolvimento</span>
</div>
<h1 class="display-5 fw-bold lh-1 mb-3">
Landing page com visual consistente usando Bootstrap 5.3.8
</h1>
<p class="lead text-body-secondary mb-4">
Estrutura clara, seções completas e componentes bem alinhados.
Um template pronto para apresentar um produto e seu conjunto de skills.
</p>
<div class="d-flex flex-column flex-sm-row gap-2">
<a class="btn btn-primary btn-lg" href="#cta">Usar este template</a>
<a class="btn btn-outline-light btn-lg" href="#recursos-refinados">Explorar seções</a>
</div>
<div class="mt-4 d-flex flex-wrap gap-2">
<span class="badge text-bg-secondary">Tema escuro</span>
<span class="badge text-bg-secondary">Grid responsivo</span>
<span class="badge text-bg-secondary">FAQ com accordion</span>
<span class="badge text-bg-secondary">CTA destacado</span>
</div>
</div>
<div class="col-12 col-lg-5">
<div class="p-4 p-md-5 border rounded-4 bg-body-tertiary">
<h2 class="h5 fw-semibold mb-3" id="visao-geral">Visão geral</h2>
<p class="text-body-secondary mb-4">
Skills padronizam como a IA planeja, escreve e revisa entregas.
Em um layout, isso aparece como hierarquia, consistência e decisões menos aleatórias.
</p>
<div class="d-grid gap-2">
<a class="btn btn-outline-primary" href="https://antigravity.google/" target="_blank" rel="noopener noreferrer">Abrir Antigravity</a>
<a class="btn btn-outline-secondary" href="https://github.com/sickn33/antigravity-awesome-skills" target="_blank" rel="noopener noreferrer">Abrir repositório de skills</a>
</div>
</div>
</div>
</div>
</div>
</header>
<section id="beneficios-refinados" class="py-5 border-top">
<div class="container">
<div class="row align-items-end g-3 mb-3">
<div class="col-12 col-lg-8">
<h2 class="h3 fw-bold mb-2">Benefícios que aparecem no resultado final</h2>
<p class="text-body-secondary mb-0">
Benefícios descrevem impactos práticos e ajudam a orientar o layout e a copy.
A estrutura abaixo reforça clareza, consistência e velocidade de iteração.
</p>
</div>
</div>
<div class="row g-3">
<div class="col-12 col-md-6 col-lg-4">
<div class="card h-100 border rounded-4">
<div class="card-body">
<div class="d-flex align-items-center gap-2 mb-2">
<span class="badge text-bg-primary">Consistência</span>
<span class="text-body-secondary small">UI/UX</span>
</div>
<h3 class="h5 fw-semibold">Padrões visuais previsíveis</h3>
<p class="text-body-secondary mb-0">
Espaçamentos, títulos e componentes seguem uma lógica.
Isso reduz a sensação de “colagem” entre seções.
</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card h-100 border rounded-4">
<div class="card-body">
<div class="d-flex align-items-center gap-2 mb-2">
<span class="badge text-bg-success">Velocidade</span>
<span class="text-body-secondary small">Front-end</span>
</div>
<h3 class="h5 fw-semibold">Menos retrabalho</h3>
<p class="text-body-secondary mb-0">
A estrutura vem pronta e o refinamento acontece por iterações.
Alterações ficam localizadas e previsíveis.
</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card h-100 border rounded-4">
<div class="card-body">
<div class="d-flex align-items-center gap-2 mb-2">
<span class="badge text-bg-warning">Clareza</span>
<span class="text-body-secondary small">Copy</span>
</div>
<h3 class="h5 fw-semibold">Texto orientado a valor</h3>
<p class="text-body-secondary mb-0">
Títulos e descrições explicam o “porquê” de cada seção.
O conteúdo fica mais fácil de manter e evoluir.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="recursos-refinados" class="py-5">
<div class="container">
<h2 class="h3 fw-bold mb-2">Recursos comuns em uma landing page completa</h2>
<p class="text-body-secondary">
A lista abaixo organiza recursos por função, mantendo blocos curtos e escaneáveis.
Esse padrão ajuda a manter legibilidade em telas menores.
</p>
<div class="row g-3">
<div class="col-12 col-lg-4">
<div class="p-4 border rounded-4 h-100">
<h3 class="h5 fw-semibold">Seções com propósito</h3>
<p class="text-body-secondary mb-0">
Herói, benefícios, recursos, FAQ e CTA final.
Cada seção tem um motivo claro para existir.
</p>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="p-4 border rounded-4 h-100">
<h3 class="h5 fw-semibold">Componentes do Bootstrap</h3>
<p class="text-body-secondary mb-0">
Cards, badges, navbar, accordion e botões.
Tudo com classes utilitárias e sem CSS obrigatório.
</p>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="p-4 border rounded-4 h-100">
<h3 class="h5 fw-semibold">Tema escuro controlado</h3>
<p class="text-body-secondary mb-0">
Uso de data-bs-theme para consistência.
Contraste e legibilidade ficam mais previsíveis.
</p>
</div>
</div>
</div>
</div>
</section>
<section id="faq" class="py-5 border-top">
<div class="container">
<h2 class="h3 fw-bold mb-2">FAQ</h2>
<p class="text-body-secondary">
Perguntas frequentes reduzem dúvidas comuns e ajudam a organizar conceitos essenciais.
O accordion mantém a seção compacta e fácil de navegar.
</p>
<div class="accordion" id="faqAccordion">
<div class="accordion-item">
<h3 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq1" aria-expanded="true" aria-controls="faq1">
O que muda ao usar skills?
</button>
</h3>
<div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
<div class="accordion-body text-body-secondary">
Skills definem instruções reutilizáveis para tarefas.
Isso aumenta consistência e reduz retrabalho em entregas repetidas.
</div>
</div>
</div>
<div class="accordion-item">
<h3 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2" aria-expanded="false" aria-controls="faq2">
Por que clonar em .agent/skills?
</button>
</h3>
<div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
<div class="accordion-body text-body-secondary">
Muitas ferramentas reconhecem esse caminho automaticamente.
Isso facilita compatibilidade e padroniza o setup do projeto.
</div>
</div>
</div>
<div class="accordion-item">
<h3 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq3" aria-expanded="false" aria-controls="faq3">
Bootstrap já basta para um bom design?
</button>
</h3>
<div id="faq3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
<div class="accordion-body text-body-secondary">
Bootstrap fornece componentes e grid sólidos.
O diferencial vem de decisões consistentes de hierarquia, espaçamento e copy.
</div>
</div>
</div>
</div>
</div>
</section>
<section id="cta" class="py-5 border-top bg-body-tertiary">
<div class="container">
<div class="row align-items-center g-3">
<div class="col-12 col-lg-8">
<h2 class="h3 fw-bold mb-2">Fechamento com CTA claro</h2>
<p class="text-body-secondary mb-0">
Um bom fim de página resume o valor e destaca a ação principal.
O layout reforça foco e reduz distrações.
</p>
</div>
<div class="col-12 col-lg-4">
<div class="d-grid gap-2">
<a class="btn btn-primary btn-lg" href="https://github.com/sickn33/antigravity-awesome-skills" target="_blank" rel="noopener noreferrer">
Ver skills no GitHub
</a>
<a class="btn btn-outline-light btn-lg" href="https://antigravity.google/" target="_blank" rel="noopener noreferrer">
Abrir Antigravity
</a>
</div>
</div>
</div>
</div>
</section>
<footer class="py-4 border-top">
<div class="container">
<div class="d-flex flex-column flex-md-row justify-content-between gap-2">
<p class="mb-0 text-body-secondary">© 2026 Landing page de exemplo em Bootstrap 5.3.8.</p>
<p class="mb-0 text-body-secondary">Estrutura completa, pronta para adaptação.</p>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Boas práticas ao manter uma biblioteca grande de skills
Uma biblioteca com centenas de skills tende a ficar mais útil quando existe um padrão de organização e nomenclatura. Mesmo quando as pastas já vêm prontas, é comum selecionar um subconjunto “ativo” para um projeto específico, reduzindo ruído. Também ajuda manter uma convenção de como chamar skills e quando combiná-las. Em projetos com equipe, consistência de uso evita que cada pessoa invente um fluxo diferente.
Outro ponto importante é versionamento e atualização. Ao usar Git, atualizar skills é simples, mas mudanças podem alterar comportamentos esperados. Em cenários mais controlados, pode-se fixar uma versão (por commit) e atualizar em momentos definidos. Isso evita que uma atualização inesperada mude o estilo de entrega no meio de um ciclo. A previsibilidade é parte essencial do valor das skills.
Encerramento e conclusão
Skills no Antigravity funcionam como um mecanismo de padronização de trabalho com IA, trazendo instruções reutilizáveis que aumentam consistência e reduzem retrabalho. O repositório Antigravity Awesome Skills se destaca por reunir um conjunto amplo de skills em formato universal, cobrindo desde desenvolvimento e planejamento até design e crescimento. Ao instalar as skills em .agent/skills e acioná-las conforme o tipo de tarefa, o fluxo de construção tende a ficar mais previsível e orientado por critérios.
Na criação de uma landing page com Bootstrap 5.3.8, a diferença entre “sem skills” e “com skills” aparece principalmente na coesão do layout, na hierarquia visual e na clareza do texto. O exemplo simples atende ao básico, enquanto o exemplo refinado mostra decisões mais consistentes usando apenas recursos do próprio Bootstrap. Com esse tipo de estrutura, a página ganha início, meio e fim claros, mantendo um resultado autossuficiente e fácil de evoluir dentro do mesmo padrão.