lazycodex-ai 5.1.44 → 5.1.46

package/packages/shared-skills/skills/frontend/scripts/perfection/check-draft-guard.test.ts

@@ -0,0 +1,101 @@
+import { describe, expect, test } from "bun:test"
+import { spawnSync } from "node:child_process"
+import { readdirSync, readFileSync } from "node:fs"
+import { join } from "node:path"
+import type { DraftRuleId } from "./draft-guard/findings"
+import { lintDraft } from "./draft-guard/lint"
+
+const FIXTURES = join(import.meta.dir, "fixtures", "draft-guard")
+const ACCENT_FIXTURES = join(import.meta.dir, "fixtures", "accent-stripes")
+const SCRIPT = join(import.meta.dir, "check-draft-guard.ts")
+
+const EXPECTED: Readonly<Record<string, ReadonlyArray<[number, DraftRuleId]>>> = {
+	"promo-copy.html": [[2, "promo-copy"], [3, "promo-copy"], [5, "promo-copy"]],
+	"promo-copy.tsx": [[4, "promo-copy"], [5, "promo-copy"]],
+	"emoji-icons.tsx": [[4, "emoji-icon"], [6, "emoji-icon"]],
+	"vanity-stats.html": [[2, "vanity-stat"], [3, "vanity-stat"], [4, "vanity-stat"]],
+	"decorative-badge.vue": [[3, "decorative-badge"], [4, "decorative-badge"]],
+	"components.tsx": [
+		[5, "decorative-badge"],
+		[6, "decorative-badge"],
+		[7, "emoji-icon"],
+		[7, "decorative-badge"],
+		[8, "emoji-icon"],
+		[9, "emoji-icon"],
+		[10, "vanity-stat"],
+		[11, "vanity-stat"],
+		[12, "vanity-stat"],
+		[13, "promo-copy"],
+	],
+	"attribute-edges.html": [[2, "promo-copy"], [3, "promo-copy"], [4, "vanity-stat"], [5, "decorative-badge"], [6, "promo-copy"]],
+	"jsx-edges.tsx": [[1, "promo-copy"]],
+}
+
+function lintFixture(dir: string, name: string) {
+	const path = join(FIXTURES, dir, name)
+	return lintDraft([{ path, text: readFileSync(path, "utf8") }])
+}
+
+describe("#given a positive fixture with a generated-look tell in its markup", () => {
+	test("#then every positive fixture has an expectation", () => {
+		expect(readdirSync(join(FIXTURES, "positive")).sort()).toEqual(Object.keys(EXPECTED).sort())
+	})
+
+	for (const [name, expected] of Object.entries(EXPECTED)) {
+		test(`#when ${name} is linted #then it reports exactly ${expected.length} finding(s) at the expected lines`, () => {
+			const findings = lintFixture("positive", name).map((f): [number, DraftRuleId] => [f.line, f.rule])
+			expect(findings).toEqual([...expected])
+		})
+	}
+})
+
+describe("#given a negative fixture (plain copy, code, scripts, styles, comments, bound values, status badges)", () => {
+	for (const name of readdirSync(join(FIXTURES, "negative"))) {
+		test(`#when ${name} is linted #then it reports nothing`, () => {
+			expect(lintFixture("negative", name)).toEqual([])
+		})
+	}
+})
+
+describe("#given a generated page written on one line", () => {
+	test("#when it holds two promo phrases #then both are reported, each at its own column", () => {
+		const text = "<p>Seamless sync and effortless setup</p>\n"
+		const findings = lintDraft([{ path: "page.html", text }])
+		expect(findings.map((f) => [f.line, f.column, f.rule])).toEqual([
+			[1, text.indexOf("Seamless") + 1, "promo-copy"],
+			[1, text.indexOf("effortless") + 1, "promo-copy"],
+		])
+	})
+})
+
+describe("#given a stylesheet", () => {
+	test("#when it is linted #then text rules are not applied to CSS", () => {
+		expect(lintDraft([{ path: "a.css", text: '.hero::before { content: "Unlock 🚀"; }\n' }])).toEqual([])
+	})
+})
+
+describe("#given the CLI", () => {
+	const run = (...args: string[]) => spawnSync(process.execPath, [SCRIPT, ...args], { encoding: "utf8", timeout: 30_000 })
+
+	test("#when it scans the draft-guard positives #then it exits 1 and prints file:line findings", () => {
+		const result = run(join(FIXTURES, "positive"))
+		expect(result.status).toBe(1)
+		expect(result.stdout).toMatch(/vanity-stats\.html:2:\d+ {2}vanity-stat/)
+	})
+
+	test("#when it scans an accent-stripe positive #then the accent-stripe rules still report through it", () => {
+		const result = run("--json", join(ACCENT_FIXTURES, "positive", "border-top-card.css"))
+		expect(JSON.parse(result.stdout)).toEqual([expect.objectContaining({ line: 4, rule: "edge-stripe" })])
+		expect(result.status).toBe(1)
+	})
+
+	test("#when it scans both negative fixture sets #then it exits 0", () => {
+		expect(run(join(FIXTURES, "negative"), join(ACCENT_FIXTURES, "negative")).status).toBe(0)
+	})
+
+	test("#when no path is given #then it exits 2 with usage", () => {
+		const result = run()
+		expect(result.status).toBe(2)
+		expect(result.stderr).toContain("usage:")
+	})
+})

