# Sketch Devtools QA

> 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.

- Skill: `majiayu000/sketch-devtools-qa` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/sketch-devtools-qa`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/sketch-devtools-qa/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Integrations & APIs
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/sketch-devtools-qa

---


# 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).