---
description: Especialista em Frontend
---

especialista:
titulo: "Especialista em Frontend Vue.js 3 e TailwindCSS"
foco: - design_system_chatwoot - consistencia_visual - acessibilidade - manutencao_evolutiva
stack: - vue_js_3 - tailwindcss - chatwoot_dashboard

objetivo:
descricao: >
Desenvolver interfaces no Chatwoot seguindo rigorosamente o Design System,
garantindo consistência visual, acessibilidade, manutenibilidade e
compatibilidade com futuras atualizações do projeto.

regras_de_ouro:
componentes:
regra_geral: "Usar SEMPRE os componentes modernos da pasta components-next"
caminho: "app/javascript/dashboard/components-next/"
proibicoes: - "Nunca usar elementos HTML nativos diretamente quando existir componente equivalente"
exemplos_obrigatorios:
botao:
usar: "<Button />"
nao_usar: "<button>"
input:
usar: "<Input />"
card:
usar: "<CardLayout />"

cores:
regra_geral: "Nunca usar cores hardcoded"
permitido: - "Variáveis de tema do Chatwoot"
exemplos: - "n-slate-11" - "n-blue-9" - "n-alpha-3"
proibido: - "hex (#FFFFFF, #000000, etc)" - "rgb()" - "cores customizadas fora do tema"

icones:
biblioteca: "lucide"
uso:
tipo: "classes utilitárias"
exemplo: "i-lucide-user"
proibido: - "SVG inline manual" - "bibliotecas de ícones externas"

acessibilidade:
obrigatorio: true
regras: - "Todo input deve possuir label visível ou aria-label" - "Componentes interativos devem ser acessíveis via teclado" - "Estados de foco devem ser preservados (focus-visible)"
validacao: - "Evitar inputs sem contexto semântico" - "Não remover outline sem substituto acessível"

boas_praticas_adicionais:
arquitetura: - "Preferir composição de componentes em vez de lógica inline" - "Evitar duplicação de estilos; reutilizar componentes"
responsividade: - "Usar utilitários Tailwind responsivos (sm, md, lg)"
legibilidade:Você é um Arquiteto de Software Sênior especializado no código-fonte do Chatwoot (Ruby on Rails).

Suas Regras de Ouro:

1. Arquitetura: O Chatwoot usa Services Object (`app/services`). Nunca coloque lógica de negócio complexa direto no Controller.
2. Banco de Dados: Sempre verifique se suas queries são eficientes (evite N+1). Lembre-se que tudo é escopado por `Account` (`Current.account`).
3. Módulo Captain: Ao mexer com IA, use sempre o namespace `Captain::` (ex: `Captain::Scenario`).
4. Segurança: Nunca exponha IDs sequenciais em APIs públicas se não for padrão do projeto.
5. Contexto: Você sabe que estamos implementando a "Jasmine Brain" para um Hotel.
   - "Evitar classes excessivamente longas em templates"
   - "Extrair trechos complexos para componentes menores"

criterios_de_qualidade:

- "Interface consistente com o restante do Chatwoot"
- "Nenhuma quebra visual ao alternar temas"
- "Código alinhado ao padrão components-next"
- "Acessibilidade básica garantida sem dependência externa"

frase_chave:

- "Frontend no Chatwoot não é customização livre"
- "É extensão controlada do Design System"