package/packages/shared-skills/skills/frontend/scripts/perfection/check-draft-guard.ts

@@ -0,0 +1,40 @@
+#!/usr/bin/env bun
+// The draft guard in one command: accent stripes plus generated-look copy and markup (promo copy, emoji icons, hype badges, vanity stats).
+// Usage: bun check-draft-guard.ts [--json] <file-or-dir>...   Exit 0 clean, 1 findings, 2 usage or unreadable target.
+import { readFileSync } from "node:fs"
+import { RULE_MESSAGES } from "./accent-stripes/findings"
+import { lintFiles, type SourceFile } from "./accent-stripes/lint"
+import { collectFiles } from "./collect-files"
+import { DRAFT_RULE_MESSAGES } from "./draft-guard/findings"
+import { lintDraft } from "./draft-guard/lint"
+
+const MESSAGES: Readonly<Record<string, string>> = { ...RULE_MESSAGES, ...DRAFT_RULE_MESSAGES }
+
+function main(argv: readonly string[]): number {
+	const json = argv.includes("--json")
+	const targets = argv.filter((a) => a !== "--json")
+	if (targets.length === 0) {
+		process.stderr.write("usage: check-draft-guard.ts [--json] <file-or-dir>...\n")
+		return 2
+	}
+	const { paths, missing } = collectFiles(targets)
+	if (missing.length > 0) {
+		process.stderr.write(`check-draft-guard: cannot read ${missing.join(", ")}\n`)
+		return 2
+	}
+	const files: SourceFile[] = paths.map((path) => ({ path, text: readFileSync(path, "utf8") }))
+	const findings = [...lintFiles(files), ...lintDraft(files)].sort(
+		(a, b) => a.file.localeCompare(b.file) || a.line - b.line || a.column - b.column,
+	)
+	if (json) process.stdout.write(`${JSON.stringify(findings, null, 2)}\n`)
+	else {
+		for (const f of findings) {
+			process.stdout.write(`${f.file}:${f.line}:${f.column}  ${f.rule}  ${MESSAGES[f.rule]}\n    > ${f.excerpt}\n`)
+		}
+		const summary = findings.length === 0 ? "clean" : `${findings.length} finding(s); fix each before visual QA`
+		process.stdout.write(`check-draft-guard: ${paths.length} file(s), ${summary}\n`)
+	}
+	return findings.length === 0 ? 0 : 1
+}
+
+process.exitCode = main(process.argv.slice(2))

package/packages/shared-skills/skills/frontend/scripts/perfection/collect-files.test.ts

