本文へ移動
cccskills
無料GitHub で公開

web-testing

Web testing with Playwright, Vitest, k6. E2E/unit/integration/load/security/visual/a11y testing. Use for test automation, flakiness, Core Web Vitals, mobile gestures, cross-browser.

mrgoonie/claudekit-skills
インストール方法を見る

含まれるファイル（20）

  • SKILL.md2.9 KB
  • references/accessibility-testing.md1.9 KB
  • references/api-testing.md1.8 KB
  • references/component-testing.md2.4 KB
  • references/cross-browser-checklist.md1.7 KB
  • references/e2e-testing-playwright.md1.9 KB
  • references/functional-testing-checklist.md2.7 KB
  • references/interactive-testing-patterns.md2.5 KB
  • references/load-testing-k6.md1.7 KB
  • references/mobile-gesture-testing.md2.1 KB
  • references/performance-core-web-vitals.md1.5 KB
  • references/pre-release-checklist.md1.8 KB
  • references/security-checklists.md2.5 KB
  • references/security-testing-overview.md2.8 KB
  • references/shadow-dom-testing.md1.6 KB
  • references/test-flakiness-mitigation.md1.8 KB
  • references/testing-pyramid-strategy.md1.6 KB
  • references/unit-integration-testing.md1.8 KB
  • references/visual-regression.md2.2 KB
  • references/vulnerability-payloads.md1.3 KB

SKILL.md（原文）

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Web Testing Skill

Comprehensive web testing: unit, integration, E2E, load, security, visual regression, accessibility.

Quick Start

npx vitest run                    # Unit tests
npx playwright test               # E2E tests
npx playwright test --ui          # E2E with UI
k6 run load-test.js               # Load tests
npx @axe-core/cli https://example.com  # Accessibility
npx lighthouse https://example.com     # Performance

Testing Pyramid (70-20-10)

LayerRatioFrameworkSpeed
Unit70%Vitest/Jest<50ms
Integration20%Vitest + fixtures100-500ms
E2E10%Playwright5-30s

When to Use

  • Unit: Functions, utilities, state logic
  • Integration: API endpoints, database ops, modules
  • E2E: Critical flows (login, checkout, payment)
  • Load: Pre-release performance validation
  • Security: Pre-deploy vulnerability scanning
  • Visual: UI regression detection

Reference Documentation

Core Testing

  • ./references/unit-integration-testing.md - Unit/integration patterns
  • ./references/e2e-testing-playwright.md - Playwright E2E workflows
  • ./references/component-testing.md - React/Vue/Angular component testing
  • ./references/testing-pyramid-strategy.md - Test ratios, priority matrix

Cross-Browser & Mobile

  • ./references/cross-browser-checklist.md - Browser/device matrix
  • ./references/mobile-gesture-testing.md - Touch, swipe, orientation
  • ./references/shadow-dom-testing.md - Web components testing

Interactive & Forms

  • ./references/interactive-testing-patterns.md - Forms, keyboard, drag-drop
  • ./references/functional-testing-checklist.md - Feature testing

Performance & Quality

  • ./references/performance-core-web-vitals.md - LCP/CLS/INP, Lighthouse CI
  • ./references/visual-regression.md - Screenshot comparison
  • ./references/test-flakiness-mitigation.md - Stability strategies

Accessibility

  • ./references/accessibility-testing.md - WCAG checklist, axe-core

Security

  • ./references/security-testing-overview.md - OWASP Top 10, tools
  • ./references/security-checklists.md - Auth, API, headers
  • ./references/vulnerability-payloads.md - SQL/XSS/CSRF payloads

API & Load

  • ./references/api-testing.md - API test patterns
  • ./references/load-testing-k6.md - k6 load test patterns

Checklists

  • ./references/pre-release-checklist.md - Complete release checklist

CI/CD Integration

jobs:
  test:
    steps:
      - run: npm run test:unit      # Gate 1: Fast fail
      - run: npm run test:e2e       # Gate 2: After unit pass
      - run: npm run test:a11y      # Accessibility
      - run: npx lhci autorun       # Performance

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

ログインしてレビューを書く

同じリポジトリのスキル

概要と使いどころ

