Add design-sync inputs for Wonder Blocks → claude.ai/design - #3181
Open
caitlynmayers wants to merge 3 commits into
Open
Add design-sync inputs for Wonder Blocks → claude.ai/design#3181caitlynmayers wants to merge 3 commits into
caitlynmayers wants to merge 3 commits into
Conversation
Reproducible configuration for syncing Wonder Blocks to Claude Design (claude.ai/design), so re-syncs replay every decision deterministically. - config.json: pkg/globalName, storybook shape, extraEntries (all WB packages), bundle-entry barrel, titleMap, grid-overflow/portal overrides, Tooltip skip, provider (Shape Your Learning / Thunderblocks theme default), extraFonts. - overrides/source-storybook.mjs: filter to WB "manifest"-tagged canonical stories. - overrides/story-imports.mjs: map each package's default export to its component name on the global; base64-encode story-imported SVGs (CSS-safe icon masks). - fix-bundle-svgs.mjs: post-build pass base64-encoding bundle-baked SVG data URLs (icons) and refreshing the anchor's bundleSha. - bundle-entry.mjs: barrel exposing default-export components by name. - conventions.md: design-agent usage guide (theme wrapper, token/Aphrodite idiom). - previews/: owned preview fixes (Tabs RTL, CircularSpinner light backdrop). - NOTES.md / FANOUT.md: repo gotchas, re-sync risks, and fan-out grading process. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
Contributor
|
Size Change: 0 B Total Size: 131 kB ℹ️ View Unchanged
|
Contributor
npm Snapshot: Published🎉 Good news!! We've packaged up the latest commit from this PR (052b9be) and published all packages with changesets to npm. You can install the packages in ./dev/tools/deploy_wonder_blocks.js --tag="PR3181"Packages can also be installed manually by running: pnpm add @khanacademy/wonder-blocks-<package-name>@PR3181 |
Contributor
A new build was pushed to Chromatic! 🚀https://5e1bf4b385e3fb0020b7073c-loegrwndyr.chromatic.com/ Chromatic results:
|
WB typography/spacing tokens are rem-based against a 10px root
(html { font-size: 62.5% }), which WB's Storybook applies via
static/sb-styles/preview.css. The converter only scraped component CSS, so the
shipped styles.css closure lacked it — making all type render 1.6x too large in
claude.ai/design (16px root vs the expected 10px), with px radii looking small
by comparison.
- base-reset.css: html 62.5% + body 1.6rem + default themed text color + dark color-scheme.
- inject-base-css.mjs: post-build pass that copies base-reset.css → ds-bundle/base.css,
prepends `@import "./base.css"` to styles.css, and refreshes the anchor styleSha.
Run after package-build (with fix-bundle-svgs), before validate/upload.
- conventions.md / NOTES.md: document the 10px-root requirement and the post-build step.
Verified: html computes to 10px, Button ~13.3px / radius 8px, and typography
previews now match the Storybook scale exactly.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
wonder-blocks-pill is deprecated and nothing in the synced DS uses it (no card, no preview references it), so remove it from extraEntries + the barrel entry so Pill is no longer reachable on window.WonderBlocks. Layout (Strut/Spring/MediaLayout) is kept: WB's own stories use Strut/Spring for layout spacing in ~11 components' previews, so it must stay bundled for those to render. It's reachable but unsurfaced (no cards/docs; conventions steer to View). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Adds the reproducible design-sync configuration that syncs Wonder Blocks to Claude Design, so future re-syncs replay every decision deterministically.
What this enables
The Claude Design agent builds UIs from Wonder Blocks' real compiled bundle — every design it produces uses your actual components, props, tokens, and the Shape Your Learning / Thunderblocks theme by default.
Synced project: https://claude.ai/design/p/e9e1c66b-5427-486a-a468-5d90bc569ba9 (70 components, latest
main).Files (all under
.design-sync/)extraEntries(all WB packages),titleMap, grid-overflow/portaloverrides, Tooltip skip,provider(Thunderblocks theme default),extraFonts(brand fonts).manifest-tagged canonical stories (drops Testing/Snapshots/Playtesting + deprecated).bundleSha.Re-syncing later
build:types+pnpm build+ rebuild.design-sync/sb-reference, then run the design-sync driver; re-apply the compare theme-global patch and runfix-bundle-svgs.mjsafter the build (see NOTES.md). Deterministic — carried-forward grades make it fast.🤖 Generated with Claude Code