Lierie Skills

Webapp Testing

Playwrightを使ってWebアプリのUIを動かし、挙動・回帰を検証するための公式skill。スクショ取得やコンソールログ確認も可。

GitHub で見る ↗dev-workflow↓ 0

Install

$git clone https://github.com/anthropics/skills.git ~/anthropic-skills && cp -r ~/anthropic-skills/skills/webapp-testing ~/.claude/skills/

ターミナルで実行すると ~/.claude/skills/ に配置されます。

詳しく

何ができるの？

Playwright を使って Web アプリのボタンクリックや画面遷移を自動でなぞり、表示崩れや動作不良を検証してくれる公式 skill です。スクショ取得・コンソールログ確認まで含めて対応。

どう使うの？

  1. Claude Code に「webapp-testing で http://〇〇 のログインフローを試して」と依頼
  2. Claude がブラウザを操作しながら各ステップでスクショを撮ってくれる
  3. 結果（成功・失敗箇所・コンソールエラー）をまとめて報告してくれる

例えばこんな時

「フォームの送信ボタンを押した後にエラーメッセージが正しく出るか確認したい」というケース。webapp-testing を使えば、5 分ほどで全パターンを自動チェックして結果を表で返してくれます。

対応エージェント

  • Claude Code
  • Cursor
  • Cline
  • Codex
  • Roo
  • Other

タグ

README

詳細な使い方や設定オプションは GitHub の README を参照してください。記事化された skill には下に解説リンクが付いています。

GitHub の README を見る ↗

同じカテゴリの Skill

MCP Builder

外部APIをClaudeから呼べるようにするMCPサーバーを、ガイド付きで設計・実装できる公式skill。Python/Nodeどちらにも対応。

  • Claude Code
↓ 0dev-workflow

Web Artifacts Builder

React + Tailwind + shadcn/uiで、ステート管理やルーティングを含む複雑なHTMLアーティファクトを構築する公式skill。

  • Claude Code
↓ 0dev-workflow

Frontend Design

React + Tailwindで「AI臭くない」プロダクション品質のフロントエンドUIを設計するための公式skill。デザイン指針も含む。

  • Claude Code
↓ 0dev-workflow