verify-artifact

Name: verify-artifact
Author: bluzir

40installs10forks

How to install verify-artifact?

bluzir/claude-code-design/verify-artifact

$npx -y skills add bluzir/claude-code-design --skill verify-artifact

Installs into the current project.

Summary

Screenshot + console sweep + visual inspection of an artifact for layout/color/typography regressions. Silent on pass, reports only on issues. Use after /done reports clean and before end-of-turn.

Files · 1

View on GitHub

SKILL.md

1	# Verify Artifact
2
3	Deeper check than `/done` — uses vision on the actual rendering and flags visual problems, not just console errors.
4
5	## Pipeline
6
7	1. Ensure preview is live: if `$0` isn't already open in Chrome DevTools MCP, navigate there first via `/preview $0`.
8
9	2. Deck-aware pre-check (if `<deck-stage>` present). Decks have `overflow: hidden` on sections — vertical overflow is visually silent, so vision alone will miss it. Before screenshot, also hard-reload with cache-bust to make sure the browser is rendering the current on-disk CSS, not a cached state from before the last edit:
10
11	```js
12	mcp__chrome-devtools__navigate_page({ type: "reload", ignoreCache: true })
13	```
14
15	Then run the programmatic audit:
16
17	```js
18	// mcp__chrome-devtools__evaluate_script
19	async () => {
20	const stage = document.querySelector('deck-stage');
21	if (!stage) return { isDeck: false };
22	const DECORATIVE = '.glow, .glow-2, .hero-glow, .chrome, [data-decorative], [aria-hidden="true"].backdrop';
23	const isDecorative = (el) => {
24	if (el.matches(DECORATIVE) \|\| el.closest(DECORATIVE)) return true;
25	const cs = getComputedStyle(el);
26	if (cs.pointerEvents === 'none' && !el.textContent?.trim() && parseFloat(cs.opacity) < 1) return true;
27	return false;
28	};
29	const out = [];
30	for (let i = 0; i < stage.totalSlides; i++) {
31	stage.goToSlide(i);
32	await new Promise(r => setTimeout(r, 80));
33	const s = stage.querySelectorAll('section')[i];
34	const sRect = s.getBoundingClientRect();
35	const scale = 1080 / sRect.height;
36	let maxBottom = 0, culprit = null;
37	for (const el of s.querySelectorAll('*')) {
38	if (isDecorative(el)) continue;
39	const cs = getComputedStyle(el);
40	if (cs.display === 'none' \|\| cs.visibility === 'hidden') continue;
41	const r = el.getBoundingClientRect();
42	if (r.height === 0 && r.width === 0) continue;
43	const b = (r.bottom - sRect.top) * scale;
44	if (b > maxBottom) { maxBottom = b; culprit = el.className?.toString?.().slice(0, 40) \|\| el.tagName; }
45	}
46	const contentBottom = Math.round(maxBottom);
47	const overflow = contentBottom - 1080;
48	const headroom = 1080 - contentBottom;
49	const status = overflow > 0 ? 'FAIL' : headroom < 40 ? 'WARN' : 'OK';
50	out.push({ slide: i + 1, contentBottom, overflow, headroom, status, culprit });
51	}
52	stage.goToSlide(0);
53	return { isDeck: true, slides: out };
54	}
55	```
56
57	Severity:
58	- `FAIL` (`overflow > 0`) — P0. Content silently clipped. Report list of slides + culprit class; skip rest of verify, tell Claude to fix.
59	- `WARN` (`headroom < 40`) — P1. Visually tight against edge (font-metric variance can push over). Report as soft issue.
60	- `OK` — proceed.
61
62	3. Take a fresh screenshot to a timestamped path:
63	```
64	ts=$(Bash(date -u +%Y%m%dT%H%M%SZ))
65	mcp__chrome-devtools__take_screenshot({ filePath: `.claude/verify-${ts}.png`, fullPage: true })
66	```
67
68	For decks that passed the overflow audit, also sample slides at positions `[0, mid, last]` and save as `.claude/verify-${ts}-slide-${n}.png` — vision-check each rather than just the current viewport.
69
70	3. Read the screenshot with vision: use the `Read` tool on `.claude/verify-<ts>.png` — Claude is multimodal and will see the image as input.
71
72	4. Grab console: `mcp__chrome-devtools__list_console_messages` — collect all severities.
73
74	5. Reason over the image + console. Check against the Claude Design taste rules:
75	- Typography: text ≥ 24px on 1920×1080 slides, ≥ 12pt on print, ≥ 44px for mobile hit targets, legible hierarchy, no AI-slop fonts (Inter, Roboto, Arial, Fraunces)
76	- Layout: no overflow/clipping/misalignment, consistent spacing rhythm
77	- Color: contrast ≥ 4.5:1 on body text, palette from brand/design system, no invented colors
78	- Content: no Lorem ipsum or TODO markers still visible, no filler
79	- AI-slop tropes: no aggressive gradients, no rounded-card-with-left-border-accent, no emoji without brand justification, no SVG-drawn imagery (should be placeholders)
80	- Console: errors, React hydration mismatches, CORS, missing assets
81
82	6. Severity rubric:
83	- P0 — artifact is broken (crashes, blank page, major overflow)
84	- P1 — looks wrong (contrast failure, typography violation, layout bug)
85	- P2 — could be better (inconsistent spacing, minor color drift)
86	- P3 — nitpick
87
88	7. *Silent-on-pass:

People who liked this also viewed