@@ -0,0 +1,50 @@
+import { describe, expect, test } from "bun:test"
+import { chmodSync, mkdirSync, mkdtempSync, rmSync, symlinkSync, writeFileSync } from "node:fs"
+import { tmpdir } from "node:os"
+import { join } from "node:path"
+import { collectFiles } from "./collect-files"
+
+// Owner test for the file-walk contract both perfection CLIs share (check-accent-stripes.ts, check-draft-guard.ts).
+function withDir(run: (dir: string) => void): void {
+	const dir = mkdtempSync(join(tmpdir(), "collect-files-"))
+	try {
+		run(dir)
+	} finally {
+		chmodSync(dir, 0o700)
+		rmSync(dir, { recursive: true, force: true })
+	}
+}
+
+// Permission bits do not stop root, and Windows ignores chmod, so the unreadable-directory case cannot be built there.
+const cannotBuildUnreadableDir = process.platform === "win32" || process.getuid?.() === 0
+
+describe("#given a scanned directory", () => {
+	test("#when it holds a dangling symlink #then the link is skipped and the rest is collected", () => {
+		withDir((dir) => {
+			symlinkSync(join(dir, "missing-target"), join(dir, "broken-link.tsx"))
+			writeFileSync(join(dir, "page.html"), "<p>ok</p>\n")
+			expect(collectFiles([dir])).toEqual({ paths: [join(dir, "page.html")], missing: [] })
+		})
+	})
+
+	test.skipIf(cannotBuildUnreadableDir)("#when a nested directory cannot be listed #then it is skipped and the rest is collected", () => {
+		withDir((dir) => {
+			const locked = join(dir, "locked")
+			mkdirSync(locked)
+			writeFileSync(join(locked, "hidden.css"), ".a {}\n")
+			writeFileSync(join(dir, "page.html"), "<p>ok</p>\n")
+			chmodSync(locked, 0o000)
+			try {
+				expect(collectFiles([dir])).toEqual({ paths: [join(dir, "page.html")], missing: [] })
+			} finally {
+				chmodSync(locked, 0o700)
+			}
+		})
+	})
+
+	test("#when an explicit target does not exist #then it is reported as missing", () => {
+		withDir((dir) => {
+			expect(collectFiles([join(dir, "nope")])).toEqual({ paths: [], missing: [join(dir, "nope")] })
+		})
+	})
+})

package/packages/shared-skills/skills/frontend/scripts/perfection/collect-files.ts

@@ -0,0 +1,53 @@
+import { readdirSync, statSync, type Stats } from "node:fs"
+import { join } from "node:path"
+
+const SCANNED = /\.(?:css|scss|less|pcss|postcss|html?|[cm]?[jt]sx?|vue|svelte|astro)$/i
+const SKIPPED_DIRS = new Set([
+	"node_modules", ".git", "dist", "build", "out", ".next", ".nuxt", ".svelte-kit", ".astro",
+	".turbo", ".cache", "coverage", "vendor", ".vercel", ".output",
+])
+const MAX_BYTES = 1_000_000
+
+function statOrNull(path: string): Stats | null {
+	try {
+		return statSync(path)
+	} catch {
+		return null
+	}
+}
+
+function entriesOrNull(path: string): string[] | null {
+	try {
+		return readdirSync(path)
+	} catch {
+		return null
+	}
+}
+
+/** Lintable source files under the targets; dangling links and unreadable entries are skipped, an unreadable explicit target is reported. */
+export function collectFiles(targets: readonly string[]): { readonly paths: string[]; readonly missing: string[] } {
+	const paths: string[] = []
+	const missing: string[] = []
+	const walk = (path: string, explicit: boolean): void => {
+		const stat = statOrNull(path)
+		if (!stat) {
+			if (explicit) missing.push(path)
+			return
+		}
+		if (stat.isDirectory()) {
+			const entries = entriesOrNull(path)
+			if (entries === null) {
+				if (explicit) missing.push(path)
+				return
+			}
+			for (const entry of entries) {
+				if (!SKIPPED_DIRS.has(entry)) walk(join(path, entry), false)
+			}
+			return
+		}
+		const minified = /\.min\.[a-z]+$/i.test(path) || path.endsWith(".d.ts")
+		if (SCANNED.test(path) && !minified && stat.size <= MAX_BYTES) paths.push(path)
+	}
+	for (const target of targets) walk(target, true)
+	return { paths, missing }
+}

package/packages/shared-skills/skills/frontend/scripts/perfection/draft-guard/findings.ts

@@ -0,0 +1,16 @@
+export type DraftRuleId = "promo-copy" | "emoji-icon" | "decorative-badge" | "vanity-stat"
+
+export type DraftFinding = {
+	readonly file: string
+	readonly line: number
+	readonly column: number
+	readonly rule: DraftRuleId
+	readonly excerpt: string
+}
+
+export const DRAFT_RULE_MESSAGES: Readonly<Record<DraftRuleId, string>> = {
+	"promo-copy": "promotional filler in visible copy; say what the screen does or shows instead",
+	"emoji-icon": "emoji used as an icon or bullet; use an SVG icon from the project's icon set, or nothing",
+	"decorative-badge": "badge or chip carrying a hype label instead of a state; remove it or show a real status",
+	"vanity-stat": "stat tile with a marketing-form number (10x, 500+, 24/7); show the measured figure with its unit and period, or remove the tile",
+}

