Claude Code Plugins

Community-maintained marketplace

Feedback

sketch-devtools-qa

@joelklabo/markdowntown-cli
0
0

Chrome DevTools QA workflow for the Sketch Magic kid-first UI. Use when validating Console/Network/Performance, investigating “tap doesn’t work”, /api/convert failures, mobile touch issues, or when a proof video must be backed by DevTools evidence.

Install Skill

1Download skill
2Enable skills in Claude

Open claude.ai/settings/capabilities and find the "Skills" section

3Upload to Claude

Click "Upload skill" and select the downloaded ZIP file

Note: Please verify skill by going through its instructions before using it.

SKILL.md

name sketch-devtools-qa
description Chrome DevTools QA workflow for the Sketch Magic kid-first UI. Use when validating Console/Network/Performance, investigating “tap doesn’t work”, /api/convert failures, mobile touch issues, or when a proof video must be backed by DevTools evidence.

Sketch DevTools QA

Overview

Run a repeatable DevTools QA pass for the upload → prompt → convert → result flow, with explicit log review and kid-first UX checks.

Quick Start

  1. Start the dev server and open Chrome DevTools.
  2. Enable Preserve log + Log XMLHttpRequests in Console.
  3. Run through the full flow (upload → prompt → convert → result).
  4. Record findings using the checklists in references/.

Workflow (required)

1) DevTools setup

  • Console: enable Preserve log and Group similar.
  • Network: filter by /api/convert and check for 4xx/5xx.
  • Performance: verify no frozen UI during convert.

2) Happy-path run

  • Use a real upload or sample.
  • Confirm Convert starts loading within ~300ms.
  • Confirm result image renders and download works.

3) Log review

  • Dev server logs: tail or use pnpm dev:logs if available.
  • Confirm no server errors and no console errors.

4) Kid-first UX pass

  • Validate tap targets, spacing, readability, and motion at 320/390 widths.
  • Use the kid-first checklist from references/ux-qa-checklist.md.

5) Report outcome

  • If any error exists (Console, Network, or logs), do not claim done.
  • Create follow-up issues for any UX or stability gaps.
  • Use qa-verification for the standard evidence format.

References

  • references/devtools-checklist.md — Console/Network/Performance QA list + log rubric.
  • references/ux-qa-checklist.md — Kid-first UX checklist (tap targets, motion, copy).