scan

Live site QA via agent-browser (token-efficient) and Playwright (login flows). Scans pages, catches visual/functional issues, compares with baselines. Use when testing a live site or after deploying.

Aller à l'installation

Dépôt: djnsty23/claude-auto-dev
Dernière activité de la source: 14 avril 2026 à 13:35
Langue détectée de SKILL.md: anglais
Étoiles: 2
Forks: 0

Options d'installation

Le prompt qui vérifie d'abord la source est sélectionné par défaut. Vous pouvez passer à une commande directe ou télécharger une copie locale.

Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.

Une commande directe contourne le prompt de vérification. Examinez la source avant de l'exécuter.

npx skills add https://github.com/djnsty23/claude-auto-dev --skill scan

La commande reste sur une seule ligne. Faites défiler horizontalement pour la vérifier avant de la copier.

Vous préférez une copie locale ? Téléchargez les fichiers actuellement disponibles dans SkillsMP.

Vérifiez les fichiers source

Lisez SKILL.md et les fichiers associés affichés par SkillsMP avant de décider de l'installer.

SKILL.md

Instructions source · Aperçu en lecture seule

Retour à la recherche Retour à l’installation

telemetry

Show token / tool usage stats from the local telemetry log. Use when you want to know "which tools am I burning context on", "which skills are expensive", or "was yesterday's session mostly Read/Grep or actually productive".

2026-04-22

audit

Parallel quality audit with 7 specialized agents (Opus). Finds bugs, violations, and quality issues. Use audit for fixes, brainstorm for features.

2026-04-22

doppler

Manage environment variables with Doppler — auto-install CLI, login, link projects, wrap commands with `doppler run`. Replaces scattered .env files with a hub/spoke architecture.

2026-04-22

Tout voir dans ce dépôt

Command	What It Does
`scan`	Detect URL from project, run quick scan on key pages
`scan http://localhost:3000`	Scan specific URL
`scan full`	Deep scan — all pages, all categories
`scan auth`	Login via Playwright, then scan authenticated pages
`scan compare`	Scan and compare against last baseline
`scan errors`	Console + network errors only
`scan a11y`	axe-core accessibility audit
`scan perf`	Lighthouse performance only
`scan mobile`	Mobile viewport screenshots + responsive check

User provided a URL → use it

Dev server already running → check ports 3000, 3001, 5173, 8080:

for port in 3000 3001 5173 8080; do curl -s http://localhost:$port > /dev/null 2>&1 && echo "http://localhost:$port" && break; done

No server running → auto-start one:

node -e "const p=require('./package.json');const s=p.scripts||{};console.log(s.dev||s.start||'')"

If a dev script exists, start it in the background:

Bash({ command: "npm run dev", run_in_background: true })

Wait 5 seconds, then re-check ports.

Vercel preview → check .vercel/ or recent deploy URL
Production URL → check package.json homepage or CLAUDE.md

# Fetch homepage, extract internal links
curl -sL "$TARGET_URL" | grep -oE 'href="[^"]+"' | sed 's/href="//;s/"$//' | sort -u | head -30

agent-browser open "$TARGET_URL"
agent-browser snapshot -i  # interactive elements + links

mkdir -p .claude/screenshots/$(date +%Y-%m-%d)
DIR=".claude/screenshots/$(date +%Y-%m-%d)"

agent-browser open "$PAGE_URL"
agent-browser screenshot "$DIR/$(basename $PAGE_URL)-desktop.png"

# Mobile viewport
agent-browser viewport 375 812
agent-browser screenshot "$DIR/$(basename $PAGE_URL)-mobile.png"

# Console + network errors
agent-browser errors > "$DIR/$(basename $PAGE_URL)-errors.txt"

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch({ headless: false });  // headless:false lets you complete 2FA/SSO manually once
  const ctx = await browser.newContext({ viewport: { width: 1280, height: 720 } });
  const page = await ctx.newPage();

  // Capture errors as they happen
  const errors = [];
  page.on('console', m => m.type() === 'error' && errors.push(m.text()));
  page.on('pageerror', e => errors.push(`UNCAUGHT: ${e.message}`));
  page.on('response', r => r.status() >= 400 && errors.push(`${r.status()} ${r.url()}`));

  // Login
  await page.goto(process.env.LOGIN_URL);
  await page.fill('input[type="email"]', process.env.TEST_USER_EMAIL);
  await page.fill('input[type="password"]', process.env.TEST_USER_PASSWORD);
  await page.click('button[type="submit"]');
  await page.waitForURL(url => !url.pathname.includes('login'), { timeout: 30000 });

  // Save auth state for reuse
  await ctx.storageState({ path: '.claude/auth-state.json' });

  // Scan protected pages
  const pages = (process.env.PAGES || '/dashboard').split(',');
  for (const path of pages) {
    await page.goto(new URL(path, process.env.BASE_URL).href);
    await page.waitForLoadState('networkidle');
    await page.screenshot({ path: `.claude/screenshots/auth-${path.replace(/\//g, '_')}.png`, fullPage: true });
  }

  require('fs').writeFileSync('.claude/screenshots/auth-errors.txt', errors.join('\n'));
  await browser.close();
})();

