chore(design-sync): import shadcn/ui primitives to Claude Design#97
Merged
Conversation
Set up /design-sync for the toolbox's 12 shadcn/ui primitives. The app has no library dist, so this runs the converter in synth-entry package shape off a committed re-export entry, with PKG_DIR resolving to the repo root. Reproducible sync inputs: - config.json: componentSrcMap (the 12 ui files), dtsPropsFor (hand-written prop contracts since synth-entry .d.ts are hollow), a group taxonomy via docsMap stubs, and overlay/grid overrides. - entry.ts: re-exports the 12 components (+ sonner `toast`) to window.Toolbox. - previews/: authored, dark-themed preview cards (all graded good; real toasts, open dialog/tooltip/command). - conventions.md: the design-agent guide (dark wrapper, semantic-token vocab, build-snapshot CSS caveat), wired via readmeHeader. - NOTES.md: synth-entry shape, app-CSS strategy, chromium/playwright + portaled color gotchas, re-sync risks. Tooling hygiene: scope .design-sync/ out of eslint; gitignore the regenerated .ds-sync/ scripts, ds-bundle/ output, and .design-sync/.cache machine state. Uploaded to the "Toolbox Design System" Claude Design project — 12 components, render check clean, all previews graded good. No app/src changes; build, lint, and 388 tests stay green. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_012gT1Vn216uvrJRGC8DbvVZ
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.
Sets up
/design-syncso the Claude Design agent builds with the toolbox'sactual themed primitives.
What's synced
The 12 stock shadcn/ui primitives in
src/components/ui/(Button, Card,Command, Dialog, Input, Label, ScrollArea, Separator, Tabs, Textarea, Toaster,
Tooltip) + the zinc/dark Tailwind v4 theme. Uploaded to the Toolbox Design
System Claude Design project — 12 components, render check clean, every
preview graded good.
Why it's unusual
The toolbox is an app, not a library (private, no exports), so the converter
runs in synth-entry package shape off a committed
entry.ts, with theapp's compiled CSS as the stylesheet (components carry no static CSS — it's
Tailwind utilities compiled at build). Details + re-sync gotchas in
.design-sync/NOTES.md.Contents (all under
.design-sync/, reproducible re-sync inputs)config.json— componentSrcMap, hand-writtendtsPropsForcontracts(synth-entry
.d.tsare hollow), group taxonomy, overlay/grid overridesentry.ts— re-exports the 12 components (+ sonnertoast) towindow.Toolboxpreviews/— authored dark-themed preview cardsconventions.md— design-agent guide (dark wrapper, semantic-token vocab,build-snapshot CSS caveat), wired via
readmeHeaderNOTES.md— shape, CSS strategy, chromium + portaled-color gotchas, risksScope / safety
No
src/app changes..design-sync/excluded from eslint; regeneratedartifacts gitignored. lint, build, and 388 tests all green.
🤖 Generated with Claude Code