[BUG] /design-sync card scaffold invents viewport and rewrites labels

Status Open
Reported on v2.1.236
Maintainer reply None cached
Activity 0 comments · opened Aug 20, 2026

/design-sync emits implicit viewports and non-sentence-case card labels

Environment

  • Claude Code: 2.1.236
  • Bundled skill: design-sync
  • Affected generated modules: lib/emit.mjs, lib/preview-rebuild.mjs

Problem

The bundled /design-sync card-scaffold generator currently carries seven deterministic findings:

  • four paths default an omitted card viewport to 900x700;
  • one story-heading rule forces text-transform: uppercase;
  • one floor-card eyebrow rule forces text-transform: uppercase;
  • one module-card path inserts the raw PascalCase export name into an h4 through innerHTML.

This makes viewport omission ineffective and causes labels to disagree with sentence-case source conventions. Because /design-sync extracts the bundled skill into a fresh temporary path on each invocation, patching the generated temp tree is not durable.

Expected behavior

  • Omitted viewport means no viewport attribute is emitted. Explicit overrides.<component>.viewport values continue to work.
  • Single-card previews keep their vertical canvas through layout/min-height rules rather than an implicit capture viewport.
  • Story headings and floor-card eyebrows preserve sentence case.
  • Module-card headings are converted from export identifiers with acronym-aware sentence casing and assigned with textContent, not concatenated into innerHTML.

Examples:

  • APIKeyCardAPI key card
  • OAuthSettingsOAuth settings
  • XMLParserXML parser

Deterministic verification

For the 2.1.236 bundled files:

  • lib/emit.mjs SHA-256 before: 62432b687c4825a12da3805e9557d0c3be2b5c5ee1b7f9722307d291b991fe21
  • lib/preview-rebuild.mjs SHA-256 before: 3d57fddf3f6402e69a92e4522c0ae39201a57462800a66b9895926c40de600b7

A corrected generator should produce card HTML with:

  • zero implicit viewport="..." attributes when no viewport override is authored;
  • zero forced-uppercase scaffold declarations;
  • zero raw-label innerHTML paths;
  • unchanged support for explicit viewport overrides;
  • deterministic output across repeated runs.

Suggested implementation

  1. Replace the nullish viewport defaults with conditional object spreads that emit viewport only when the override is present.
  2. Preserve single-card height with the existing canvas/layout CSS.
  3. Remove scaffold-owned uppercase transforms.
  4. Add a small identifier-to-sentence-case helper and assign the result through textContent.

I can provide a minimal patch against the extracted 2.1.236 skill if useful. The public repository does not appear to contain the bundled design-sync sources, so I am reporting the issue here rather than opening a source PR.

View original on GitHub ↗