6 picks

Type

verify-artifact

40installs10forks

View on GitHub

How to install verify-artifact?

bluzir/claude-code-design/verify-artifact

$npx -y skills add bluzir/claude-code-design --skill verify-artifact

Installs into the current project.

Summary

Screenshot + console sweep + visual inspection of an artifact for layout/color/typography regressions. Silent on pass, reports only on issues. Use after /done reports clean and before end-of-turn.

Files · 1

View on GitHub

SKILL.md

1	# Verify Artifact
2
3	Deeper check than `/done` — uses vision on the actual rendering and flags visual problems, not just console errors.
4
5	## Pipeline
6
7	1. Ensure preview is live: if `$0` isn't already open in Chrome DevTools MCP, navigate there first via `/preview $0`.
8
9	2. Deck-aware pre-check (if `<deck-stage>` present). Decks have `overflow: hidden` on sections — vertical overflow is visually silent, so vision alone will miss it. Before screenshot, also hard-reload with cache-bust to make sure the browser is rendering the current on-disk CSS, not a cached state from before the last edit:
10
11	```js
12	mcp__chrome-devtools__navigate_page({ type: "reload", ignoreCache: true })
13	```
14
15	Then run the programmatic audit:
16
17	```js
18	// mcp__chrome-devtools__evaluate_script
19	async () => {
20	const stage = document.querySelector('deck-stage');
21	if (!stage) return { isDeck: false };
22	const DECORATIVE = '.glow, .glow-2, .hero-glow, .chrome, [data-decorative], [aria-hidden="true"].backdrop';
23	const isDecorative = (el) => {
24	if (el.matches(DECORATIVE) \|\| el.closest(DECORATIVE)) return true;
25	const cs = getComputedStyle(el);
26	if (cs.pointerEvents === 'none' && !el.textContent?.trim() && parseFloat(cs.opacity) < 1) return true;
27	return false;
28	};
29	const out = [];
30	for (let i = 0; i < stage.totalSlides; i++) {
31	stage.goToSlide(i);
32	await new Promise(r => setTimeout(r, 80));
33	const s = stage.querySelectorAll('section')[i];
34	const sRect = s.getBoundingClientRect();
35	const scale = 1080 / sRect.height;
36	let maxBottom = 0, culprit = null;
37	for (const el of s.querySelectorAll('*')) {
38	if (isDecorative(el)) continue;
39	const cs = getComputedStyle(el);
40	if (cs.display === 'none' \|\| cs.visibility === 'hidden') continue;
41	const r = el.getBoundingClientRect();
42	if (r.height === 0 && r.width === 0) continue;
43	const b = (r.bottom - sRect.top) * scale;
44	if (b > maxBottom) { maxBottom = b; culprit = el.className?.toString?.().slice(0, 40) \|\| el.tagName; }
45	}
46	const contentBottom = Math.round(maxBottom);
47	const overflow = contentBottom - 1080;
48	const headroom = 1080 - contentBottom;
49	const status = overflow > 0 ? 'FAIL' : headroom < 40 ? 'WARN' : 'OK';
50	out.push({ slide: i + 1, contentBottom, overflow, headroom, status, culprit });
51	}
52	stage.goToSlide(0);
53	return { isDeck: true, slides: out };
54	}
55	```
56
57	Severity:
58	- `FAIL` (`overflow > 0`) — P0. Content silently clipped. Report list of slides + culprit class; skip rest of verify, tell Claude to fix.
59	- `WARN` (`headroom < 40`) — P1. Visually tight against edge (font-metric variance can push over). Report as soft issue.
60	- `OK` — proceed.
61
62	3. Take a fresh screenshot to a timestamped path:
63	```
64	ts=$(Bash(date -u +%Y%m%dT%H%M%SZ))
65	mcp__chrome-devtools__take_screenshot({ filePath: `.claude/verify-${ts}.png`, fullPage: true })
66	```
67
68	For decks that passed the overflow audit, also sample slides at positions `[0, mid, last]` and save as `.claude/verify-${ts}-slide-${n}.png` — vision-check each rather than just the current viewport.
69
70	3. Read the screenshot with vision: use the `Read` tool on `.claude/verify-<ts>.png` — Claude is multimodal and will see the image as input.
71
72	4. Grab console: `mcp__chrome-devtools__list_console_messages` — collect all severities.
73
74	5. Reason over the image + console. Check against the Claude Design taste rules:
75	- Typography: text ≥ 24px on 1920×1080 slides, ≥ 12pt on print, ≥ 44px for mobile hit targets, legible hierarchy, no AI-slop fonts (Inter, Roboto, Arial, Fraunces)
76	- Layout: no overflow/clipping/misalignment, consistent spacing rhythm
77	- Color: contrast ≥ 4.5:1 on body text, palette from brand/design system, no invented colors
78	- Content: no Lorem ipsum or TODO markers still visible, no filler
79	- AI-slop tropes: no aggressive gradients, no rounded-card-with-left-border-accent, no emoji without brand justification, no SVG-drawn imagery (should be placeholders)
80	- Console: errors, React hydration mismatches, CORS, missing assets
81
82	6. Severity rubric:
83	- P0 — artifact is broken (crashes, blank page, major overflow)
84	- P1 — looks wrong (contrast failure, typography violation, layout bug)
85	- P2 — could be better (inconsistent spacing, minor color drift)
86	- P3 — nitpick
87
88	7. *Silent-on-pass:

People who liked this also viewed

6 picks

Type