runrunit-dev logo

runrunit-dev

Plugin da agência: regras, skills e agentes para padronizar desenvolvimento e revisão de código

5 skills

code-reviewer

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.

comentar-task-runrunit

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).

pull-request

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: `![Antes](<secure_url>)` e `![Depois](<secure_url>)`. - **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 `![desc](url)`. ## 🧾 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: `![Antes](url)` e `![Depois](url)`. Se houver vários viewports, agrupe por dispositivo (ex.: **Mobile – Antes/Depois**, **Desktop – Antes/Depois**). **Antes:** ![Antes](<secure_url_do_upload_antes>) **Depois:** ![Depois](<secure_url_do_upload_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://...)

registrar-evidencias

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):** `![Antes - Desktop](<secure_url>)`, `![Depois - Desktop](<secure_url>)`. - **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-image-cloudinary

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: `![Descrição](<secure_url>)`.