skills.rest
joelklabo
joelklaboCOMMUNITY
Explore all skills by this author →
Website𝕏@joelklaboGitHub

sketch-devtools-qa

Diagnose Chrome DevTools errors and UX regressions in the upload-to-convert flow.

Updated Dec 31, 2025
Search Tags:#performance#qa#devtools#chrome#frontend-testing#network-debugging#ux-qa
One-click install
npx skills add https://github.com/joelklabo/markdowntown-cli --skill sketch-devtools-qa
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sketch-devtools-qa
Source: https://github.com/joelklabo/markdowntown-cli/tree/main/codex/skills/sketch-devtools-qa
Command: npx skills add https://github.com/joelklabo/markdowntown-cli --skill sketch-devtools-qa

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

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.

Frequently Asked Questions about sketch-devtools-qa

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I debug Chrome DevTools errors during an upload to convert flow?▼

Debug Chrome DevTools errors by enabling Preserve log and Log XMLHttpRequests, then inspect Console, Network, and Performance tabs while running the upload to convert flow to capture failures and API errors.

What is the best way to investigate /api/convert 4xx and 5xx errors in Chrome?▼

Investigate /api/convert 4xx and 5xx errors by filtering the Chrome DevTools Network tab for /api/convert entries, preserving logs, and reviewing server logs alongside network captures to isolate failures.

How do I validate kid-first UX tap targets and touch interactions using DevTools?▼

Validate kid-first UX tap targets and touch interactions by applying a DevTools checklist for tap target sizing, spacing, readability, and motion, while inspecting console logs for tap interaction failures during manual QA.

Can I use Chrome DevTools to capture evidence-backed proof videos for frontend QA?▼

Capture evidence-backed proof videos for frontend QA by running the upload to convert flow with Chrome DevTools open, preserving console and network logs, and recording screenshots and network captures as standard QA evidence.

Do I need server logs to diagnose frontend performance and network debugging issues?▼

Server logs are needed to diagnose frontend performance and network debugging issues effectively, providing backend context for /api/convert errors and supplementing Chrome DevTools console and network inspections during QA.

Related Skills

Explore More Software Engineering Skills→
tgmarinhotgmarinho

browser-testing-with-devtools

Inspect live DOM, console output, network requests, and performance metrics via Chrome DevTools MCP.

Community
Advanced
TobiasWooldridgeTobiasWooldridge
1

log-viewer

View and analyze WaveCap-SDR server logs with configurable filters.

Community
Intermediate
yash-gargyash-garg

web-perf

Analyze web performance bottlenecks and identify optimization opportunities using Chrome DevTools.

Community
Advanced
Yakoub-aiYakoub-ai
17

phaser-playtest

Drive headless Chromium sessions to verify Phaser 4 game runtime behavior.

Official
Advanced