webflow/webflow-skills

Melhores Práticas do CMS

Forneça orientação especializada sobre arquitetura, relacionamentos, otimização e solução de problemas do CMS do Webflow.

Nota Importante

SEMPRE use as ferramentas MCP do Webflow para todas as operações:

• Use webflow_guide_tool do Webflow MCP para obter as melhores práticas antes de começar
• Use data_sites_tool do Webflow MCP com ação list_sites para identificar sites disponíveis
• Use data_sites_tool do Webflow MCP com ação get_site para recuperar detalhes do site e limites do plano
• Use data_cms_tool do Webflow MCP com ação get_collection_list para analisar coleções existentes
• Use data_cms_tool do Webflow MCP com ação get_collection_details para examinar esquemas de coleção
• Use data_cms_tool do Webflow MCP com ação list_collection_items para avaliar o volume de conteúdo
• Use data_pages_tool do Webflow MCP com ação list_pages para entender a estrutura das páginas
• Use ask_webflow_ai para perguntas específicas sobre a API
• NÃO use outras ferramentas ou métodos para operações no Webflow
• Todas as chamadas de ferramenta devem incluir o parâmetro context obrigatório (15-25 palavras, perspectiva em terceira pessoa)

Instruções

Fase 1: Descoberta e Análise

1. Identificar a solicitação: Determine se o usuário está:
   • Planejando uma nova estrutura de CMS
   • Otimizando coleções existentes
   • Solucionando problemas de desempenho
   • Configurando relacionamentos
   • Buscando orientação de arquitetura
2. Obter informações do site: Use data_sites_tool do Webflow MCP com as ações list_sites e get_site para entender os limites do plano
3. Analisar estrutura existente: Use data_cms_tool do Webflow MCP com as ações get_collection_list e get_collection_details para examinar a configuração atual
4. Avaliar volume de conteúdo: Use data_cms_tool do Webflow MCP com a ação list_collection_items para entender a escala
5. Revisar páginas: Use data_pages_tool do Webflow MCP com a ação list_pages para ver como o conteúdo é exibido

Fase 2: Levantamento de Requisitos

6. Entender o caso de uso: Faça perguntas esclarecedoras:
   • Qual conteúdo precisa ser gerenciado?
   • Quem atualizará o conteúdo?
   • Como o conteúdo será exibido?
   • Quais relacionamentos são necessários?
   • Volume de conteúdo esperado?
7. Identificar restrições: Considere limites do plano, restrições técnicas, habilidades da equipe
8. Definir critérios de sucesso: Metas de desempenho, fluxo editorial, necessidades de escalabilidade

Fase 3: Planejamento da Arquitetura

9. Projetar estrutura da coleção: Planeje coleções, campos e relacionamentos
10. Selecionar tipos de campo: Escolha os tipos de campo apropriados para cada elemento de conteúdo
11. Planejar relacionamentos: Projete conexões um-para-muitos e muitos-para-muitos
12. Considerar taxonomia: Determine categorias, tags e estrutura organizacional
13. Planejar para escala: Projete para crescimento (paginação, desempenho, limites)
14. Documentar decisões: Explique compensações e raciocínio

Fase 4: Recomendações e Validação

15. Gerar recomendações: Forneça orientação específica e acionável
16. Priorizar mudanças: Organize por impacto (vitórias rápidas vs. longo prazo)
17. Explicar compensações: Ajude os usuários a entender limitações e alternativas
18. Validar em relação às melhores práticas: Verifique em relação às limitações e padrões do Webflow
19. Fornecer alternativas: Ofereça múltiplas abordagens quando aplicável
20. Criar roteiro de implementação: Divida em fases

Fase 5: Orientação de Implementação

21. Fornecer instruções passo a passo: Orientação clara para implementação
22. Oferecer assistência: Sugira o uso de outras skills (cms-collection-setup, bulk-cms-update)
23. Documentar estrutura: Recomende documentação para referência da equipe
24. Sugerir abordagem de teste: Oriente sobre como validar as mudanças
25. Planejar migração: Se estiver refatorando, forneça uma estratégia de migração

Arquitetura da Coleção

Quando Usar CMS vs Estático

Use CMS quando:

• O conteúdo é atualizado com frequência (semanalmente ou mais)
• Múltiplos itens semelhantes (posts de blog, produtos, membros da equipe, projetos)
• Usuários não técnicos precisam editar conteúdo
• O conteúdo precisa de filtragem/classificação no frontend
• O mesmo conteúdo aparece em várias páginas (biografias de autores, características de produtos)
• O conteúdo segue uma estrutura consistente entre os itens
• Você precisa gerar páginas dinamicamente

Use Estático quando:

• O conteúdo raramente muda (atualizações anuais ou menos)
• Seções únicas e pontuais (hero da página sobre, recursos especiais da página inicial)
• Layouts personalizados complexos por item que não seguem padrões
• Não há necessidade de filtragem ou busca dinâmica
• O conteúdo é altamente personalizado e não compartilha estrutura
• O desempenho é crítico e o conteúdo não muda
• Você precisa de total flexibilidade de design por seção

Abordagem Híbrida:

• Páginas estáticas com seções orientadas por CMS (ex.: página inicial estática com depoimentos do CMS)
• CMS para conteúdo recente, arquivos estáticos para conteúdo antigo
• Landing pages estáticas, CMS para subpáginas

Seleção do Tipo de Campo

Tipo de Conteúdo	Campo Recomendado	Notas	Limites de Caracteres
Texto curto	Texto Simples	Títulos, nomes, slugs	Máx. 256 caracteres
Texto longo (sem formatação)	Texto Simples (longo)	Descrições, excertos	Ilimitado
Conteúdo formatado	Rich Text	Conteúdo de blog, biografias, artigos	Ilimitado
Imagem única	Imagem	Fotos, miniaturas, cabeçalhos	Máx. 4MB por imagem
Múltiplas imagens	Multi-imagem	Galerias, fotos de produtos	Até 25 imagens
Downloads de arquivo	Arquivo	PDFs, documentos, downloads	Máx. 4MB por arquivo
Valores Sim/Não	Interruptor	Sinalizadores de destaque, alternâncias de visibilidade	Booleano
Escolha única	Opção	Status, tipo, categoria	Opções ilimitadas
Data/hora	Data/Hora	Datas de publicação, eventos, prazos	Formato ISO 8601
Link para um item	Referência	Autor → Post, Categoria → Post	Um item
Link para vários itens	Multirreferência	Post → Tags, Post → Posts Relacionados	Vários itens
URL externa	Link	Links de redes sociais, recursos externos	Máx. 2048 caracteres
Valores numéricos	Número	Preços, avaliações, ordem, contagens	Inteiro ou decimal
Números de telefone	Telefone	Números de contato	Formato E.164
Endereços de email	Email	Emails de contato	Formato de email válido
Valores de cor	Cor	Cores de tema, destaques, cores da marca	Formato Hex
Incorporações de vídeo	Vídeo	Incorporações do YouTube, Vimeo	URL de incorporação

Árvore de Decisão do Tipo de Campo

Precisa armazenar:
├── Texto?
│   ├── Curto (≤256 caracteres)? → Texto Simples
│   ├── Longo + Formatação? → Rich Text
│   └── Longo + Sem Formatação? → Texto Simples (longo)
├── Mídia?
│   ├── Imagem única? → Imagem
│   ├── Múltiplas imagens? → Multi-imagem
│   ├── Vídeo? → Vídeo
│   └── Download de arquivo? → Arquivo
├── Escolha/Seleção?
│   ├── Sim/Não? → Interruptor
│   ├── Uma opção? → Opção
│   └── Link para item? → Referência/Multirreferência
├── Dados estruturados?
│   ├── Número? → Número
│   ├── Data/Hora? → Data/Hora
│   ├── Telefone? → Telefone
│   ├── Email? → Email
│   └── URL? → Link
└── Visual?
    └── Cor? → Cor

Padrões de Relacionamento

Um-para-Muitos (Campo de Referência)

Exemplo: Posts → Autor

Coleção Autores:
├── nome (Texto, obrigatório)
├── slug (Texto, obrigatório)
├── biografia (Rich Text)
├── foto (Imagem)
├── titulo (Texto) - cargo
├── email (Email)
└── links-sociais (Link)

Coleção Posts:
├── titulo (Texto, obrigatório)
├── slug (Texto, obrigatório)
├── conteudo (Rich Text)
└── autor (Referência → Autores)  ← Cada post tem UM autor

Exibição: Na página do post, acesse autor.nome, autor.foto, autor.biografia

