test(skill): guard colour values and CSS custom properties in examples

[IgorShevchik]

Linked issue

Resolves #345

Type of change

• Documentation (updates to the documentation or readme)
• Bug fix (a non-breaking change that fixes an issue)
• Enhancement (improving an existing functionality)
• New feature (a non-breaking change that adds functionality)
• Chore (updates to the build process or auxiliary tools and libraries)
• Revert (undoing a merged change — retitle this PR revert(Scope): ...)
• Breaking change (fix or feature that would cause existing functionality to change)

Description

Two new checks in test/utils/skill-manifest.spec.ts, and the two live defects they found. Starts where #345 says to start — colours, then CSS custom properties as the cheapest sibling. Prop names are the harder half and are left for a separate pass, as the issue itself notes.

Both guards found something on their first run, which is the argument for having them at all.

---

The two defects

B24Badge has been rendering uncoloured for a month

data-tables.md shipped color="neutral" on B24Badge. That is in #345's own table. It was fixed by hand in #343 to air-secondary-no-accent — a key Button declares and Badge does not — and sat wrong ever since.

Measured by rendering all three:

	rendered style-* class
no colour (default)	style-filled
air-secondary (valid)	style-tinted
air-secondary-no-accent (shipped)	none

The Inactive badge has no colour class at all. Nothing throws, nothing warns. Now air-tertiary, which Badge does declare (style-outline-no-accent — the muted outline that suits an inactive status next to a filled green one).

The manual fix for the defect in the issue was itself wrong. That is the case for doing this mechanically.

A phantom CSS token

forms.md used text-(--ui-color-typography-secondary) to label a role="group". It is declared nowhere, and there is no --ui-color-typography-* family in src/ at all. Replaced with text-legend — the semantic utility the skill's own design-system guideline describes as being for group titles, and which src/theme/timeline.ts and src/theme/dropdown-menu.ts already use.

---

The checks

Both follow the shape the file already uses: read the truth from the tree, anchor on a positive and a negative sentinel, then assert the scan finds nothing.

Colours come from each src/theme/*.ts color variant map, found by brace matching rather than a line regex — the map nests, and a flat scan picks up slot names from inside it. Static color= / active-color= attributes are checked, and so are the ternary branches of a bound :color=, which is where the Badge defect actually lived.

CSS custom properties are checked in every shape the skill writes: var(--x), var(--x, fallback), text-(--x), and the typed arbitrary properties text-(length:--x) / font-(family-name:--x) — plus declarations, since writing --b24ui-* in your own CSS is a claim the library reads it.

Prose placeholders are deliberately not flagged: --ui-color-base-N, …-bg-gradient-{1,2,3} and …-bg-content-* are documentation, not references, and requiring a closing ) or , separates them cleanly. Without that the check reports five false positives to one real finding.

What /review caught

Six holes in the first draft. Four made the checks weaker than their own comments claimed, one was a false positive, one was a wrong statement:

Finding	Consequence
colourKeys hardcoded a 4-space indent	input-number.ts nests its map at 6 — map found, zero keys read, component silently unchecked
tag matched with [^>]*	<B24Badge v-if="a > b" color="bogus" /> passed green
:color flagged every quoted string	row.status === 'active' would fail as an unknown colour
active-color dismissed as an "other prop"	it takes the same colour map
token pattern matched only bare (--x)	missed 27 references, including the untouched half of the very line the phantom token was found on
the comment claimed it guards --b24ui-header-heights	it did not — that defect is a declaration, which a usage-only pattern cannot see

All fixed, and each fix probed by injecting the case:

InputNumber colour (factory theme)         RED ✓
active-color attribute                     RED ✓
> inside an attribute value                RED ✓
typed token text-(length:--phantom)        RED ✓
var() with a fallback                      RED ✓
declaration form --b24ui-header-heights    RED ✓
row.status === 'active'                    green ✓  (no false positive)

The two original defects were also each restored and confirmed to fail exactly their matching check, naming the file and the value — and re-verified after eslint --fix rewrote one of the regexes.

Checks

• pnpm lint, pnpm typecheck green
• Full suite: 340 files, 7818 passed, 6 skipped (+4 — the two new checks × two projects)
• No runtime file touched

Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

🤖 Generated with Claude Code

https://claude.ai/code/session_012MsMuj8Fic9tjWVjyEyrxc

---

Generated by Claude Code