chore(react): add design-sync inputs for claude.ai/design#6
Open
dudusotero wants to merge 1 commit into
Open
Conversation
Syncs @pixelore/react to a Claude Design project (44 components, grouped, all with authored+graded preview cards). Includes the Tailwind v4 compile input, category stubs, per-component preview compositions ported from the docs examples, the conventions header, and NOTES with build/re-sync guidance.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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 inputs that sync
@pixelore/reactto a Claude Design project (claude.ai/design), so the design agent builds with our real components.What's here (sync inputs only — generated artifacts are gitignored)
.design-sync/config.json— converter config: package, global name, build command, the compiled-CSS entry, the 6 category groupings (Actions / Forms / Data Display / Feedback / Overlays / Navigation), and overlay card overrides..design-sync/tw.input.css— Tailwind v4 compile input. The package ships CSS source (@import "tailwindcss"+@source), so this compiles a self-contained bundle stylesheet (all component/preview utilities +@themetokens + remote@font-face), plus a brand-vocabulary safelist and one static-render fix for Dialog's motion entrance..design-sync/previews/*.tsx(44) — per-component preview compositions, ported fromapps/docsexamples with realistic content..design-sync/groups/*.md— frontmatter-only category stubs..design-sync/conventions.md— prepended to the generated README; teaches the design agent the real token/class vocabulary, theTooltipProviderrequirement, flat compound exports, and the thin-.d.tscaveat..design-sync/NOTES.md— build/re-sync guidance and gotchas (Node 20 + pnpm, the manual CSS compile step, the Dialog opacity fix, remote fonts, etc.).packages/react/.gitignore— ignores generated/staged artifacts (.ds-sync/,ds-bundle/,.design-sync/.cache/).Result
44 components imported, grouped, every one with an authored + graded preview card; render check clean. Re-syncs are reproducible from these files.
Project: https://claude.ai/design/p/fd1012e1-9611-4c7b-92f5-d5a7a7a6054d