Plugin da agência: regras, skills e agentes para padronizar desenvolvimento e revisão de código
Revisão de código alinhada aos padrões da agência. Use ao revisar PRs, sugerir melhorias ou validar implementações.
# Revisor de código (agência)
## Quando usar
- Revisar pull requests ou mudanças de código
- Sugerir melhorias de qualidade, segurança ou performance
- Validar que o código segue os padrões da agência
## Instruções
1. Aplique o checklist de revisão (regras do plugin): lógica, segurança, performance, acessibilidade, testes, padrões.
2. Cite trechos específicos ao dar feedback e sugira alterações concretas quando possível.
3. Priorize issues que afetem segurança ou comportamento incorreto.
4. Mantenha o tom construtivo e alinhado aos padrões definidos nas rules do plugin.Orquestra evidências e comentário na tarefa do Runrun.it. Captura screenshots antes/depois, faz upload no Cloudinary, opcionalmente abre PR (development ou branch informada) e cria comentário na task com resumo, passo a passo de teste e links das evidências; se houver link da PR, inclui no comentário e grava na task. Usar quando o usuário enviar link da task Runrun.it e URLs antes/depois para registrar evidências na task.
# Comentar na tarefa do Runrun.it (evidências + PR)
Fluxo: **evidências (antes/depois)** → **upload das imagens** → **(opcional)** abrir PR → **comentar na task** com resumo, passo a passo de teste e links das evidências. Se houver link da PR, incluir no comentário e gravar na task.
## Input
| Campo | Obrigatório | Descrição |
|-------|-------------|-----------|
| **Link da task** | Sim | URL da tarefa no Runrun.it (ex.: `https://app.runrun.it/.../tasks/12345`) ou o **ID numérico** da task. Extrair o ID do link quando for URL. |
| **URL antes** | Sim | Página no estado anterior (homologação, branch base). |
| **URL depois** | Sim | Página no estado alterado (branch de feature, localhost). |
| **Branch da PR** | Não | Branch de destino da PR. Padrão: `development`. O usuário pode informar no chat (ex.: `homolog`, `main`). |
Solicitar link da task e as duas URLs quando não forem fornecidos.
## Ordem do fluxo
1. **Identificar a task**
- Se o usuário enviar URL da task, extrair o **ID numérico** (ex.: de `.../tasks/12345` → `12345`). Se enviar só o número, usar como `task_id`.
2. **Registrar evidências**
- Chamar a skill [registrar-evidencias](skills/registrar-evidencias/SKILL.md) com **URL antes** e **URL depois**.
- Resultado: screenshots (antes/depois, por viewport). Guardar os arquivos ou caminhos para o próximo passo.
3. **Upload das imagens**
- Chamar a skill [upload-image-cloudinary](skills/upload-image-cloudinary/SKILL.md) para cada screenshot e obter **secure_url** de cada uma.
4. **Abrir a PR (opcional)**
- Se o usuário quiser PR: chamar a skill [create-pr-github](skills/create-pr-github/SKILL.md) para abrir a PR na branch **development** (ou na branch informada) e obter o **link da PR**. Se não abrir PR ou falhar, seguir sem o link.
5. **Montar e publicar o comentário na task**
- Usar **runrunit_create_comment** com `task_id` (numérico) e `text` no formato abaixo.
- Incluir **Link da PR** no comentário somente se o link tiver sido obtido no passo 4.
- **Runrun.it não aceita Markdown:** usar texto simples; evidências como URLs puras.
6. **Gravar o link da PR na task (opcional)**
- Se houver link da PR, usar **runrunit_update_task** com `task: { link_da_branch: "<url_da_pr>" }` (mapeado para o custom field "Link da branch").
## Formato do comentário na task
Seguir o padrão do projeto (AGENTS.md): **contexto do que foi alterado** + **passo a passo para testar**.
Use texto simples (sem Markdown). Exemplo de estrutura:
```
Resumo do que foi feito:
[Contexto das alterações. Ex.: O slider da home foi alterado para exibir 5 itens.]
Passo a passo para testar:
1. Acesse [URL ou descrição].
2. [Ação]. Ex.: Role até a área abaixo do topo.
3. [O que validar]. Ex.: Teste a funcionalidade e a responsividade do elemento.
[Se houver link da PR:] Link da PR: [url_completa_da_pr]
Evidências:
Antes (Desktop): [secure_url]
Depois (Desktop): [secure_url]
Antes (Mobile): [secure_url]
Depois (Mobile): [secure_url]
[repetir para cada viewport que tiver URL]
```
Se houver muitas URLs, agrupar por tipo (Antes/Depois) e por viewport (Desktop, Mobile, Tablet) para manter legível.
## Resumo de dependências
- **registrar-evidencias:** URLs antes e depois.
- **upload-image-cloudinary:** variáveis `CLOUDINARY_CLOUD_NAME`, `CLOUDINARY_API_KEY`, `CLOUDINARY_API_SECRET`.
- **create-pr-github:** branch commitada e pushed; branch de destino = `development` ou a informada pelo usuário.
- **Runrun.it:** `RUNRUNIT_APP_KEY` e `RUNRUNIT_USER_TOKEN` configurados no MCP.
Se a criação da PR falhar (ex.: `gh` não disponível), informar o erro e seguir com o comentário na task apenas com resumo, passo a passo e links das evidências (sem link da PR).Create a well-structured pull request with description, labels, reviewers and visual evidence
# 🧩 Criar Pull Request (PR)
## 🎯 Visão Geral
Cria um **pull request bem estruturado**, com descrição adequada, rótulos, revisores e evidências visuais.
---
## 🚀 Etapas
### 1. **Preparar a Branch**
- Garante que **todas as alterações estejam commitadas**.
- O **nome da branch deve conter o `{id}` da tarefa** (ex: `fix/ajuste-header-{id}`).
- Faz **push da branch para o remoto**.
- Verifica se a branch está **atualizada com a `development`** (ou `homolog`, dependendo do ambiente).
- ⚠️ **Nunca abra PR diretamente para as branches de produção (`main` ou `master`).**
---
### 2. **Escrever a Descrição do PR**
- Resuma as alterações de forma clara e objetiva.
- Explique o **contexto e a motivação** da mudança.
- Liste **quaisquer breaking changes** ou impactos relevantes.
- Inclua **evidências visuais** se houver mudanças na UI:
- Utilize o **MCP do Chrome DevTools** para navegar até a página e tirar prints da seção que foi modificada.
- Mostre o **antes e depois** da alteração visual.
- Se estiver rodando localmente, use o **browser interno do Cursor** para navegar e capturar as imagens.
> 💡 Solicite a **URL da página** afetada para poder acessar e capturar as evidências de antes com o MCP Chrome DevTools.
---
### 3. **Configurar e Abrir a PR** (obrigatório — nunca pule este passo)
- Crie o PR com um **título descritivo** contendo o nome da task:
**Exemplo:** `task0123: feat: Adiciona login social com Google`
- Adicione **rótulos apropriados** (Feature, Fix, Refactor, Docs, etc.).
- Inclua **revisores** adequados para o tipo de mudança.
- Após abrir a PR, **é obrigatório obter e devolver o link da PR**. Esse link será usado no comentário da tarefa no Runrun.it e no campo "Link da branch" da task.
- **Output obrigatório** (sempre informar):
- O **link da PR** (URL completa, ex.: `https://github.com/org/repo/pull/123`) — **obrigatório**
- O **nome da branch**
- O **ambiente de destino** (`development` ou `homolog`)
- Se a criação da PR falhar (ex.: `gh` não instalado, branch não pushed, sem permissão), informe o erro claramente e não prossiga para comentar/atualizar a task sem o link; o usuário precisa do link para rastreabilidade.
---
### 4. **Evidências**
- Escolha sempre que possível o MCP do **Playwright**, depois o MCP do Chrome DevTools.
- Tirar prints da tela toda simulando `mobile`, `tablet` e `desktop` (e **antes/depois** quando aplicável).
- **O GitHub CLI (`gh`) não anexa arquivos ao body da PR.** Para as evidências aparecerem:
1. **Usar a skill [upload-image-cloudinary](skills/upload-image-cloudinary/SKILL.md)** para fazer upload de cada screenshot e obter a URL pública (`secure_url`).
2. Inserir essas URLs na seção **Evidências Visuais** do body da PR em Markdown: `` e ``.
- **Configuração obrigatória** para evidências visuais: a skill de upload exige `CLOUDINARY_CLOUD_NAME`, `CLOUDINARY_API_KEY` e `CLOUDINARY_API_SECRET` (nunca expor o API Secret no client-side).
- Seguir o template de pull-request da documentação evidenciando tipo de alteração/implementação (ex.: `fix`, `feature`, `chore` e outras do flow conventional).
### 5. **Comentar na tarefa (Runrun.it) com evidências e link da PR**
Ordem obrigatória do fluxo:
1. **Registrar evidências**
Chamar a skill [registrar-evidencias](skills/registrar-evidencias/SKILL.md) com as URLs **antes** e **depois** para capturar os screenshots.
2. **Upload das imagens**
Chamar a skill [upload-image-cloudinary](skills/upload-image-cloudinary/SKILL.md) com as URLs/arquivos das evidências e obter as `secure_url` (uma por evidência: antes/depois).
3. **Abrir a PR e obter a URL** (obrigatório)
Chamar esta skill (create-pr-github) para abrir a PR no repositório. **Sempre obter a URL da PR** — sem ela os passos 4 e 5 não podem ser concluídos corretamente. Nunca pule este passo.
4. **Montar resumo e comentar**
Com as URLs das evidências (antes e depois) **e a URL da PR**, criar um **resumo do que foi feito** (ex.: histórico alinhado aos comentários no GitHub).
Usar **runrunit_create_comment** com: texto do resumo + **link da PR** + evidências em **texto simples** (Runrun.it não aceita Markdown), ex.: `Link da PR: <url_da_pr>`, `Antes: <secure_url>` e `Depois: <secure_url>`.
5. **Gravar o link da PR na task** (obrigatório)
Usar **runrunit_update_task** com `task: { link_da_branch: "<url_da_pr>" }`. O campo `link_da_branch` é mapeado para o custom field "Link da branch" na task (ex.: `custom_32`). **Sempre** preencher com a URL obtida no passo 3.
- **Runrun.it não aceita Markdown** nos comentários: use **links como texto simples** (URLs puras), não sintaxe ``.
## 🧾 Template de Pull Request (Utilize como padrão)
# Título do PR: (Ex: task0123: feat: Adiciona login social com Google)
## 🎯 Tipo de Mudança
> Marque o tipo de mudança que este PR introduz
- [ ] 🐛 **Correção de bug** (alteração que corrige um problema)
- [ ] ✨ **Novo recurso** (alteração que adiciona uma funcionalidade)
- [ ] ♻️ **Refatoração** (uma alteração de código que não corrige um bug nem adiciona um recurso)
- [ ] 📖 **Documentação** (atualizações na documentação)
- [ ] 🎨 **Alteração de layout** (Mudança no layout sem alterar o comportamento de uma funcionalidade existente)
---
## 📝 Descrição
> Descreva suas mudanças em detalhes. Qual o problema que está sendo resolvido? Qual a solução implementada? _Se aplicável, adicione o contexto que motivou esta mudança._
---
## 📸 Evidências Visuais (Se aplicável)
> Use as **URLs públicas (`secure_url`)** retornadas pelo upload na Cloudinary. Formato Markdown: `` e ``. Se houver vários viewports, agrupe por dispositivo (ex.: **Mobile – Antes/Depois**, **Desktop – Antes/Depois**).
**Antes:**

