OpenSkillIndex← back to search
claude-code

Agent-Skills-Hub web-frontend-tester

Run frontend functional, accessibility, visual, and performance test planning with structured reports.

install
source · Clone the upstream repo
git clone https://github.com/0x-Professor/Agent-Skills-Hub
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/0x-Professor/Agent-Skills-Hub "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/web-frontend-tester" ~/.claude/skills/0x-professor-agent-skills-hub-web-frontend-tester && rm -rf "$T"
manifest: skills/web-frontend-tester/SKILL.md
source content

Web Frontend Tester

Objective

Validate frontend quality across user journeys, a11y, visual regressions, and performance targets.

Required Workflow

  1. Set up Playwright for E2E critical journeys (login, checkout, form submit, navigation).
  2. Configure unit/component tests with Vitest + Testing Library (or Jest + Testing Library).
  3. Run accessibility audits:
    • axe-core via 
      @axe-core/playwright
    • Lighthouse CI for performance, SEO, accessibility
  4. Run visual regression tests with Percy or Chromatic.
  5. Verify page load under 3 seconds on 4G, Lighthouse performance score >= 80, and no console errors.
  6. Check missing alt tags, color contrast, and keyboard navigation.
  7. Output 
    frontend-test-report.json
    with Lighthouse scores and pass/fail counts.

Execution

python skills/web-frontend-tester/scripts/frontend_tester.py --input <workspace> --output <out.json> --format json

References

  • references/tools.md