Filtragem: Pode filtrar posts por autor específico

Vantagens:

• ✅ Dados centralizados do autor (atualize uma vez, reflita em todos os lugares)
• ✅ Fácil de manter a consistência
• ✅ Pode criar páginas de perfil do autor mostrando todos os seus posts
• ✅ Eficiente (uma referência por post)

Casos de uso:

• Posts de blog → Autor
• Produtos → Marca
• Eventos → Local
• Projetos → Cliente
• Depoimentos → Cliente

Muitos-para-Muitos (Multirreferência)

Exemplo: Posts ↔ Tags

Coleção Tags:
├── nome (Texto, obrigatório)
├── slug (Texto, obrigatório)
├── descricao (Texto Simples)
└── cor (Cor) - agrupamento visual opcional

Coleção Posts:
├── titulo (Texto, obrigatório)
├── slug (Texto, obrigatório)
├── conteudo (Rich Text)
└── tags (Multirreferência → Tags)  ← Cada post tem MUITAS tags

Exibição: Na página do post, percorra tags para mostrar todas as tags

Filtragem: Pode filtrar posts por tag específica

Vantagens:

• ✅ Organização flexível do conteúdo
• ✅ Vinculação cruzada de conteúdo relacionado
• ✅ Melhor SEO (agrupamento de tópicos)
• ✅ Navegação aprimorada para o usuário

Limitações:

• ⚠️ Máx. 5 campos de multirreferência por coleção
• ⚠️ Só pode filtrar por UM valor de multirreferência por vez em listas de coleção
• ⚠️ Não é possível classificar por valores de campos referenciados
• ⚠️ Cada referência = consulta adicional (impacta o desempenho)

Soluções alternativas para filtragem de múltiplas tags:

1. Crie tags combinadas (ex.: "vegano-sem-glúten")
2. Use o Filtro CMS Finsweet para filtragem no lado do cliente
3. Crie listas de coleção filtradas separadas para combinações comuns
4. Use código personalizado com a API Webflow

Casos de uso:

• Posts de blog ↔ Tags
• Produtos ↔ Características
• Projetos ↔ Tecnologias
• Receitas ↔ Ingredientes
• Cursos ↔ Tópicos

Auto-Referência (Coleções Aninhadas)

Exemplo: Categorias com subcategorias

Coleção Categorias:
├── nome (Texto, obrigatório)
├── slug (Texto, obrigatório)
├── descricao (Texto Simples)
├── pai (Referência → Categorias)  ← Auto-referência para hierarquia
└── nivel (Número) - 1, 2, 3 para lógica de exibição

Casos de uso:

• Categorias com subcategorias
• Itens de menu com sub-itens de menu
• Hierarquia organizacional
• Taxonomia de produtos

Vantagens:

• ✅ Hierarquia flexível
• ✅ Profundidade ilimitada (teoricamente)
• ✅ Fácil de reorganizar

Limitações:

• ⚠️ Complexo para exibir níveis aninhados no Webflow
• ⚠️ Recomenda-se no máximo 2-3 níveis para implementação prática
• ⚠️ Requer lógica personalizada para aninhamento profundo

Alternativa: Use campo Opção para categorização simples de 1-2 níveis

Relacionamentos Bidirecionais

Exemplo: Posts Relacionados

Coleção Posts:
├── titulo (Texto, obrigatório)
├── slug (Texto, obrigatório)
├── conteudo (Rich Text)
└── posts-relacionados (Multirreferência → Posts)  ← Auto-referência para outros posts

Exibição: Mostre posts relacionados na parte inferior da página do post

Vantagens:

• ✅ Mantém os usuários engajados por mais tempo
• ✅ Melhor SEO (vinculação interna)
• ✅ Conexões de conteúdo flexíveis

Desafios:

• ⚠️ Não é verdadeiramente bidirecional (A → B não cria automaticamente B → A)
• ⚠️ Deve manter manualmente ambas as direções, se necessário
• ⚠️ Pode ser demorado para editores de conteúdo

Soluções:

1. Use tags para lógica automática de "relacionado por tag"
2. Curadoria manual para as conexões mais importantes
3. Híbrido: Manual + automatizado com base em tags/categoria

Exemplos

Exemplo 1: Planejando Nova Estrutura de CMS

Prompt do usuário:

Estou construindo um site de receitas. Como devo estruturar o CMS?