**Depois:**

---
## ✅ Checklist de Qualidade
- [ ] Meu código segue as diretrizes deste projeto.
- [ ] Realizei uma revisão do meu próprio código.
- [ ] Testei o fluxo de navegação.
- [ ] Comentei meu código nas áreas de difícil compreensão.
- [ ] Minhas alterações não geram novos warnings.
---
## 🔗 Referências
> Adicione links para tarefas, épicos ou outras referências.
- **Tarefa:** [TASK-0123](https://link-da-tarefa.com)
- **Design no Figma:** [Link para o design](https://figma.com/...)
- **Documento:** [Link](https://...)Captura screenshots de páginas web em múltiplos viewports (mobile, tablet, desktop) a partir de URLs "antes" e "depois". Usar quando precisar registrar evidências visuais, comparar antes/depois, documentar mudanças de UI ou preparar imagens para PRs e relatórios.
# Registrar Evidências (Antes/Depois)
Captura prints de tela a partir de **duas URLs** (antes e depois), em mobile, tablet e desktop. Mesmo input, devolvendo as URLs da imagem após utilizar a skill [upload-image-cloudinary](skills/upload-image-cloudinary/SKILL.md) para fazer o upload de cada imagem.
## Input obrigatório
- **URL antes:** endereço da página no estado anterior (ex.: homologação, branch base).
- **URL depois:** endereço da página no estado alterado (ex.: branch de feature, localhost).
Solicite essas duas URLs ao usuário quando não forem fornecidas.
## Fluxo
1. **Escolher ferramenta de captura** (ordem de preferência):
- MCP Playwright (Prioridade)
- MCP Chrome DevTools
- cursor-ide-browser (se estiver rodando localmente, aguardar a página carregar e tirar print da tela toda)
2. **Capturar "Antes":**
- Navegar até a **URL antes**.
- Tirar screenshot da tela inteira em **mobile 425px**, **tablet 768px** e **desktop 1440px** (ou pelo menos desktop se o contexto for limitado).
- Guardar arquivos com nome que identifique viewport e momento, ex.: `antes-desktop.png`, `antes-mobile.png`, `antes-tablet.png`.
3. **Capturar "Depois":**
- Navegar até a **URL depois**.
- Repetir os mesmos viewports: mobile, tablet, desktop.
- Nomear ex.: `depois-desktop.png`, `depois-mobile.png`, `depois-tablet.png`.
4. **Publicar imagens (opcional):**
- Se as evidências forem para PR ou documentação, usar a skill [upload-image-cloudinary](skills/upload-image-cloudinary/SKILL.md) para cada screenshot e obter `secure_url`.
- **PR/documentação (Markdown):** ``, ``.
- **Runrun.it (comentários):** não aceita Markdown; usar apenas texto simples com a URL: ex. `Antes: <secure_url>` e `Depois: <secure_url>`.
## Viewports sugeridos
| Dispositivo | Largura (px) |
|-------------|--------------|
| Mobile | 425 |
| Tablet | 768 |
| Desktop | 1280 ou 1920 |
## Saída
- Arquivos de screenshot locais **e/ou**
- URLs públicas (via Cloudinary): em Markdown para PR/docs; em texto simples (só a URL) para comentários no Runrun.it.
Quando o usuário pedir apenas “registrar evidências” ou “tirar prints antes/depois”, use esta skill com as duas URLs fornecidas ou solicite-as.Upload images to Cloudinary and get public URLs. Use when screenshots, evidence images, or any image file need to be hosted for sharing (e.g. PR body, docs, reports). Requires CLOUDINARY_CLOUD_NAME, CLOUDINARY_API_KEY and CLOUDINARY_API_SECRET.
# Upload de imagem para Cloudinary
## Quando usar
- Publicar imagens (screenshots, evidências, assets) e obter uma URL HTTPS pública.
- Útil para PRs, documentação, relatórios ou qualquer fluxo que exija imagens hospedadas.
## Configuração
Variáveis de ambiente obrigatórias (nunca expor o API Secret no client-side):
- `CLOUDINARY_CLOUD_NAME`
- `CLOUDINARY_API_KEY`
- `CLOUDINARY_API_SECRET`
## Como fazer o upload
1. **Endpoint:** `POST https://api.cloudinary.com/v1_1/<CLOUD_NAME>/image/upload`
2. **Autenticação:** Basic Auth com `CLOUDINARY_API_KEY` e `CLOUDINARY_API_SECRET`.
3. **Body (multipart):**
- `file` = arquivo da imagem (obrigatório).
- `public_id` = opcional (ex.: `pr-evidencia-antes-mobile`, `docs-screenshot-1`).
4. **Resposta:** Da resposta JSON do upload, usar **apenas o campo `secure_url`** (URL HTTPS pública) para referenciar a imagem.
## Uso da URL
Inserir `secure_url` onde for necessário (Markdown, HTML, etc.), por exemplo: ``.