sketch-devtools-qa
CommunityRepeatable DevTools QA for Sketch flows
System Documentation
What problem does it solve?
Provides a repeatable Chrome DevTools QA workflow to validate the upload → prompt → convert → result flow for the Sketch Magic kid-first UI, enabling engineers and QA to diagnose Console, Network, Performance, and touch interaction issues and produce evidence-backed findings.
Core Features & Use Cases
- DevTools setup checklist (Preserve log, Group similar, filter /api/convert) and network/console/performance inspection.
- Happy-path validation with timing expectations and result rendering checks, plus log review and server log guidance.
- Kid-first UX checklist for tap targets, spacing, readability, motion, and viewport tests; use cases include investigating tap failures, /api/convert errors, and producing proof videos with DevTools evidence.
Quick Start
Open Chrome DevTools with Preserve log and Log XMLHttpRequests enabled, run the upload → prompt → convert → result flow, capture Console and Network screenshots and the /api/convert entry, and record findings against the provided checklists.
Dependency Matrix
Required Modules
None requiredComponents
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: sketch-devtools-qa Download link: https://github.com/joelklabo/markdowntown-cli/archive/main.zip#sketch-devtools-qa Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.