Passo 1: Levantamento de Requisitos

📐 Planejamento CMS: Site de Receitas

Deixe-me fazer algumas perguntas para projetar a melhor estrutura:

1. **Volume de Conteúdo**: Quantas receitas você planeja ter?
   - Pequeno (≤50): Estrutura simples
   - Médio (50-200): Organização moderada
   - Grande (200+): Taxonomia avançada necessária

2. **Atributos da Receita**: Quais informações cada receita terá?
   - Básicas: Nome, ingredientes, instruções, imagem
   - Avançadas: Tempo de preparo, tempo de cozimento, dificuldade, nutrição, tags dietéticas

3. **Necessidades de Organização**: Como os usuários encontrarão receitas?
   - Por tipo de refeição (café da manhã, almoço, jantar)
   - Por culinária (italiana, mexicana, asiática)
   - Por restrições alimentares (vegano, sem glúten, keto)
   - Por método de cozimento (assar, grelhar, panela lenta)
   - Por ingredientes (frango, massa, vegetais)

4. **Configuração de Autor**: Único ou múltiplos autores?
   - Único: Você gerencia todo o conteúdo
   - Múltiplos: Equipe de criadores de receitas

5. **Engajamento do Usuário**: Quais recursos interativos?
   - Comentários/avaliações
   - Classificações
   - Salvar favoritos
   - Cartões de receita para imprimir

Com base em suas respostas, projetarei a arquitetura de CMS ideal.

Passo 2: Após o Usuário Responder

📐 Arquitetura de CMS Recomendada: Site de Receitas

Com base em seus requisitos (Volume médio, Vários autores, Filtragem avançada):

---

## Coleções Necessárias: 4

### 1. Receitas (Conteúdo Principal)
├── nome (Texto, obrigatório) - "Massa Carbonara Caseira"
├── slug (Texto, obrigatório) - "massa-carbonara-caseira"
├── descricao (Texto Simples, 160 caracteres) - Resumo breve para SEO
├── imagem-destacada (Imagem) - Imagem hero para página de detalhes
├── imagem-miniatura (Imagem) - Imagem menor para cartões de grade
├── tempo-preparo (Número, obrigatório) - Minutos de preparo
├── tempo-cozimento (Número, obrigatório) - Minutos de cozimento
├── tempo-total (Número) - Calculado automaticamente ou manual
├── porcoes (Número, obrigatório) - Número de porções
├── dificuldade (Opção: Fácil, Médio, Difícil)
├── ingredientes (Rich Text, obrigatório) - Lista de ingredientes com quantidades
├── instruções (Rich Text, obrigatório) - Instruções passo a passo
├── notas (Rich Text) - Notas do cozinheiro, dicas, substituições
├── info-nutricional (Texto Simples) - Calorias, proteína, etc.
├── autor (Referência → Autores, obrigatório)
├── categoria (Referência → Categorias, obrigatório) - Tipo de refeição principal
├── culinaria (Referência → Culinarias) - Italiana, Mexicana, etc.
├── tags-dieteticas (Multirreferência → Tags Dietéticas) - Vegano, GF, etc.
├── metodos-cozimento (Multirreferência → Métodos) - Assar, Grelhar, etc.
├── destaque (Interruptor) - Destacar na página inicial
├── data-publicacao (Data, obrigatório)
└── contagem-visualizacoes (Número) - Rastrear popularidade

**Total de campos:** 22 campos
**Plano necessário:** Plano CMS mínimo (20 coleções, 2000 itens)

### 2. Autores
├── nome (Texto, obrigatório)
├── slug (Texto, obrigatório)
├── titulo (Texto) - "Chef Principal", "Desenvolvedor de Receitas"
├── biografia (Rich Text)
├── foto (Imagem)
├── especialidade (Texto Simples) - "Culinária Italiana", "Panificação"
├── social-instagram (Link)
├── social-site (Link)
└── email (Email)

**Propósito:** Informações reutilizáveis do autor em todas as receitas

### 3. Categorias
├── nome (Texto, obrigatório) - "Café da Manhã", "Almoço", "Jantar", "Sobremesas"
├── slug (Texto, obrigatório)
├── descricao (Texto Simples)
├── imagem (Imagem) - Imagem hero da categoria
├── cor (Cor) - Destaque visual para cartões de categoria
└── ordem (Número) - Controle de ordenação personalizada

...