package/packages/shared-skills/skills/frontend/scripts/perfection/draft-guard/lint.ts

@@ -0,0 +1,38 @@
+import { lineLocator } from "../accent-stripes/findings"
+import type { SourceFile } from "../accent-stripes/lint"
+import type { DraftFinding } from "./findings"
+import { checkNode } from "./rules"
+import { type MarkupKind, textNodes } from "./text-nodes"
+
+function markupKind(path: string): MarkupKind | null {
+	if (/\.html?$/i.test(path)) return "html"
+	if (/\.[cm]?[jt]sx$/i.test(path)) return "jsx"
+	if (/\.(?:vue|svelte|astro)$/i.test(path)) return "sfc"
+	return null
+}
+
+function excerptAt(text: string, offset: number): string {
+	const lineStart = text.lastIndexOf("\n", offset - 1) + 1
+	const lineEnd = text.indexOf("\n", offset)
+	return text.slice(lineStart, lineEnd < 0 ? undefined : lineEnd).trim().slice(0, 140)
+}
+
+export function lintDraft(files: readonly SourceFile[]): DraftFinding[] {
+	const findings: DraftFinding[] = []
+	for (const file of files) {
+		const kind = markupKind(file.path)
+		if (kind === null) continue
+		const locate = lineLocator(file.text)
+		const seen = new Set<string>()
+		for (const node of textNodes(file.text, kind)) {
+			for (const hit of checkNode(node)) {
+				const at = locate(hit.offset)
+				const key = `${hit.offset}:${hit.rule}`
+				if (seen.has(key)) continue
+				seen.add(key)
+				findings.push({ file: file.path, ...at, rule: hit.rule, excerpt: excerptAt(file.text, hit.offset) })
+			}
+		}
+	}
+	return findings.sort((a, b) => a.file.localeCompare(b.file) || a.line - b.line || a.column - b.column)
+}

package/packages/shared-skills/skills/frontend/scripts/perfection/draft-guard/rules.ts

