S Skillteca
Receber por email
Explorar Categorias Coleções Newsletter
← Voltar para o catálogo

visual-qa

Segurança Autor: aiskillstore

Complete visual QA - screenshots with full-page scroll to trigger animations, then analyze with Claude. Run after CSS/template changes.

367estrelas
Atualizado há 4 meses
Ver no GitHub ↗

Como adicionar

/plugin marketplace add aiskillstore/marketplace

O comando exato pode variar conforme o repositório. Confira o README no GitHub.

Para o autor da skill

Cole no README do seu repo

Mostra que sua skill está catalogada na Skillteca, gera backlink e tráfego rastreável.

[![Skillteca](https://www.skillteca.com.br/api/badge/visual-qa/svg)](https://www.skillteca.com.br/skills/visual-qa)
#css

Skills relacionadas

Ver todas de Segurança →

security-research

63k

Habilidade de pesquisa de segurança em Modo Equipe que orquestra 3 caçadores de vulnerabilidades e 2 engenheiros de PoC para auditar um código, provar explorabilidade, classificar causas raiz e calibrar a severidade. É utilizada para revisão de segurança, pesquisa de vulnerabilidades, auditoria de explorabilidade e validação de modelo de ameaças.

Segurança por code-yeongyu

security-scanning-security-dependencies

41.2k

You are a security expert specializing in dependency vulnerability analysis, SBOM generation, and supply chain security. Scan project dependencies across multiple ecosystems to identify vulnerabilities, assess risks, and provide automated remediation strategies.

Segurança #ai #git por sickn33

vulnerability-scanner

41.2k

Advanced vulnerability analysis principles. OWASP 2025, Supply Chain Security, attack surface mapping, risk prioritization.

Segurança #ai #git por sickn33

dependency-management-deps-audit

41.2k

You are a dependency security expert specializing in vulnerability scanning, license compliance, and supply chain security. Analyze project dependencies for known vulnerabilities, licensing issues, outdated packages, and provide actionable remediation strategies.

Segurança #ai #git por sickn33

Alerta por categoria

Receba novas skills de Segurança toda segunda

1 email curto, só com as skills novas de Segurança. 4 minutos de leitura, sem spam, cancela com 1 clique.

Você confirma o email no primeiro envio. Sem spam. Cancela com 1 clique.

Ler descrição completa

Visual QA Skill

Automated visual testing that properly handles GSAP animations by scrolling through the entire page before capturing screenshots.

Usage

Ask Claude to run visual QA:

  • "Run visual QA on the CSR site"
  • "Take screenshots of all pages and analyze them"
  • "Check the visual state of the website"

What This Skill Does

  1. Full-Page Scroll - Scrolls through entire page in increments to trigger all GSAP/ScrollTrigger animations
  2. Multi-Device Screenshots - Desktop (1920px), Tablet (768px), Mobile (375px)
  3. Parallel Processing - Uses Haiku sub-agents to analyze multiple pages simultaneously
  4. Visual Analysis - Reviews screenshots for issues

Pages Tested

| Page | URL | |------|-----| | Home | https://csrdevelopment.com/ | | About | https://csrdevelopment.com/about/ | | Portfolio | https://csrdevelopment.com/portfolio/ | | Contact | https://csrdevelopment.com/contact/ | | Privacy Policy | https://csrdevelopment.com/privacy-policy/ | | Terms | https://csrdevelopment.com/terms-of-service/ |

Screenshot Script

Location: /root/.claude/skills/visual-qa/screenshot.py

Single Page

python3 /root/.claude/skills/visual-qa/screenshot.py --url https://csrdevelopment.com/about/

All Pages

python3 /root/.claude/skills/visual-qa/screenshot.py --all

Output

Screenshots saved to: /home/dev/screenshots/

Parallel Analysis with Haiku

When running full visual QA, launch multiple Haiku agents to analyze different pages simultaneously:

Agent 1: Analyze Home + About screenshots
Agent 2: Analyze Portfolio + Contact screenshots
Agent 3: Analyze Legal pages screenshots

Visual QA Checklist

All Pages

  • [ ] Header visible and logo centered
  • [ ] Menu button works
  • [ ] Footer links present
  • [ ] No horizontal scroll
  • [ ] Text readable at all sizes

Home Page

  • [ ] Hero video/image loaded
  • [ ] Hero text visible (not opacity 0)
  • [ ] Property cards show with images
  • [ ] Animations completed

About Page

  • [ ] Team member photos loaded (not placeholders)
  • [ ] Bio text visible
  • [ ] Images have grayscale filter

Portfolio

  • [ ] Property grid displays
  • [ ] Status badges visible
  • [ ] Different images for each property

Contact

  • [ ] Form fields visible
  • [ ] Contact info displayed
  • [ ] Submit button styled

Property Detail

  • [ ] Hero image loaded
  • [ ] Property details sidebar
  • [ ] Inquiry form present
Compartilhar X LinkedIn