aesthetic

無料

Create aesthetically beautiful interfaces following proven design principles. Use when building UI/UX, analyzing designs from inspiration sites, generating design images with ai-multimodal, implementing visual hierarchy and color theory, adding micro-interactions, or creating design documentation. Includes workflows for capturing and analyzing inspiration screenshots with chrome-devtools and ai-multimodal, iterative design image generation until aesthetic standards are met, and comprehensive design system guidance covering BEAUTIFUL (aesthetic principles), RIGHT (functionality/accessibility), SATISFYING (micro-interactions), and PEAK (storytelling) stages. Integrates with chrome-devtools, ai-multimodal, media-processing, ui-styling, and web-frameworks skills.

日本語の概要は準備中です。原文の説明を表示しています。

mrgoonie/claudekit-skills2,2282026年4月3日 更新

ai-multimodal

無料

Process and generate multimedia content using Google Gemini API. Capabilities include analyze audio files (transcription with timestamps, summarization, speech understanding, music/sound analysis up to 9.5 hours), understand images (captioning, object detection, OCR, visual Q&A, segmentation), process videos (scene detection, Q&A, temporal analysis, YouTube URLs, up to 6 hours), extract from documents (PDF tables, forms, charts, diagrams, multi-page), generate images (text-to-image, editing, composition, refinement). Use when working with audio/video files, analyzing images or screenshots, processing PDF documents, extracting structured data from media, creating images from text prompts, or implementing multimodal AI features. Supports multiple models (Gemini 2.5/2.0) with context windows up to 2M tokens.

日本語の概要は準備中です。原文の説明を表示しています。

mrgoonie/claudekit-skills2,2282026年4月3日 更新

backend-development

無料

Build robust backend systems with modern technologies (Node.js, Python, Go, Rust), frameworks (NestJS, FastAPI, Django), databases (PostgreSQL, MongoDB, Redis), APIs (REST, GraphQL, gRPC), authentication (OAuth 2.1, JWT), testing strategies, security best practices (OWASP Top 10), performance optimization, scalability patterns (microservices, caching, sharding), DevOps practices (Docker, Kubernetes, CI/CD), and monitoring. Use when designing APIs, implementing authentication, optimizing database queries, setting up CI/CD pipelines, handling security vulnerabilities, building microservices, or developing production-ready backend systems.

日本語の概要は準備中です。原文の説明を表示しています。

mrgoonie/claudekit-skills2,2282026年4月3日 更新

better-auth

無料

Implement authentication and authorization with Better Auth - a framework-agnostic TypeScript authentication framework. Features include email/password authentication with verification, OAuth providers (Google, GitHub, Discord, etc.), two-factor authentication (TOTP, SMS), passkeys/WebAuthn support, session management, role-based access control (RBAC), rate limiting, and database adapters. Use when adding authentication to applications, implementing OAuth flows, setting up 2FA/MFA, managing user sessions, configuring authorization rules, or building secure authentication systems for web applications.

日本語の概要は準備中です。原文の説明を表示しています。

mrgoonie/claudekit-skills2,2282026年4月3日 更新

bunny

無料

Integrate Bunny.net services (CDN, Storage, Stream, DNS, Edge Scripting, Shield, Magic Containers, Optimizer, Database). Use when building with Bunny.net APIs, deploying to Bunny CDN, uploading files to Edge Storage, managing video streaming, configuring DNS zones, writing edge scripts, setting up WAF/DDoS protection, deploying containers, or optimizing images. Triggers on "bunny", "bunnycdn", "b-cdn", "pull zone", "edge storage", "bunny stream".

日本語の概要は準備中です。原文の説明を表示しています。

mrgoonie/claudekit-skills2,2282026年4月3日 更新

chrome-devtools

無料

Browser automation, debugging, and performance analysis using Puppeteer CLI scripts. Use for automating browsers, taking screenshots, analyzing performance, monitoring network traffic, web scraping, form automation, and JavaScript debugging.

日本語の概要は準備中です。原文の説明を表示しています。

mrgoonie/claudekit-skills2,2282026年4月3日 更新

mrgoonie のスキルをすべて見る

このスキルの問題を報告する