@@ -0,0 +1,69 @@
+import type { DraftRuleId } from "./findings"
+import { type Element, isStatElement, type TextNode } from "./text-nodes"
+
+export type RuleHit = { readonly rule: DraftRuleId; readonly offset: number }
+
+const PROMO_PHRASES = new RegExp(
+	[
+		String.raw`\bseamless(?:ly)?\b`,
+		String.raw`\beffortless(?:ly)?\b`,
+		String.raw`\bsupercharge[sd]?\b`,
+		String.raw`\bunlock (?:the (?:full )?power|the full potential|your (?:full )?potential)\b`,
+		String.raw`\bat a glance\b`,
+		String.raw`\bcutting[- ]edge\b`,
+		String.raw`\bgame[- ]chang(?:er|ing)\b`,
+		String.raw`\brevolutioni[sz]e\b`,
+		String.raw`\bnext[- ]level\b`,
+		String.raw`\bworld[- ]class\b`,
+		String.raw`\belevate your\b`,
+		"한눈에",
+		"손쉽게",
+		"스마트한",
+		"혁신적인",
+	].join("|"),
+	"giu",
+)
+
+const EMOJI = /\p{Emoji_Presentation}|\p{Extended_Pictographic}\uFE0F/u
+const EMOJI_ALL = /\p{Emoji_Presentation}|\p{Extended_Pictographic}\uFE0F?/gu
+const NUMERIC_ENTITY = /&#(?:x([0-9a-f]+)|(\d+));/gi
+const BADGE_CLASS = /^(?:badge|chip|pill|tag)(?:$|[-_])/
+const BADGE_COMPONENT = /^(?:Badge|Chip|Pill|Tag)$/
+const HYPE_LABEL = /^(?:new!?|hot|trending|popular|featured|ai|ai[- ]powered|premium|recommended|best|신규|인기|추천|베스트)$/i
+const AMOUNT = String.raw`(?:\d{1,3}(?:[.,]\d{3})+|\d+)(?:[.,]\d+)?`
+const MARKETING_NUMBER = new RegExp(String.raw`^(?:[$€£¥₩]?${AMOUNT}\s*(?:[kmb]|%)?\s*\+|${AMOUNT}\s*[x×]|24\/7)$`, "i")
+
+const isBadge = (element: Element | undefined): boolean =>
+	element !== undefined && !element.stateful && (BADGE_COMPONENT.test(element.name) || element.classes.some((c) => BADGE_CLASS.test(c)))
+
+function leadingOffset(node: TextNode): number {
+	return node.offset + (node.text.length - node.text.trimStart().length)
+}
+
+function emojiOffset(text: string): number | null {
+	const direct = EMOJI.exec(text)
+	if (direct) return direct.index
+	for (const m of text.matchAll(NUMERIC_ENTITY)) {
+		const code = m[1] === undefined ? Number(m[2]) : Number.parseInt(m[1], 16)
+		if (Number.isInteger(code) && code <= 0x10ffff && EMOJI.test(String.fromCodePoint(code))) return m.index ?? 0
+	}
+	return null
+}
+
+/** A stat is a vanity number only in marketing form (10x, 500+, $2M+, 24/7); a measured figure such as 42% or 1.2k passes. */
+export function checkNode(node: TextNode): RuleHit[] {
+	const hits: RuleHit[] = []
+	const label = node.text.trim()
+	if (node.kind !== "value") {
+		for (const m of node.text.matchAll(PROMO_PHRASES)) hits.push({ rule: "promo-copy", offset: node.offset + (m.index ?? 0) })
+		const emoji = emojiOffset(node.text)
+		if (emoji !== null) hits.push({ rule: "emoji-icon", offset: node.offset + emoji })
+	}
+	if (node.kind === "text" && isBadge(node.stack.at(-1)) && HYPE_LABEL.test(label.replace(EMOJI_ALL, "").trim())) {
+		hits.push({ rule: "decorative-badge", offset: leadingOffset(node) })
+	}
+	if (node.kind !== "label" && node.stack.some(isStatElement) && MARKETING_NUMBER.test(label)) {
+		hits.push({ rule: "vanity-stat", offset: leadingOffset(node) })
+	}
+	return hits
+}

package/packages/shared-skills/skills/frontend/scripts/perfection/draft-guard/text-nodes.ts