LOGIN_URL=http://localhost:3000/login \
TEST_USER_EMAIL=$TEST_USER_EMAIL \
TEST_USER_PASSWORD=$TEST_USER_PASSWORD \
BASE_URL=http://localhost:3000 \
PAGES=/dashboard,/settings,/profile \
node .claude/scripts/auth-scan.js

const { AxeBuilder } = require('@axe-core/playwright');
const results = await new AxeBuilder({ page }).analyze();
console.log(JSON.stringify(results.violations, null, 2));

npx lighthouse "$PAGE_URL" --only-categories=performance --chrome-flags="--headless" --output=json --output-path=.claude/lighthouse.json
node -e "const r=require('./.claude/lighthouse.json');console.log('Perf:',r.categories.performance.score*100,'LCP:',r.audits['largest-contentful-paint'].displayValue)"

ls .claude/scans/ 2>/dev/null

mkdir -p .claude/scans
# First scan → baseline-YYYY-MM-DD.json
# Subsequent → scan-YYYY-MM-DD.json

Scan Results: [URL]
═══════════════════

Pages scanned: [N]
Scan time: [T]

| Category | Score | Issues |
|----------|-------|--------|
| Performance (Lighthouse) | XX/100 | N issues |
| Accessibility (axe) | N violations | critical: N |
| Console errors | N pages affected | |
| Network errors | 4xx/5xx count | |

Critical Issues:
1. [page] — [issue] → [fix]
2. ...

Visual Issues (from screenshots):
1. [page] — [what's wrong visually]
2. ...

Compared to baseline: [improved/regressed/new scan]
- Performance: +5 (was 72, now 77)
- New issues: 3
- Resolved: 7

Skill	How Scan Integrates
`ship`	Run `scan` as post-deploy verification
`auto`	After UI tasks, `scan` the affected page
`fix`	When fixing UI bugs, `scan` to verify the fix
`design`	Review screenshots for visual quality and AI slop indicators

name	scan
description	Live site QA via agent-browser (token-efficient) and Playwright (login flows). Scans pages, catches visual/functional issues, compares with baselines. Use when testing a live site or after deploying.
triggers	["scan","scan it","test it","qa","visual qa"]
allowed-tools	Bash, Read, Write, Edit, Grep, Glob
model	opus
user-invocable	true
argument-hint	[url or scope]

name	scan
description	Live site QA via agent-browser (token-efficient) and Playwright (login flows). Scans pages, catches visual/functional issues, compares with baselines. Use when testing a live site or after deploying.
triggers	["scan","scan it","test it","qa","visual qa"]
allowed-tools	Bash, Read, Write, Edit, Grep, Glob
model	opus
user-invocable	true
argument-hint	[url or scope]

scan

Options d'installation

Vérifiez les fichiers source

Scan — Live Site QA

Scan — Live Site QA

Usage

Step 1: Detect or Start Target URL

Step 2: Discover Site Structure

Step 3: Run Scans (Unauthenticated)

Quick Scan (default)

Full Scan (all pages)

Step 4: Authenticated Scan (Playwright)

Step 5: Analyze Screenshots

Step 6: Accessibility (axe-core)

Step 7: Performance (Lighthouse)

Step 8: Compare with Baseline

Step 9: Report

Integration with Other Skills

Rules

scan

Informations de source

Options d'installation

Vérifiez les fichiers source

Plus depuis ce dépôt

Scan — Live Site QA

Plus depuis ce dépôt

Scan — Live Site QA

Usage

Step 1: Detect or Start Target URL

Step 2: Discover Site Structure

Step 3: Run Scans (Unauthenticated)

Quick Scan (default)

Full Scan (all pages)

Step 4: Authenticated Scan (Playwright)

Step 5: Analyze Screenshots

Step 6: Accessibility (axe-core)

Step 7: Performance (Lighthouse)

Step 8: Compare with Baseline

Step 9: Report

Integration with Other Skills

Rules