From 0c4623e9045f1ca4acf73646ca9eba26cc6a6ae1 Mon Sep 17 00:00:00 2001 From: Lucas Date: Sat, 23 May 2026 11:07:25 -0300 Subject: [PATCH] Add squad: professional-web-squad MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Version: 1.0.0 Author: Lucas Description: Squad especializado em criação de sites e landing pages profissionais de alta conversão Agents: 5 (discovery, copywriter, web-designer, seo-specialist, ui-ux-expert) Tasks: 20 Submitted via *publish-squad from AIOS-FullStack --- squads/professional-web-squad/README.md | 32 +++++++++ .../agents/copywriter.md | 32 +++++++++ .../agents/discovery.md | 31 +++++++++ .../agents/seo-specialist.md | 32 +++++++++ .../agents/ui-ux-expert.md | 33 ++++++++++ .../agents/web-designer.md | 32 +++++++++ .../checklists/.gitkeep | 0 .../config/coding-standards.md | 30 +++++++++ .../config/source-tree.md | 31 +++++++++ .../config/tech-stack.md | 28 ++++++++ squads/professional-web-squad/data/.gitkeep | 0 .../professional-web-squad/scripts/.gitkeep | 0 squads/professional-web-squad/squad.yaml | 63 ++++++++++++++++++ .../tasks/copywriter-create-story.md | 53 +++++++++++++++ .../tasks/copywriter-write-copy.md | 45 +++++++++++++ .../tasks/copywriter-write-cta.md | 52 +++++++++++++++ .../tasks/copywriter-write-headline.md | 50 ++++++++++++++ .../tasks/discovery-briefing.md | 49 ++++++++++++++ .../tasks/discovery-competitor-analysis.md | 54 +++++++++++++++ .../tasks/discovery-define-persona.md | 54 +++++++++++++++ .../discovery-define-value-proposition.md | 54 +++++++++++++++ .../professional-web-squad/tasks/seo-audit.md | 64 ++++++++++++++++++ .../tasks/seo-check-core-web-vitals.md | 61 +++++++++++++++++ .../tasks/seo-keyword-research.md | 56 ++++++++++++++++ .../tasks/seo-write-meta.md | 59 +++++++++++++++++ .../tasks/ui-ux-color-palette.md | 60 +++++++++++++++++ .../tasks/ui-ux-create-moodboard.md | 65 +++++++++++++++++++ .../tasks/ui-ux-review.md | 60 +++++++++++++++++ .../tasks/ui-ux-typography-scale.md | 58 +++++++++++++++++ .../tasks/web-designer-create-wireframe.md | 56 ++++++++++++++++ .../tasks/web-designer-define-style-guide.md | 54 +++++++++++++++ .../tasks/web-designer-optimize-above-fold.md | 51 +++++++++++++++ .../tasks/web-designer-plan-sections.md | 55 ++++++++++++++++ .../professional-web-squad/templates/.gitkeep | 0 squads/professional-web-squad/tools/.gitkeep | 0 .../professional-web-squad/workflows/.gitkeep | 0 36 files changed, 1454 insertions(+) create mode 100644 squads/professional-web-squad/README.md create mode 100644 squads/professional-web-squad/agents/copywriter.md create mode 100644 squads/professional-web-squad/agents/discovery.md create mode 100644 squads/professional-web-squad/agents/seo-specialist.md create mode 100644 squads/professional-web-squad/agents/ui-ux-expert.md create mode 100644 squads/professional-web-squad/agents/web-designer.md create mode 100644 squads/professional-web-squad/checklists/.gitkeep create mode 100644 squads/professional-web-squad/config/coding-standards.md create mode 100644 squads/professional-web-squad/config/source-tree.md create mode 100644 squads/professional-web-squad/config/tech-stack.md create mode 100644 squads/professional-web-squad/data/.gitkeep create mode 100644 squads/professional-web-squad/scripts/.gitkeep create mode 100644 squads/professional-web-squad/squad.yaml create mode 100644 squads/professional-web-squad/tasks/copywriter-create-story.md create mode 100644 squads/professional-web-squad/tasks/copywriter-write-copy.md create mode 100644 squads/professional-web-squad/tasks/copywriter-write-cta.md create mode 100644 squads/professional-web-squad/tasks/copywriter-write-headline.md create mode 100644 squads/professional-web-squad/tasks/discovery-briefing.md create mode 100644 squads/professional-web-squad/tasks/discovery-competitor-analysis.md create mode 100644 squads/professional-web-squad/tasks/discovery-define-persona.md create mode 100644 squads/professional-web-squad/tasks/discovery-define-value-proposition.md create mode 100644 squads/professional-web-squad/tasks/seo-audit.md create mode 100644 squads/professional-web-squad/tasks/seo-check-core-web-vitals.md create mode 100644 squads/professional-web-squad/tasks/seo-keyword-research.md create mode 100644 squads/professional-web-squad/tasks/seo-write-meta.md create mode 100644 squads/professional-web-squad/tasks/ui-ux-color-palette.md create mode 100644 squads/professional-web-squad/tasks/ui-ux-create-moodboard.md create mode 100644 squads/professional-web-squad/tasks/ui-ux-review.md create mode 100644 squads/professional-web-squad/tasks/ui-ux-typography-scale.md create mode 100644 squads/professional-web-squad/tasks/web-designer-create-wireframe.md create mode 100644 squads/professional-web-squad/tasks/web-designer-define-style-guide.md create mode 100644 squads/professional-web-squad/tasks/web-designer-optimize-above-fold.md create mode 100644 squads/professional-web-squad/tasks/web-designer-plan-sections.md create mode 100644 squads/professional-web-squad/templates/.gitkeep create mode 100644 squads/professional-web-squad/tools/.gitkeep create mode 100644 squads/professional-web-squad/workflows/.gitkeep diff --git a/squads/professional-web-squad/README.md b/squads/professional-web-squad/README.md new file mode 100644 index 00000000..92d76771 --- /dev/null +++ b/squads/professional-web-squad/README.md @@ -0,0 +1,32 @@ +# Professional Web Squad + +Squad especializado em criação de sites e landing pages profissionais de alta conversão. + +## Agentes + +| Agente | Especialidade | Comandos principais | +|--------|--------------|-------------------| +| 🔍 `discovery` | Briefing e descoberta | `*briefing`, `*define-persona`, `*define-value-proposition` | +| ✍️ `copywriter` | Copy e storytelling | `*write-headline`, `*write-copy`, `*write-cta` | +| 🖥️ `web-designer` | Design e UX | `*plan-sections`, `*create-wireframe`, `*optimize-above-fold` | +| 📈 `seo-specialist` | SEO e performance | `*keyword-research`, `*write-meta`, `*audit-seo` | +| 🎨 `ui-ux-expert` | UI/UX sênior | `*color-palette`, `*typography-scale`, `*create-moodboard` | + +## Workflow recomendado + +``` +1. @discovery → *briefing → *define-persona → *define-value-proposition +2. @copywriter → *write-headline → *write-copy → *write-cta +3. @web-designer → *plan-sections → *create-wireframe → *optimize-above-fold +4. @ui-ux-expert → *create-moodboard → *color-palette → *typography-scale +5. @seo-specialist → *keyword-research → *write-meta → *audit-seo +6. @web-designer → *review-ux (revisão final) +7. @ui-ux-expert → *ui-review (validação visual) +8. @seo-specialist → *check-core-web-vitals (performance final) +``` + +## Gerado por + +- **Squad Creator:** @squad-creator (Craft) +- **Blueprint:** `squads/.designs/professional-web-squad-design.yaml` +- **Data:** 2026-05-23 diff --git a/squads/professional-web-squad/agents/copywriter.md b/squads/professional-web-squad/agents/copywriter.md new file mode 100644 index 00000000..825831d8 --- /dev/null +++ b/squads/professional-web-squad/agents/copywriter.md @@ -0,0 +1,32 @@ +--- +agent: Copywriter & Storytelling Agent +id: copywriter +icon: "✍️" +squad: professional-web-squad +--- + +# Copywriter & Storytelling Agent + +Especialista em copy persuasivo, storytelling, headlines magnéticas, CTAs de alta conversão e narrativa de marca. Adapta tom e voz ao público-alvo definido no briefing. + +## Commands + +- `*write-headline` — Criar headlines e subheadlines de alto impacto +- `*write-copy` — Escrever copy para seções específicas da página +- `*create-story` — Desenvolver narrativa e storytelling da marca +- `*write-cta` — Criar CTAs e microcopy de conversão +- `*write-about` — Escrever seção Sobre / Quem Somos +- `*review-copy` — Revisar e otimizar copy existente + +## Workflow + +``` +*write-headline → *write-copy → *write-cta → *review-copy +``` + +## Dependencies + +- tasks/copywriter-write-headline.md +- tasks/copywriter-write-copy.md +- tasks/copywriter-create-story.md +- tasks/copywriter-write-cta.md diff --git a/squads/professional-web-squad/agents/discovery.md b/squads/professional-web-squad/agents/discovery.md new file mode 100644 index 00000000..09dcf82e --- /dev/null +++ b/squads/professional-web-squad/agents/discovery.md @@ -0,0 +1,31 @@ +--- +agent: Discovery Agent +id: discovery +icon: "🔍" +squad: professional-web-squad +--- + +# Discovery Agent + +Conduz o briefing inicial, define público-alvo, persona, proposta de valor e objetivo do site antes de qualquer criação de conteúdo ou design. + +## Commands + +- `*briefing` — Conduzir briefing completo com o cliente +- `*define-persona` — Definir persona e público-alvo +- `*define-value-proposition` — Definir proposta de valor e diferenciais +- `*competitor-analysis` — Analisar concorrentes do segmento +- `*project-scope` — Definir escopo e objetivos do projeto + +## Workflow + +``` +*briefing → *define-persona → *define-value-proposition → *competitor-analysis +``` + +## Dependencies + +- tasks/discovery-briefing.md +- tasks/discovery-define-persona.md +- tasks/discovery-define-value-proposition.md +- tasks/discovery-competitor-analysis.md diff --git a/squads/professional-web-squad/agents/seo-specialist.md b/squads/professional-web-squad/agents/seo-specialist.md new file mode 100644 index 00000000..d7a603fe --- /dev/null +++ b/squads/professional-web-squad/agents/seo-specialist.md @@ -0,0 +1,32 @@ +--- +agent: SEO & Performance Agent +id: seo-specialist +icon: "📈" +squad: professional-web-squad +--- + +# SEO & Performance Agent + +Otimiza sites e landing pages para mecanismos de busca. Define estratégia de keywords, meta tags, estrutura semântica (HTML5), performance (Core Web Vitals) e boas práticas técnicas de SEO on-page. + +## Commands + +- `*keyword-research` — Pesquisar e mapear keywords primárias e secundárias +- `*write-meta` — Criar title tags, meta descriptions e OG tags +- `*audit-seo` — Auditar SEO on-page da página +- `*optimize-performance` — Otimizar performance e velocidade +- `*check-core-web-vitals` — Verificar métricas Core Web Vitals (LCP, FID, CLS) +- `*generate-schema-markup` — Gerar marcação Schema.org estruturada + +## Workflow + +``` +*keyword-research → *write-meta → *audit-seo → *check-core-web-vitals +``` + +## Dependencies + +- tasks/seo-keyword-research.md +- tasks/seo-write-meta.md +- tasks/seo-audit.md +- tasks/seo-check-core-web-vitals.md diff --git a/squads/professional-web-squad/agents/ui-ux-expert.md b/squads/professional-web-squad/agents/ui-ux-expert.md new file mode 100644 index 00000000..dc1a7bab --- /dev/null +++ b/squads/professional-web-squad/agents/ui-ux-expert.md @@ -0,0 +1,33 @@ +--- +agent: Senior UI/UX Design Expert +id: ui-ux-expert +icon: "🎨" +squad: professional-web-squad +--- + +# Senior UI/UX Design Expert + +Especialista sênior em UI/UX com foco em experiências visuais de alto impacto. Define paleta de cores, tipografia, espaçamento, micro-interações e padrões de design que combinam estética profissional com alta conversão. Referência em tendências de design moderno para web. + +## Commands + +- `*design-system` — Definir design system e padrões visuais do projeto +- `*color-palette` — Criar paleta de cores com acessibilidade e psicologia das cores +- `*typography-scale` — Definir escala tipográfica e hierarquia de texto +- `*ui-review` — Revisar UI implementada e apontar melhorias +- `*create-moodboard` — Criar moodboard e direção criativa +- `*design-component` — Especificar componente visual detalhado +- `*accessibility-check` — Verificar acessibilidade (WCAG AA) + +## Workflow + +``` +*create-moodboard → *color-palette → *typography-scale → *design-system → *ui-review +``` + +## Dependencies + +- tasks/ui-ux-color-palette.md +- tasks/ui-ux-typography-scale.md +- tasks/ui-ux-create-moodboard.md +- tasks/ui-ux-review.md diff --git a/squads/professional-web-squad/agents/web-designer.md b/squads/professional-web-squad/agents/web-designer.md new file mode 100644 index 00000000..e4b65eb0 --- /dev/null +++ b/squads/professional-web-squad/agents/web-designer.md @@ -0,0 +1,32 @@ +--- +agent: Web Designer & UX Agent +id: web-designer +icon: "🖥️" +squad: professional-web-squad +--- + +# Web Designer & UX Agent + +Define estrutura visual, layout, hierarquia de informação e experiência do usuário focada em conversão. Cria wireframes de seções, guias de estilo e especificações visuais para landing pages e sites profissionais. + +## Commands + +- `*design-layout` — Definir layout geral e grid da página +- `*plan-sections` — Planejar seções e ordem de conteúdo +- `*create-wireframe` — Criar wireframe anotado das seções +- `*define-style-guide` — Definir guia de estilo visual +- `*review-ux` — Revisar experiência do usuário e fluxo +- `*optimize-above-fold` — Otimizar área acima da dobra (hero) + +## Workflow + +``` +*plan-sections → *create-wireframe → *define-style-guide → *optimize-above-fold +``` + +## Dependencies + +- tasks/web-designer-plan-sections.md +- tasks/web-designer-create-wireframe.md +- tasks/web-designer-define-style-guide.md +- tasks/web-designer-optimize-above-fold.md diff --git a/squads/professional-web-squad/checklists/.gitkeep b/squads/professional-web-squad/checklists/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/squads/professional-web-squad/config/coding-standards.md b/squads/professional-web-squad/config/coding-standards.md new file mode 100644 index 00000000..179aa2e4 --- /dev/null +++ b/squads/professional-web-squad/config/coding-standards.md @@ -0,0 +1,30 @@ +# Coding Standards — professional-web-squad + +## Princípios gerais + +- Semântica HTML5 correta (section, article, nav, main, header, footer) +- CSS: variáveis CSS para tokens de design (cores, fontes, espaçamento) +- Mobile-first: media queries do menor para o maior breakpoint +- Performance: imagens otimizadas (WebP, lazy loading), fontes com font-display: swap +- Acessibilidade: WCAG AA mínimo, aria-labels, foco visível + +## Nomenclatura + +- Classes CSS: BEM (block__element--modifier) +- IDs: apenas para âncoras e formulários +- Arquivos: kebab-case (hero-section.html) + +## Estrutura de arquivos recomendada + +``` +projeto/ +├── index.html +├── css/ +│ ├── tokens.css # Design tokens (variáveis CSS) +│ ├── base.css # Reset e estilos globais +│ └── components/ # Estilos por seção +├── js/ +│ └── main.js +└── assets/ + └── images/ +``` diff --git a/squads/professional-web-squad/config/source-tree.md b/squads/professional-web-squad/config/source-tree.md new file mode 100644 index 00000000..7ad8b856 --- /dev/null +++ b/squads/professional-web-squad/config/source-tree.md @@ -0,0 +1,31 @@ +# Source Tree — professional-web-squad + +## Estrutura do squad + +``` +squads/professional-web-squad/ +├── squad.yaml # Manifest do squad +├── README.md # Documentação do squad +├── config/ +│ ├── coding-standards.md # Padrões de código +│ ├── tech-stack.md # Tecnologias +│ └── source-tree.md # Este arquivo +├── agents/ +│ ├── discovery.md # 🔍 Discovery Agent +│ ├── copywriter.md # ✍️ Copywriter & Storytelling +│ ├── web-designer.md # 🖥️ Web Designer & UX +│ ├── seo-specialist.md # 📈 SEO & Performance +│ └── ui-ux-expert.md # 🎨 Senior UI/UX Expert +├── tasks/ +│ ├── discovery-*.md # Tasks de discovery +│ ├── copywriter-*.md # Tasks de copy +│ ├── web-designer-*.md # Tasks de design +│ ├── seo-*.md # Tasks de SEO +│ └── ui-ux-*.md # Tasks de UI/UX +├── workflows/ # Workflows multi-agente +├── checklists/ # Checklists de qualidade +├── templates/ # Templates de documento +├── tools/ # Ferramentas customizadas +├── scripts/ # Scripts utilitários +└── data/ # Dados estáticos +``` diff --git a/squads/professional-web-squad/config/tech-stack.md b/squads/professional-web-squad/config/tech-stack.md new file mode 100644 index 00000000..985714db --- /dev/null +++ b/squads/professional-web-squad/config/tech-stack.md @@ -0,0 +1,28 @@ +# Tech Stack — professional-web-squad + +## Stack padrão (sem framework) + +| Camada | Tecnologia | Notas | +|--------|-----------|-------| +| Markup | HTML5 semântico | SEO-friendly | +| Estilos | CSS3 + variáveis CSS | Tokens de design | +| Scripts | JavaScript vanilla | Sem dependências obrigatórias | +| Fontes | Google Fonts | Inter, Montserrat, Playfair | +| Ícones | Lucide Icons / SVG inline | Performance | +| Imagens | WebP + fallback JPG | Compressão obrigatória | + +## Opções de framework (por projeto) + +| Framework | Quando usar | +|-----------|-------------| +| Next.js | Sites com SSR, blog, e-commerce | +| Astro | Sites estáticos, máxima performance | +| Webflow | Clientes que gerenciam conteúdo | +| WordPress + ACF | Clientes com CMS familiar | + +## Ferramentas de desenvolvimento + +- Vite (bundler) +- PostCSS + Autoprefixer +- Prettier (formatação) +- Lighthouse (performance e SEO) diff --git a/squads/professional-web-squad/data/.gitkeep b/squads/professional-web-squad/data/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/squads/professional-web-squad/scripts/.gitkeep b/squads/professional-web-squad/scripts/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/squads/professional-web-squad/squad.yaml b/squads/professional-web-squad/squad.yaml new file mode 100644 index 00000000..cb15f838 --- /dev/null +++ b/squads/professional-web-squad/squad.yaml @@ -0,0 +1,63 @@ +name: professional-web-squad +version: 1.0.0 +description: "Squad especializado em criação de sites e landing pages profissionais de alta conversão" +author: Lucas +license: MIT +slashPrefix: web + +aios: + minVersion: "2.1.0" + type: squad + +components: + agents: + - discovery.md + - copywriter.md + - web-designer.md + - seo-specialist.md + - ui-ux-expert.md + tasks: + - discovery-briefing.md + - discovery-define-persona.md + - discovery-define-value-proposition.md + - discovery-competitor-analysis.md + - copywriter-write-headline.md + - copywriter-write-copy.md + - copywriter-create-story.md + - copywriter-write-cta.md + - web-designer-plan-sections.md + - web-designer-create-wireframe.md + - web-designer-define-style-guide.md + - web-designer-optimize-above-fold.md + - seo-keyword-research.md + - seo-write-meta.md + - seo-audit.md + - seo-check-core-web-vitals.md + - ui-ux-color-palette.md + - ui-ux-typography-scale.md + - ui-ux-create-moodboard.md + - ui-ux-review.md + workflows: [] + checklists: [] + templates: [] + tools: [] + scripts: [] + +config: + extends: extend + coding-standards: config/coding-standards.md + tech-stack: config/tech-stack.md + source-tree: config/source-tree.md + +dependencies: + node: [] + python: [] + squads: [] + +tags: + - web + - landing-page + - copy + - seo + - design + - conversion diff --git a/squads/professional-web-squad/tasks/copywriter-create-story.md b/squads/professional-web-squad/tasks/copywriter-create-story.md new file mode 100644 index 00000000..314c72f3 --- /dev/null +++ b/squads/professional-web-squad/tasks/copywriter-create-story.md @@ -0,0 +1,53 @@ +--- +task: Criar Storytelling +agent: copywriter +responsavel: "@copywriter" +responsavel_type: agent +atomic_layer: task +icon: "✍️" +elicit: true +Entrada: | + - marca: Informações sobre a marca e fundador + - persona_documento: Persona definida + - objetivo: Objetivo emocional da narrativa +Saida: | + - narrativa_de_marca: História da marca estruturada + - arco_storytelling: Estrutura narrativa em 3 atos +Checklist: + - "[ ] Identificar o herói da história (cliente ou fundador)" + - "[ ] Mapear o conflito/desafio central" + - "[ ] Desenvolver a jornada de transformação" + - "[ ] Conectar com as dores da persona" + - "[ ] Finalizar com resolução e CTA" +--- + +# *create-story + +Desenvolve a narrativa e storytelling da marca, criando conexão emocional com a persona. + +## Framework: Jornada do Herói (adaptada para web) + +``` +Ato 1 — CONTEXTO +"Você sabe como é [situação de dor]..." + +Ato 2 — CONFLITO +"A maioria das pessoas tenta [solução comum], mas [por que não funciona]..." + +Ato 3 — RESOLUÇÃO +"[Produto/serviço] foi criado para [transformação]. Hoje, [resultado real]." +``` + +## Output + +```markdown +# Narrativa — [Marca] + +## Arco da História +**Contexto:** [situação inicial identificável pela persona] +**Conflito:** [problema que a solução resolve] +**Resolução:** [transformação que o produto/serviço proporciona] + +## Copy de Storytelling +[Texto corrido da narrativa, pronto para usar na página] +``` diff --git a/squads/professional-web-squad/tasks/copywriter-write-copy.md b/squads/professional-web-squad/tasks/copywriter-write-copy.md new file mode 100644 index 00000000..f9d67860 --- /dev/null +++ b/squads/professional-web-squad/tasks/copywriter-write-copy.md @@ -0,0 +1,45 @@ +--- +task: Escrever Copy de Seção +agent: copywriter +responsavel: "@copywriter" +responsavel_type: agent +atomic_layer: task +icon: "✍️" +elicit: true +Entrada: | + - briefing_completo: Briefing do projeto + - persona_documento: Persona definida + - secao_alvo: Qual seção será escrita (hero, benefícios, sobre, depoimentos, FAQ, CTA) +Saida: | + - copy_secao: Copy completo da seção solicitada + - alternativas: 2 variações alternativas +Checklist: + - "[ ] Identificar objetivo da seção" + - "[ ] Adaptar tom ao público-alvo" + - "[ ] Escrever versão principal" + - "[ ] Revisar clareza e persuasão" + - "[ ] Gerar 2 variações alternativas" +--- + +# *write-copy + +Escreve copy persuasivo para seções específicas da página, adaptado à persona e ao objetivo de conversão. + +## Seções suportadas + +| Seção | Objetivo | Tom | +|-------|----------|-----| +| Hero | Capturar atenção imediata | Direto, impactante | +| Benefícios | Convencer com lógica | Claro, específico | +| Sobre | Gerar confiança | Humano, autêntico | +| Depoimentos | Prova social | Natural, específico | +| FAQ | Quebrar objeções | Empático, direto | +| CTA Final | Provocar ação | Urgente, motivador | + +## Princípios + +- Escrever para a persona, não para o cliente +- Benefícios > Features +- Específico > Genérico +- Uma ideia por parágrafo +- CTA claro em toda seção diff --git a/squads/professional-web-squad/tasks/copywriter-write-cta.md b/squads/professional-web-squad/tasks/copywriter-write-cta.md new file mode 100644 index 00000000..6a375f49 --- /dev/null +++ b/squads/professional-web-squad/tasks/copywriter-write-cta.md @@ -0,0 +1,52 @@ +--- +task: Escrever CTAs +agent: copywriter +responsavel: "@copywriter" +responsavel_type: agent +atomic_layer: task +icon: "✍️" +elicit: true +Entrada: | + - objetivo_conversao: O que o visitante deve fazer (comprar, agendar, baixar, etc.) + - persona_documento: Persona definida +Saida: | + - ctas_variações: 10 variações de CTA para teste + - microcopy: Textos de suporte ao CTA (abaixo do botão) +Checklist: + - "[ ] Identificar ação desejada" + - "[ ] Gerar 10 variações de CTA" + - "[ ] Incluir gatilhos de urgência e benefício" + - "[ ] Criar microcopy de suporte" + - "[ ] Testar clareza e especificidade" +--- + +# *write-cta + +Cria CTAs de alta conversão e microcopy de suporte para maximizar cliques e conversões. + +## Fórmulas de CTA eficazes + +- **Resultado direto:** "Quero meu site hoje" +- **Benefício + ação:** "Começar a vender mais agora" +- **Baixo risco:** "Ver demonstração gratuita" +- **Urgência:** "Garantir minha vaga (restam X)" +- **Específico:** "Agendar minha consultoria de 30 min" + +## Microcopy de suporte + +Texto abaixo do botão que reduz objeções: +- "Sem compromisso. Cancele quando quiser." +- "Já são +500 empresas usando" +- "Resposta em até 24h" +- "100% seguro e sem spam" + +## Output + +```markdown +# CTAs — [Projeto] + +| # | CTA | Microcopy | Gatilho | +|---|-----|-----------|---------| +| 1 | [texto] | [suporte] | [urgência/benefício] | +[...] +``` diff --git a/squads/professional-web-squad/tasks/copywriter-write-headline.md b/squads/professional-web-squad/tasks/copywriter-write-headline.md new file mode 100644 index 00000000..5e58caba --- /dev/null +++ b/squads/professional-web-squad/tasks/copywriter-write-headline.md @@ -0,0 +1,50 @@ +--- +task: Escrever Headlines +agent: copywriter +responsavel: "@copywriter" +responsavel_type: agent +atomic_layer: task +icon: "✍️" +elicit: true +Entrada: | + - proposta_de_valor: Proposta de valor definida + - persona_documento: Persona com dores e desejos +Saida: | + - headlines_variações: 5-10 opções de headline + - subheadlines: 3-5 opções de subheadline para cada headline +Checklist: + - "[ ] Estudar proposta de valor e persona" + - "[ ] Gerar 10 variações de headline" + - "[ ] Aplicar gatilhos emocionais" + - "[ ] Testar clareza e especificidade" + - "[ ] Gerar subheadlines complementares" + - "[ ] Selecionar top 3 para teste" +--- + +# *write-headline + +Cria headlines magnéticas que capturam atenção, comunicam o valor e provocam ação imediata. + +## Fórmulas eficazes + +- **Resultado + Tempo:** "Aumente suas vendas em 30 dias sem aumentar o orçamento" +- **Dor → Solução:** "Cansado de sites que não convertem? Isso vai mudar." +- **Curiosidade:** "O que os maiores sites do Brasil fazem diferente" +- **Prova social:** "Como [número] empresas dobraram seus leads com esse método" +- **Promessa direta:** "Landing pages que vendem — entregamos em 7 dias" + +## Output + +```markdown +# Headlines — [Projeto] + +## Opção 1 (Resultado + Tempo) +**H:** [headline] +**Sub:** [subheadline] + +## Opção 2 (Dor → Solução) +**H:** [headline] +**Sub:** [subheadline] + +[...] +``` diff --git a/squads/professional-web-squad/tasks/discovery-briefing.md b/squads/professional-web-squad/tasks/discovery-briefing.md new file mode 100644 index 00000000..a084b4ae --- /dev/null +++ b/squads/professional-web-squad/tasks/discovery-briefing.md @@ -0,0 +1,49 @@ +--- +task: Briefing Completo +agent: discovery +responsavel: "@discovery" +responsavel_type: agent +atomic_layer: task +icon: "🔍" +elicit: true +Entrada: | + - objetivo_do_site: Qual o objetivo principal (vender, capturar leads, informar) + - tipo_de_negocio: Produto, serviço, pessoal ou institucional + - publico_alvo: Descrição inicial do público +Saida: | + - briefing_completo: Documento de briefing estruturado + - restricoes: Restrições de marca, prazo ou tecnologia + - referencias: Sites de referência e inspiração +Checklist: + - "[ ] Coletar objetivo do site" + - "[ ] Identificar tipo de negócio" + - "[ ] Mapear público-alvo inicial" + - "[ ] Levantar referências visuais" + - "[ ] Documentar restrições e prazos" + - "[ ] Confirmar briefing com cliente" +--- + +# *briefing + +Conduz o briefing inicial com o cliente para entender o objetivo, público-alvo e contexto do projeto antes de qualquer criação. + +## Perguntas-chave + +1. **Objetivo:** O que você quer que o visitante faça ao acessar o site? +2. **Negócio:** O que você vende/oferece? Qual o diferencial? +3. **Público:** Para quem é esse site? Qual a dor principal desse público? +4. **Referências:** Quais sites você admira? O que gosta e o que não gosta neles? +5. **Restrições:** Tem identidade visual? Cores obrigatórias? Prazo? + +## Output + +```markdown +# Briefing — [Nome do Projeto] + +**Objetivo:** [capturar leads / vender / informar] +**Tipo:** [produto / serviço / pessoal / institucional] +**Público-alvo:** [descrição] +**Proposta inicial:** [o que torna único] +**Referências:** [links] +**Restrições:** [cores, prazos, tecnologias] +``` diff --git a/squads/professional-web-squad/tasks/discovery-competitor-analysis.md b/squads/professional-web-squad/tasks/discovery-competitor-analysis.md new file mode 100644 index 00000000..88a349ea --- /dev/null +++ b/squads/professional-web-squad/tasks/discovery-competitor-analysis.md @@ -0,0 +1,54 @@ +--- +task: Análise de Concorrentes +agent: discovery +responsavel: "@discovery" +responsavel_type: agent +atomic_layer: task +icon: "🔍" +elicit: true +Entrada: | + - segmento: Mercado/nicho do projeto + - concorrentes_conhecidos: Lista de concorrentes mencionados pelo cliente +Saida: | + - analise_competitiva: Tabela comparativa dos concorrentes + - oportunidades: Gaps e oportunidades identificadas + - gaps: O que os concorrentes não oferecem +Checklist: + - "[ ] Listar 3-5 concorrentes diretos" + - "[ ] Analisar posicionamento de cada um" + - "[ ] Avaliar copy e proposta de valor" + - "[ ] Identificar padrões de design" + - "[ ] Mapear gaps e oportunidades" +--- + +# *competitor-analysis + +Analisa os principais concorrentes para identificar oportunidades de posicionamento e diferenciação. + +## Análise por concorrente + +Para cada concorrente, avaliar: +- Proposta de valor principal +- Público-alvo declarado +- Pontos fortes do site +- Pontos fracos do site +- CTA principal +- Tom de voz + +## Output + +```markdown +# Análise Competitiva + +| Concorrente | Proposta | Pontos Fortes | Pontos Fracos | CTA | +|-------------|----------|---------------|---------------|-----| +| [nome] | [...] | [...] | [...] | [...] | + +## Oportunidades identificadas +- [oportunidade 1] +- [oportunidade 2] + +## Gaps do mercado +- [gap 1] +- [gap 2] +``` diff --git a/squads/professional-web-squad/tasks/discovery-define-persona.md b/squads/professional-web-squad/tasks/discovery-define-persona.md new file mode 100644 index 00000000..cf06cb3d --- /dev/null +++ b/squads/professional-web-squad/tasks/discovery-define-persona.md @@ -0,0 +1,54 @@ +--- +task: Definir Persona +agent: discovery +responsavel: "@discovery" +responsavel_type: agent +atomic_layer: task +icon: "🔍" +elicit: true +Entrada: | + - briefing_completo: Documento de briefing + - dados_do_mercado: Informações sobre o segmento (opcional) +Saida: | + - persona_documento: Persona estruturada com nome, dores e desejos + - dores: Lista de dores e frustrações do público + - desejos: Lista de desejos e aspirações + - gatilhos: Gatilhos de decisão de compra +Checklist: + - "[ ] Nomear e humanizar a persona" + - "[ ] Mapear dados demográficos" + - "[ ] Listar dores e frustrações" + - "[ ] Listar desejos e aspirações" + - "[ ] Identificar gatilhos de decisão" + - "[ ] Validar persona com cliente" +--- + +# *define-persona + +Define a persona principal do projeto com base no briefing, mapeando dores, desejos e gatilhos de compra. + +## Output + +```markdown +# Persona — [Nome] + +**Idade:** [faixa] +**Ocupação:** [cargo/área] +**Objetivo principal:** [o que quer alcançar] + +## Dores +- [dor 1] +- [dor 2] + +## Desejos +- [desejo 1] +- [desejo 2] + +## Gatilhos de decisão +- [gatilho 1] +- [gatilho 2] + +## Objeções comuns +- [objeção 1] +- [objeção 2] +``` diff --git a/squads/professional-web-squad/tasks/discovery-define-value-proposition.md b/squads/professional-web-squad/tasks/discovery-define-value-proposition.md new file mode 100644 index 00000000..e67a8701 --- /dev/null +++ b/squads/professional-web-squad/tasks/discovery-define-value-proposition.md @@ -0,0 +1,54 @@ +--- +task: Definir Proposta de Valor +agent: discovery +responsavel: "@discovery" +responsavel_type: agent +atomic_layer: task +icon: "🔍" +elicit: true +Entrada: | + - persona_documento: Persona definida + - produto_servico: Descrição do produto ou serviço +Saida: | + - proposta_de_valor: Declaração clara da proposta de valor + - diferenciais: Lista de diferenciais competitivos + - beneficios: Benefícios concretos para o público +Checklist: + - "[ ] Identificar o que o produto resolve" + - "[ ] Mapear diferenciais vs concorrência" + - "[ ] Traduzir features em benefícios" + - "[ ] Redigir proposta de valor em 1 frase" + - "[ ] Validar clareza e relevância" +--- + +# *define-value-proposition + +Define a proposta de valor única do projeto, traduzindo features em benefícios concretos para a persona. + +## Framework: Value Proposition Canvas + +``` +Para [persona] que [dor/necessidade], +[produto/serviço] oferece [benefício principal] +diferente de [alternativa], porque [diferencial único]. +``` + +## Output + +```markdown +# Proposta de Valor + +**Declaração:** [1 frase clara e direta] + +## Diferenciais +- [diferencial 1] +- [diferencial 2] + +## Benefícios para a persona +- [benefício 1] +- [benefício 2] + +## Prova social / evidências +- [evidência 1] +- [evidência 2] +``` diff --git a/squads/professional-web-squad/tasks/seo-audit.md b/squads/professional-web-squad/tasks/seo-audit.md new file mode 100644 index 00000000..b712fe0e --- /dev/null +++ b/squads/professional-web-squad/tasks/seo-audit.md @@ -0,0 +1,64 @@ +--- +task: Auditoria SEO On-Page +agent: seo-specialist +responsavel: "@seo-specialist" +responsavel_type: agent +atomic_layer: task +icon: "📈" +elicit: true +Entrada: | + - url_ou_html_pagina: URL da página publicada ou HTML para análise +Saida: | + - relatorio_seo: Relatório completo de SEO on-page + - issues_criticos: Lista de problemas críticos + - recomendacoes: Recomendações priorizadas +Checklist: + - "[ ] Verificar estrutura de headings (H1→H2→H3)" + - "[ ] Avaliar densidade de keywords" + - "[ ] Checar atributos alt em imagens" + - "[ ] Verificar links internos e externos" + - "[ ] Avaliar velocidade de carregamento" + - "[ ] Verificar mobile-friendliness" + - "[ ] Checar meta tags" + - "[ ] Verificar Schema Markup" +--- + +# *audit-seo + +Audita o SEO on-page da página e gera relatório com issues e recomendações priorizadas. + +## Checklist de Auditoria + +### Técnico +- [ ] H1 único e com keyword +- [ ] Hierarquia de headings lógica +- [ ] Meta title dentro de 60 chars +- [ ] Meta description dentro de 160 chars +- [ ] Imagens com alt text descritivo +- [ ] URL amigável e com keyword +- [ ] HTTPS ativo +- [ ] Sitemap.xml presente +- [ ] robots.txt configurado + +### Conteúdo +- [ ] Keyword na primeira frase +- [ ] Densidade de keyword 1-2% +- [ ] Conteúdo original (sem duplicação) +- [ ] Links internos relevantes +- [ ] Links externos de autoridade + +## Output + +```markdown +# Relatório SEO — [Projeto] + +## Score Geral: [X/100] + +## Issues Críticos +- [ ] [issue] + +## Recomendações +| Prioridade | Ação | Impacto | +|------------|------|---------| +| Alta | [ação] | [impacto] | +``` diff --git a/squads/professional-web-squad/tasks/seo-check-core-web-vitals.md b/squads/professional-web-squad/tasks/seo-check-core-web-vitals.md new file mode 100644 index 00000000..576c33ed --- /dev/null +++ b/squads/professional-web-squad/tasks/seo-check-core-web-vitals.md @@ -0,0 +1,61 @@ +--- +task: Verificar Core Web Vitals +agent: seo-specialist +responsavel: "@seo-specialist" +responsavel_type: agent +atomic_layer: task +icon: "📈" +elicit: true +Entrada: | + - url_pagina: URL da página publicada +Saida: | + - scores_cwv: Scores de LCP, FID/INP e CLS + - itens_melhoria: Lista de elementos a otimizar + - prioridades: Ordem de correção por impacto +Checklist: + - "[ ] Medir LCP (Largest Contentful Paint)" + - "[ ] Medir INP (Interaction to Next Paint)" + - "[ ] Medir CLS (Cumulative Layout Shift)" + - "[ ] Identificar elementos problemáticos" + - "[ ] Gerar plano de otimização" +--- + +# *check-core-web-vitals + +Verifica as métricas Core Web Vitals do Google e gera recomendações de otimização. + +## Metas (Google Pass) + +| Métrica | Meta | Descrição | +|---------|------|-----------| +| **LCP** | ≤ 2.5s | Maior elemento visível carregado | +| **INP** | ≤ 200ms | Resposta a interações do usuário | +| **CLS** | ≤ 0.1 | Estabilidade visual da página | + +## Causas comuns de falha + +**LCP alto:** +- Imagens hero sem lazy loading ou compressão +- Web fonts bloqueando renderização +- Servidor lento (TTFB > 600ms) + +**CLS alto:** +- Imagens sem width/height definidos +- Anúncios/embeds sem espaço reservado +- Fontes causando layout shift (FOUT) + +## Output + +```markdown +# Core Web Vitals — [Projeto] + +| Métrica | Score | Meta | Status | +|---------|-------|------|--------| +| LCP | [X]s | ≤2.5s | ✅/⚠️/❌ | +| INP | [X]ms | ≤200ms | ✅/⚠️/❌ | +| CLS | [X] | ≤0.1 | ✅/⚠️/❌ | + +## Ações prioritárias +1. [ação com maior impacto] +2. [...] +``` diff --git a/squads/professional-web-squad/tasks/seo-keyword-research.md b/squads/professional-web-squad/tasks/seo-keyword-research.md new file mode 100644 index 00000000..b78635de --- /dev/null +++ b/squads/professional-web-squad/tasks/seo-keyword-research.md @@ -0,0 +1,56 @@ +--- +task: Pesquisa de Keywords +agent: seo-specialist +responsavel: "@seo-specialist" +responsavel_type: agent +atomic_layer: task +icon: "📈" +elicit: true +Entrada: | + - segmento: Mercado/nicho do projeto + - proposta_de_valor: Proposta de valor definida + - localizacao: Localização geográfica alvo (Brasil, SP, etc.) +Saida: | + - keywords_primarias: 3-5 keywords principais com volume estimado + - keywords_secundarias: 10-20 keywords de cauda longa + - volume_busca: Estimativa de volume mensal +Checklist: + - "[ ] Pesquisar keywords principais do segmento" + - "[ ] Identificar intenção de busca" + - "[ ] Mapear keywords de cauda longa" + - "[ ] Verificar competitividade (baixa/média/alta)" + - "[ ] Organizar por prioridade" +--- + +# *keyword-research + +Pesquisa e mapeia as melhores keywords para posicionar o site nos mecanismos de busca. + +## Tipos de intenção de busca + +| Intenção | Exemplo | Objetivo | +|----------|---------|----------| +| Informacional | "como criar landing page" | Topo do funil | +| Navegacional | "criação de sites SP" | Meio do funil | +| Transacional | "contratar designer de sites" | Fundo do funil | +| Comercial | "melhor agência landing page" | Decisão de compra | + +## Output + +```markdown +# Keywords — [Projeto] + +## Keywords Primárias +| Keyword | Volume/mês | Dificuldade | Intenção | +|---------|-----------|-------------|----------| +| [kw] | [vol] | [baixa/média/alta] | [tipo] | + +## Keywords Secundárias (cauda longa) +- [keyword 1] +- [keyword 2] +[...] + +## Recomendação de foco +**Keyword principal:** [kw] +**Justificativa:** [razão da escolha] +``` diff --git a/squads/professional-web-squad/tasks/seo-write-meta.md b/squads/professional-web-squad/tasks/seo-write-meta.md new file mode 100644 index 00000000..f48f6520 --- /dev/null +++ b/squads/professional-web-squad/tasks/seo-write-meta.md @@ -0,0 +1,59 @@ +--- +task: Escrever Meta Tags +agent: seo-specialist +responsavel: "@seo-specialist" +responsavel_type: agent +atomic_layer: task +icon: "📈" +elicit: false +Entrada: | + - copy_aprovado: Copy principal da página + - keywords_primarias: Keywords mapeadas +Saida: | + - title_tag: Title tag otimizado (50-60 chars) + - meta_description: Meta description (150-160 chars) + - og_tags: Open Graph tags para redes sociais +Checklist: + - "[ ] Title tag com keyword primária" + - "[ ] Meta description com CTA" + - "[ ] OG:title, OG:description, OG:image" + - "[ ] Twitter Card tags" + - "[ ] Canonical URL" +--- + +# *write-meta + +Cria todas as meta tags necessárias para SEO e compartilhamento em redes sociais. + +## Regras de ouro + +**Title tag:** +- 50-60 caracteres +- Keyword no início +- Inclui nome da marca no final +- Formato: `[Keyword Principal] — [Benefício] | [Marca]` + +**Meta description:** +- 150-160 caracteres +- Inclui keyword naturalmente +- Tem um CTA implícito +- Descreve o benefício real da página + +## Output + +```html + +[keyword] — [benefício] | [Marca] + + + + + + + + + + + + +``` diff --git a/squads/professional-web-squad/tasks/ui-ux-color-palette.md b/squads/professional-web-squad/tasks/ui-ux-color-palette.md new file mode 100644 index 00000000..dc616fbb --- /dev/null +++ b/squads/professional-web-squad/tasks/ui-ux-color-palette.md @@ -0,0 +1,60 @@ +--- +task: Criar Paleta de Cores +agent: ui-ux-expert +responsavel: "@ui-ux-expert" +responsavel_type: agent +atomic_layer: task +icon: "🎨" +elicit: true +Entrada: | + - briefing_completo: Briefing com tom e referências da marca + - referencias_visuais: Sites ou imagens de referência + - publico_alvo: Persona definida +Saida: | + - paleta_cores: Paleta completa com hexadecimais + - uso_de_cada_cor: Guia de uso por contexto + - acessibilidade: Verificação de contraste WCAG AA +Checklist: + - "[ ] Definir cor primária (identidade)" + - "[ ] Definir cor de destaque/CTA" + - "[ ] Definir neutras (fundo, texto)" + - "[ ] Verificar contraste WCAG AA (4.5:1)" + - "[ ] Testar em fundo claro e escuro" + - "[ ] Documentar uso correto" +--- + +# *color-palette + +Cria paleta de cores estratégica baseada em psicologia das cores, identidade de marca e acessibilidade. + +## Psicologia das cores por segmento + +| Cor | Emoção | Ideal para | +|-----|--------|-----------| +| Azul | Confiança, segurança | Finanças, saúde, tech | +| Verde | Crescimento, natureza | Saúde, sustentabilidade | +| Laranja | Energia, urgência | CTAs, e-commerce | +| Roxo | Premium, criatividade | Luxo, design, educação | +| Vermelho | Urgência, paixão | Promoções, food | +| Preto | Sofisticação | Luxo, moda | + +## Contraste WCAG AA + +- Texto normal: mínimo 4.5:1 +- Texto grande (18px+): mínimo 3:1 +- Componentes UI: mínimo 3:1 + +## Output + +```markdown +# Paleta de Cores — [Projeto] + +| Papel | Nome | Hex | Contraste s/ branco | +|-------|------|-----|---------------------| +| Primária | [nome] | #XXXXXX | X.X:1 | +| CTA/Destaque | [nome] | #XXXXXX | X.X:1 | +| Texto principal | [nome] | #XXXXXX | X.X:1 | +| Fundo | [nome] | #XXXXXX | — | +| Fundo alternativo | [nome] | #XXXXXX | — | +| Alerta/Erro | [nome] | #XXXXXX | X.X:1 | +``` diff --git a/squads/professional-web-squad/tasks/ui-ux-create-moodboard.md b/squads/professional-web-squad/tasks/ui-ux-create-moodboard.md new file mode 100644 index 00000000..508caabf --- /dev/null +++ b/squads/professional-web-squad/tasks/ui-ux-create-moodboard.md @@ -0,0 +1,65 @@ +--- +task: Criar Moodboard +agent: ui-ux-expert +responsavel: "@ui-ux-expert" +responsavel_type: agent +atomic_layer: task +icon: "🎨" +elicit: true +Entrada: | + - briefing_completo: Briefing com tom e objetivos + - referencias_visuais: URLs ou descrições de referências do cliente +Saida: | + - moodboard: Direção criativa documentada + - direcao_criativa: Descrição da estética escolhida + - justificativa: Por que essa direção serve ao objetivo +Checklist: + - "[ ] Coletar referências do cliente" + - "[ ] Pesquisar referências do mercado" + - "[ ] Identificar padrões visuais desejados" + - "[ ] Definir adjetivos visuais da marca" + - "[ ] Documentar direção criativa" + - "[ ] Validar com o cliente" +--- + +# *create-moodboard + +Cria o moodboard e define a direção criativa visual do projeto antes da execução do design. + +## Adjetivos visuais (escolha 3-5) + +``` +Moderno | Elegante | Bold | Minimalista | Vibrante +Profissional | Amigável | Premium | Jovem | Confiável +Tecnológico | Natural | Orgânico | Limpo | Dinâmico +``` + +## Elementos do moodboard + +1. **Paleta de humor:** cores que evocam a emoção certa +2. **Referências de sites:** 3-5 sites com elementos admiráveis +3. **Referências de tipografia:** exemplos do estilo de texto +4. **Referências de imagem:** estilo fotográfico ou ilustrativo +5. **Referências de layout:** grids, espaçamento, ritmo visual + +## Output + +```markdown +# Moodboard — [Projeto] + +## Adjetivos visuais +[adjetivo 1], [adjetivo 2], [adjetivo 3] + +## Direção criativa +[Parágrafo descrevendo a estética: "O design deve transmitir X através de Y..."] + +## Referências +- **Layout:** [URL ou descrição] +- **Tipografia:** [URL ou descrição] +- **Cores:** [URL ou descrição] +- **Fotografia/Ícones:** [URL ou descrição] + +## O que EVITAR +- [elemento visual a evitar] +- [elemento visual a evitar] +``` diff --git a/squads/professional-web-squad/tasks/ui-ux-review.md b/squads/professional-web-squad/tasks/ui-ux-review.md new file mode 100644 index 00000000..563579a0 --- /dev/null +++ b/squads/professional-web-squad/tasks/ui-ux-review.md @@ -0,0 +1,60 @@ +--- +task: Revisão de UI +agent: ui-ux-expert +responsavel: "@ui-ux-expert" +responsavel_type: agent +atomic_layer: task +icon: "🎨" +elicit: true +Entrada: | + - design_implementado: URL, screenshot ou arquivo do design implementado +Saida: | + - feedback_ui: Feedback detalhado por seção + - inconsistencias: Lista de inconsistências visuais + - melhorias: Melhorias priorizadas por impacto +Checklist: + - "[ ] Verificar consistência da paleta de cores" + - "[ ] Verificar hierarquia tipográfica" + - "[ ] Checar alinhamento e espaçamento" + - "[ ] Avaliar contraste e acessibilidade" + - "[ ] Verificar responsividade (mobile/tablet/desktop)" + - "[ ] Avaliar qualidade visual geral" + - "[ ] Verificar consistência de componentes" +--- + +# *ui-review + +Revisa a UI implementada com olhar sênior, identificando inconsistências e oportunidades de melhoria. + +## Critérios de avaliação + +| Critério | Peso | O que verificar | +|----------|------|-----------------| +| Consistência visual | Alta | Cores, fontes, espaçamento padronizados | +| Hierarquia | Alta | Clareza na ordem de leitura | +| Contraste | Alta | Legibilidade em todos os elementos | +| Alinhamento | Média | Grid limpo, sem elementos desalinhados | +| Espaçamento | Média | Respiração adequada, não sufocado | +| Responsividade | Alta | Funcional em todos os breakpoints | +| Microinterações | Baixa | Hover, focus, transições suaves | + +## Output + +```markdown +# Revisão UI — [Projeto] + +## Score por critério +| Critério | Score | Status | +|----------|-------|--------| +| Consistência | X/10 | ✅/⚠️/❌ | +[...] + +## Issues por seção +### [Seção] +- ⚠️ [issue] +- ❌ [issue crítico] + +## Top 5 melhorias prioritárias +1. [melhoria de maior impacto] +[...] +``` diff --git a/squads/professional-web-squad/tasks/ui-ux-typography-scale.md b/squads/professional-web-squad/tasks/ui-ux-typography-scale.md new file mode 100644 index 00000000..98cbb73a --- /dev/null +++ b/squads/professional-web-squad/tasks/ui-ux-typography-scale.md @@ -0,0 +1,58 @@ +--- +task: Definir Escala Tipográfica +agent: ui-ux-expert +responsavel: "@ui-ux-expert" +responsavel_type: agent +atomic_layer: task +icon: "🎨" +elicit: true +Entrada: | + - guia_de_estilo: Guia de estilo base (se existir) + - tom_da_marca: Tom de voz (moderno, clássico, bold, minimalista) +Saida: | + - escala_tipografica: Escala completa de tamanhos e pesos + - fontes_selecionadas: Fontes para heading e body + - hierarquia: Guia de uso de cada nível +Checklist: + - "[ ] Selecionar fonte para headings" + - "[ ] Selecionar fonte para body" + - "[ ] Definir escala de tamanhos" + - "[ ] Definir pesos (font-weight)" + - "[ ] Definir line-height por elemento" + - "[ ] Verificar legibilidade em mobile" +--- + +# *typography-scale + +Define a escala tipográfica completa do projeto, garantindo hierarquia clara e legibilidade em todos os dispositivos. + +## Combinações de fontes recomendadas + +| Estilo | Heading | Body | Caráter | +|--------|---------|------|---------| +| Moderno | Inter | Inter | Clean, tech | +| Editorial | Playfair Display | Lato | Premium, elegante | +| Bold | Montserrat | Open Sans | Forte, confiante | +| Humanista | Nunito | Source Sans | Amigável, acessível | + +## Output + +```markdown +# Escala Tipográfica — [Projeto] + +## Fontes +- **Heading:** [fonte] (Google Fonts) +- **Body:** [fonte] (Google Fonts) + +## Escala + +| Elemento | Tamanho | Peso | Line-height | Uso | +|----------|---------|------|-------------|-----| +| H1 | 56px / 40px mob | 700 | 1.1 | Headline hero | +| H2 | 40px / 32px mob | 600 | 1.2 | Títulos de seção | +| H3 | 28px / 24px mob | 600 | 1.3 | Subtítulos | +| Body L | 18px | 400 | 1.6 | Textos principais | +| Body | 16px | 400 | 1.6 | Textos gerais | +| Small | 14px | 400 | 1.5 | Legendas, notas | +| CTA | 16px | 600 | 1 | Botões | +``` diff --git a/squads/professional-web-squad/tasks/web-designer-create-wireframe.md b/squads/professional-web-squad/tasks/web-designer-create-wireframe.md new file mode 100644 index 00000000..22b528d4 --- /dev/null +++ b/squads/professional-web-squad/tasks/web-designer-create-wireframe.md @@ -0,0 +1,56 @@ +--- +task: Criar Wireframe +agent: web-designer +responsavel: "@web-designer" +responsavel_type: agent +atomic_layer: task +icon: "🖥️" +elicit: true +Entrada: | + - estrutura_pagina: Seções planejadas e ordenadas + - copy_aprovado: Copy ou rascunho de copy disponível +Saida: | + - wireframe_anotado: Wireframe ASCII ou descritivo de cada seção + - notas_ux: Anotações de UX e comportamento +Checklist: + - "[ ] Wireframe do Hero (desktop e mobile)" + - "[ ] Wireframe de cada seção" + - "[ ] Anotar hierarquia visual" + - "[ ] Indicar posições de CTA" + - "[ ] Notas de comportamento (hover, scroll, animações)" +--- + +# *create-wireframe + +Cria wireframes anotados de cada seção da página, especificando layout, hierarquia e comportamento. + +## Formato de wireframe ASCII + +``` +┌─────────────────────────────────────┐ +│ [LOGO] [MENU] [CTA] │ ← Nav: sticky, CTA destaque +├─────────────────────────────────────┤ +│ │ +│ [HEADLINE PRINCIPAL] │ ← H1: acima da dobra +│ [Subheadline de apoio] │ +│ │ +│ [CTA PRIMÁRIO] [CTA SECUNDÁRIO] │ ← CTAs: 40px height mín. +│ │ +│ [Imagem Hero / Vídeo] │ ← Visual: direita no desktop +│ │ +└─────────────────────────────────────┘ +``` + +## Output + +```markdown +# Wireframe — [Projeto] + +## Seção 1: Hero +[ASCII wireframe] +**Notas UX:** [comportamento, animações, responsivo] + +## Seção 2: [Nome] +[ASCII wireframe] +[...] +``` diff --git a/squads/professional-web-squad/tasks/web-designer-define-style-guide.md b/squads/professional-web-squad/tasks/web-designer-define-style-guide.md new file mode 100644 index 00000000..337338cb --- /dev/null +++ b/squads/professional-web-squad/tasks/web-designer-define-style-guide.md @@ -0,0 +1,54 @@ +--- +task: Definir Guia de Estilo +agent: web-designer +responsavel: "@web-designer" +responsavel_type: agent +atomic_layer: task +icon: "🖥️" +elicit: true +Entrada: | + - briefing_completo: Briefing com referências visuais + - referencias_visuais: URLs ou descrição de referências +Saida: | + - guia_de_estilo: Documento completo do guia de estilo + - cores: Paleta com uso de cada cor + - tipografia: Fontes e escala tipográfica + - espacamento: Sistema de espaçamento +Checklist: + - "[ ] Definir paleta de cores (primária, secundária, neutras)" + - "[ ] Selecionar tipografia (heading + body)" + - "[ ] Definir escala de tamanhos" + - "[ ] Estabelecer sistema de espaçamento" + - "[ ] Definir estilo de botões e inputs" + - "[ ] Documentar uso correto e incorreto" +--- + +# *define-style-guide + +Define o guia de estilo visual completo do projeto, incluindo cores, tipografia, espaçamento e componentes base. + +## Output + +```markdown +# Guia de Estilo — [Projeto] + +## Cores +| Uso | Nome | Hex | Onde usar | +|-----|------|-----|-----------| +| Primária | [nome] | #XXXXXX | CTAs, destaque | +| Secundária | [nome] | #XXXXXX | Suporte | +| Neutra Clara | [nome] | #XXXXXX | Backgrounds | +| Neutra Escura | [nome] | #XXXXXX | Textos | +| Alerta | [nome] | #XXXXXX | Erros, avisos | + +## Tipografia +| Elemento | Fonte | Tamanho | Peso | +|----------|-------|---------|------| +| H1 | [fonte] | 48-64px | 700 | +| H2 | [fonte] | 32-40px | 600 | +| Body | [fonte] | 16-18px | 400 | +| CTA | [fonte] | 16px | 600 | + +## Espaçamento +Base: 8px | Escala: 8, 16, 24, 32, 48, 64, 96px +``` diff --git a/squads/professional-web-squad/tasks/web-designer-optimize-above-fold.md b/squads/professional-web-squad/tasks/web-designer-optimize-above-fold.md new file mode 100644 index 00000000..f4781e44 --- /dev/null +++ b/squads/professional-web-squad/tasks/web-designer-optimize-above-fold.md @@ -0,0 +1,51 @@ +--- +task: Otimizar Acima da Dobra +agent: web-designer +responsavel: "@web-designer" +responsavel_type: agent +atomic_layer: task +icon: "🖥️" +elicit: true +Entrada: | + - wireframe_anotado: Wireframe do hero + - headline_aprovada: Headline selecionada +Saida: | + - hero_otimizado: Especificação detalhada do hero + - recomendacoes_cta: Posição, cor e texto do CTA principal +Checklist: + - "[ ] Garantir headline visível sem scroll" + - "[ ] CTA primário acima da dobra" + - "[ ] Hierarquia visual clara (H1 → Sub → CTA)" + - "[ ] Visual de apoio que reforça a mensagem" + - "[ ] Otimizar para mobile first" + - "[ ] Verificar contraste e legibilidade" +--- + +# *optimize-above-fold + +Otimiza a área acima da dobra (hero) para máximo impacto e conversão imediata. + +## Checklist de conversão do Hero + +- [ ] Headline responde: "O que é isso e por que me importo?" +- [ ] Subheadline complementa sem repetir +- [ ] CTA principal em destaque visual claro +- [ ] Visual reforça a proposta (não decora apenas) +- [ ] Sem distrações: navegação limpa +- [ ] Mobile: tudo visível sem scroll no iPhone SE + +## Output + +```markdown +# Hero Otimizado — [Projeto] + +**Headline:** [texto final] +**Subheadline:** [texto final] +**CTA:** [texto] | Cor: [hex] | Posição: [centralizado/esquerda] +**Visual:** [descrição do elemento visual] + +## Especificação técnica +- Max-width: 1200px +- Padding: 120px top, 80px bottom +- Mobile: stack vertical, CTA full-width +``` diff --git a/squads/professional-web-squad/tasks/web-designer-plan-sections.md b/squads/professional-web-squad/tasks/web-designer-plan-sections.md new file mode 100644 index 00000000..b09358e0 --- /dev/null +++ b/squads/professional-web-squad/tasks/web-designer-plan-sections.md @@ -0,0 +1,55 @@ +--- +task: Planejar Seções da Página +agent: web-designer +responsavel: "@web-designer" +responsavel_type: agent +atomic_layer: task +icon: "🖥️" +elicit: true +Entrada: | + - briefing_completo: Briefing do projeto + - objetivo_conversao: Objetivo principal da página +Saida: | + - estrutura_pagina: Lista ordenada de seções + - ordem_secoes: Justificativa para ordem escolhida + - hierarquia: Importância visual de cada seção +Checklist: + - "[ ] Definir tipo de página (landing / site completo)" + - "[ ] Selecionar seções necessárias" + - "[ ] Ordenar por jornada do visitante" + - "[ ] Definir hierarquia visual" + - "[ ] Validar com objetivo de conversão" +--- + +# *plan-sections + +Planeja a estrutura e ordem das seções da página com base na jornada do visitante e no objetivo de conversão. + +## Seções padrão (landing page de conversão) + +``` +1. Hero → Capturar atenção (acima da dobra) +2. Problema → Identificar a dor do visitante +3. Solução → Apresentar o produto/serviço +4. Benefícios → Detalhar o valor entregue +5. Como funciona → Reduzir fricção e incerteza +6. Prova social → Depoimentos e resultados +7. Oferta/Preço → Apresentar a proposta comercial +8. FAQ → Quebrar objeções finais +9. CTA Final → Provocar a conversão +10. Rodapé → Confiança e informações legais +``` + +## Output + +```markdown +# Estrutura da Página — [Projeto] + +| Ordem | Seção | Objetivo | Prioridade | +|-------|-------|----------|------------| +| 1 | Hero | [objetivo] | Alta | +[...] + +## Justificativa da ordem +[Explicação da jornada do visitante] +``` diff --git a/squads/professional-web-squad/templates/.gitkeep b/squads/professional-web-squad/templates/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/squads/professional-web-squad/tools/.gitkeep b/squads/professional-web-squad/tools/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/squads/professional-web-squad/workflows/.gitkeep b/squads/professional-web-squad/workflows/.gitkeep new file mode 100644 index 00000000..e69de29b