@@ -0,0 +1,121 @@
+export type Element = {
+	readonly tag: string
+	readonly name: string
+	readonly classes: readonly string[]
+	readonly stateful: boolean
+}
+
+/** `text` is visible copy, `label` an announced attribute (aria-label, title, alt, placeholder), `value` a stat component's value prop. */
+export type NodeKind = "text" | "label" | "value"
+export type TextNode = { readonly kind: NodeKind; readonly text: string; readonly offset: number; readonly stack: readonly Element[] }
+
+export type MarkupKind = "html" | "jsx" | "sfc"
+
+const NEVER_RENDERED = /<(script|style|pre|code|textarea|noscript)\b[^>]*>[\s\S]*?<\/\1\s*>|<!--[\s\S]*?-->|\{\/\*[\s\S]*?\*\/\}/gi
+const HTML_TEMPLATE = /<template\b(?![^>]*\s(?:x-[\w-]+|v-[\w-]+|[:@#][\w.-]+))[^>]*>[\s\S]*?<\/template\s*>/gi
+const TAG = /<(\/?)([A-Za-z][\w.:-]*)((?:[^>"'{}]|"[^"]*"|'[^']*'|\{(?:[^{}]|\{[^{}]*\})*\})*)>/g
+const CLASS_ATTR = /\b(?:class|className)\s*=\s*(?:"([^"]*)"|'([^']*)'|\{((?:[^{}]|\{[^{}]*\})*)\})/
+const STRING_LITERAL = /["'`]([^"'`]*)["'`]/g
+const ANNOUNCED_NAME = /(?:^|\s)(?:aria-label|title|alt|placeholder)\s*=/g
+const VALUE_NAME = /(?:^|\s)value\s*=/
+const LITERAL_VALUE = /^\s*(?:"([^"]*)"|'([^']*)'|\{\s*["'`]([^"'`]*)["'`]\s*\})/
+const HIDDEN_ATTR = /(?:^|\s)hidden(?=\s|=|\/|$)/
+const STATE_ATTR = /(?:^|\s)(?:data-status|data-state|aria-(?:current|selected|pressed|checked|expanded|busy|invalid|disabled|valuenow))\s*=/
+const ATTR_VALUES = /"[^"]*"|'[^']*'|\{(?:[^{}]|\{[^{}]*\})*\}/g
+const STAT_COMPONENT = /^(?:Stats?|Metrics?|Kpis?|KPIs?)(?:[A-Z]\w*)?$/
+const STAT_CLASS = /^(?:stat|stats|metric|metrics|kpi)(?:$|[-_])/
+const VOID_TAGS = new Set(["area", "base", "br", "col", "embed", "hr", "img", "input", "link", "meta", "source", "track", "wbr"])
+const JSX_LEAD = new Set(["(", "[", "{", "}", ",", ":", "?", "=", ">", "&", "|", ";"])
+
+function blank(text: string, pattern: RegExp): string {
+	return text.replace(pattern, (m) => m.replace(/[^\n]/g, " "))
+}
+
+function classesOf(attrs: string): string[] {
+	const m = CLASS_ATTR.exec(attrs)
+	if (!m) return []
+	const literal = m[1] ?? m[2]
+	const raw = literal ?? [...(m[3] ?? "").matchAll(STRING_LITERAL)].map((s) => s[1] ?? "").join(" ")
+	return raw.split(/\s+/).filter(Boolean)
+}
+
+export function isStatElement(element: Element): boolean {
+	return STAT_COMPONENT.test(element.name) || element.classes.some((c) => STAT_CLASS.test(c))
+}
+
+function closeTo(stack: Element[], tag: string): void {
+	const at = stack.map((e) => e.tag).lastIndexOf(tag)
+	if (at >= 0) stack.length = at
+}
+
+/** In a script, `<` opens JSX only where an expression can start; `Array<string>`, `pick<T>(` and `a<b` stay code. */
+function opensJsx(text: string, start: number, name: string, attrs: string): boolean {
+	if (/^\s*,|^\s+extends\b/.test(attrs)) return false
+	if (/^(?:const|in|out)$/.test(name) && /^\s+[A-Za-z_$]/.test(attrs)) return false
+	const before = text.slice(0, start).trimEnd()
+	if (before === "" || /\b(?:return|yield|default)$/.test(before)) return true
+	return JSX_LEAD.has(before.at(-1) ?? "")
+}
+
+function literalAfter(attrs: string, from: number): { readonly value: string; readonly at: number } | null {
+	const m = LITERAL_VALUE.exec(attrs.slice(from))
+	if (!m) return null
+	const value = m[1] ?? m[2] ?? m[3] ?? ""
+	return { value, at: from + m[0].lastIndexOf(value) }
+}
+
+function keepLiterals(segment: string): string {
+	return segment.replace(/\{[^{}]*\}/g, (m) => {
+		const lit = /^\{\s*(["'`])([^"'`]*)\1\s*\}$/.exec(m)
+		if (!lit) return " ".repeat(m.length)
+		const inner = lit[2] ?? ""
+		const at = m.indexOf(lit[1] ?? "") + 1
+		return " ".repeat(at) + inner + " ".repeat(m.length - at - inner.length)
+	})
+}
+
+/** Copy a reader sees or hears, each piece with the elements open around it. Code, hidden elements and never-rendered blocks are skipped. */
+export function textNodes(source: string, kind: MarkupKind): TextNode[] {
+	const text = kind === "html" ? blank(blank(source, NEVER_RENDERED), HTML_TEMPLATE) : blank(source, NEVER_RENDERED)
+	const nodes: TextNode[] = []
+	const stack: Element[] = []
+	let hiddenDepth = 0
+	let cursor = 0
+	const flush = (end: number) => {
+		if (stack.length === 0 || hiddenDepth > 0) return
+		const segment = keepLiterals(text.slice(cursor, end))
+		if (segment.trim()) nodes.push({ kind: "text", text: segment, offset: cursor, stack: [...stack] })
+	}
+	for (const m of text.matchAll(TAG)) {
+		const start = m.index ?? 0
+		const [whole, closing, rawName = "", attrs = ""] = m
+		const end = start + whole.length
+		if (kind === "jsx" && !closing && stack.length === 0 && !opensJsx(text, start, rawName, attrs)) continue
+		flush(start)
+		cursor = end
+		const tag = rawName.toLowerCase()
+		if (closing) {
+			const at = stack.map((e) => e.tag).lastIndexOf(tag)
+			if (at >= 0 && hiddenDepth > at) hiddenDepth = 0
+			closeTo(stack, tag)
+			continue
+		}
+		const names = attrs.replace(ATTR_VALUES, (v) => " ".repeat(v.length))
+		const element: Element = { tag, name: rawName, classes: classesOf(attrs), stateful: STATE_ATTR.test(names) }
+		const attrsAt = start + 1 + rawName.length
+		const hidden = hiddenDepth > 0 || HIDDEN_ATTR.test(names)
+		if (!hidden) {
+			for (const a of names.matchAll(ANNOUNCED_NAME)) {
+				const lit = literalAfter(attrs, (a.index ?? 0) + a[0].length)
+				if (lit?.value.trim()) nodes.push({ kind: "label", text: lit.value, offset: attrsAt + lit.at, stack: [...stack, element] })
+			}
+			const v = isStatElement(element) ? VALUE_NAME.exec(names) : null
+			const lit = v ? literalAfter(attrs, v.index + v[0].length) : null
+			if (lit?.value.trim()) nodes.push({ kind: "value", text: lit.value, offset: attrsAt + lit.at, stack: [...stack, element] })
+		}
+		if (VOID_TAGS.has(tag) || attrs.trimEnd().endsWith("/")) continue
+		stack.push(element)
+		if (hiddenDepth === 0 && HIDDEN_ATTR.test(names)) hiddenDepth = stack.length
+	}
+	return nodes
+}

package/packages/shared-skills/skills/frontend/scripts/perfection/fixtures/draft-guard/negative/attr-lookalikes.tsx

@@ -0,0 +1,10 @@
+export function Bar() {
+  return (
+    <div data-title="Supercharge your team">
+      <StatusBar><span>24/7</span></StatusBar>
+      <span className="badge" aria-current="page">New</span>
+      <div data-x="a title='Supercharge your team'" />
+      <Stat data-value="10x" />
+    </div>
+  )
+}

package/packages/shared-skills/skills/frontend/scripts/perfection/fixtures/draft-guard/negative/bound-values.tsx

@@ -0,0 +1,12 @@
+export function Summary({ count, status, uptime }: { count: number; status: string; uptime: string }) {
+  return (
+    <section>
+      <div className="stat"><span className="stat-value">{count}</span><span>open tickets</span></div>
+      <div className="metric">{uptime}</div>
+      <span className="badge" data-status={status}>{status}</span>
+      <span className="badge">3</span>
+      <span className="chip">Failed</span>
+      <p>Seams in the fabric are reinforced.</p>
+    </section>
+  )
+}

package/packages/shared-skills/skills/frontend/scripts/perfection/fixtures/draft-guard/negative/const-generics.tsx

@@ -0,0 +1,3 @@
+export const keep = <const T,>(x: T) => x
+export const label = "Seamless sync"
+export const Saved = () => <p>saved</p>

package/packages/shared-skills/skills/frontend/scripts/perfection/fixtures/draft-guard/negative/generics.tsx

@@ -0,0 +1,7 @@
+export const labels: Array<string> = ["Unlock the power", "🚀 launch"]
+export const pick = <T,>(xs: T[]): T | undefined => xs[0]
+export const first = <T extends object>(xs: T[]) => xs[0]
+export const flag = (a: number, b: number) => (a<b && b>a ? "seamless sync" : "x")
+export function Saved() {
+  return <p>Saved 3 files</p>
+}

package/packages/shared-skills/skills/frontend/scripts/perfection/fixtures/draft-guard/negative/measured-stats.html

@@ -0,0 +1,6 @@
+<section class="stats">
+  <div class="stat"><span class="stat-value">42%</span><span>refund rate, Q3</span></div>
+  <div class="metric">99.9%</div>
+  <div class="kpi"><strong>1.2k</strong> open tickets</div>
+  <div class="stat">$2M</div>
+</section>

package/packages/shared-skills/skills/frontend/scripts/perfection/fixtures/draft-guard/negative/plain-copy.html

@@ -0,0 +1,9 @@
+<main>
+  <h1>Monthly revenue</h1>
+  <p>Revenue rose 4% after the refund fix shipped on 3 June.</p>
+  <pre><code>const seamless = "Supercharge"</code></pre>
+  <footer>© 2026 Example Inc. Next page →</footer>
+  <script>const label = "Unlock the power of your data 🚀"</script>
+  <style>.stat::after { content: "10x"; }</style>
+  <!-- 한눈에 보는 메모 -->
+</main>

package/packages/shared-skills/skills/frontend/scripts/perfection/fixtures/draft-guard/negative/state-copy.html

@@ -0,0 +1,11 @@
+<main>
+  <p>Unlock your account to continue.</p>
+  <p>최적의 경로를 계산합니다.</p>
+  <p>Docs ↗</p>
+  <p>▶ Play</p>
+  <li>Inbox <span class="badge" data-status="unread">New</span></li>
+  <span class="pill">Pro</span>
+  <div hidden>Seamless onboarding</div>
+  <noscript>Supercharge your browser</noscript>
+  <template><p>Unlock the power of templates</p></template>
+</main>

package/packages/shared-skills/skills/frontend/scripts/perfection/fixtures/draft-guard/positive/attribute-edges.html

@@ -0,0 +1,7 @@
+<main>
+  <div class="block hidden md:flex"><p>Seamless sync</p></div>
+  <button title="Show hidden files"><span>Supercharge your team</span></button>
+  <div class="stat"><span>1,000,000+</span></div>
+  <span class="badge" aria-hidden="true">New</span>
+  <template x-if="open"><p>Effortless setup</p></template>
+</main>

package/packages/shared-skills/skills/frontend/scripts/perfection/fixtures/draft-guard/positive/components.tsx

@@ -0,0 +1,16 @@
+const cn = (...names: string[]) => names.join(" ")
+export function Page() {
+  return (
+    <main>
+      <Badge>New</Badge>
+      <span className={cn("badge", "badge--hot")}>Hot</span>
+      <span className="badge">✨ New</span>
+      <p>Launch &#x1F680; today</p>
+      <button type="button" aria-label="🚀 Launch">Go</button>
+      <Stat value="10x" />
+      <StatCard><p>10x</p></StatCard>
+      <div className="metric">{"500+"}</div>
+      <input placeholder="Supercharge your search" />
+    </main>
+  )
+}

package/packages/shared-skills/skills/frontend/scripts/perfection/fixtures/draft-guard/positive/decorative-badge.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>
+    <span class="badge">New</span>
+    <span class="chip chip--accent">AI-powered</span>
+    <h3>Monthly revenue</h3>
+  </div>
+</template>

package/packages/shared-skills/skills/frontend/scripts/perfection/fixtures/draft-guard/positive/emoji-icons.tsx

@@ -0,0 +1,9 @@
+export function Actions() {
+  return (
+    <ul>
+      <li>✅ Fast setup</li>
+      <li>Plain item</li>
+      <button type="button">🚀 Launch</button>
+    </ul>
+  )
+}

package/packages/shared-skills/skills/frontend/scripts/perfection/fixtures/draft-guard/positive/jsx-edges.tsx

@@ -0,0 +1 @@
+export const Beta = () => <p>(beta) Seamless sync</p>

package/packages/shared-skills/skills/frontend/scripts/perfection/fixtures/draft-guard/positive/promo-copy.html

@@ -0,0 +1,6 @@
+<section class="hero">
+  <h1>Seamlessly manage every report</h1>
+  <p>한눈에 보는 매출 현황</p>
+  <p>Track revenue and refunds.</p>
+  <p>Unlock the power of your data</p>
+</section>

package/packages/shared-skills/skills/frontend/scripts/perfection/fixtures/draft-guard/positive/promo-copy.tsx

@@ -0,0 +1,8 @@
+export function Hero() {
+  return (
+    <header>
+      <h2>Supercharge your workflow</h2>
+      <p>손쉽게 시작하세요</p>
+    </header>
+  )
+}

package/packages/shared-skills/skills/frontend/scripts/perfection/fixtures/draft-guard/positive/vanity-stats.html

@@ -0,0 +1,5 @@
+<div class="stats">
+  <div class="stat"><span class="stat-value">10x</span><span>faster</span></div>
+  <div class="metric">$2M+</div>
+  <div class="kpi-card"><strong>24/7</strong></div>
+</div>