feat(ui): @uploads/ui design system + Claude Design sync#121
Merged
Conversation
Add packages/ui — a React component library carrying the uploads.sh brand (Geist / Geist Mono / Geist Pixel, dark developer-console tokens). Ships Surface, Brand, Button, Panel, Field/Input/Label, Callout, Badge, Divider, and GalleryTile, built with tsup to an ESM dist + type declarations + one self-contained stylesheet (tokens, @font-face, component CSS). Also add the .design-sync inputs (config, validated conventions header, per-component previews, and re-sync notes) that import the package into the "Uploads" Claude Design project, so the design agent builds screens from these real components. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Deploying with
|
| Status | Name | Latest Commit | Updated (UTC) |
|---|---|---|---|
| 🔵 In progress View logs |
uploads-auth | 497dede | Jul 13 2026, 01:40 PM |
|
Important Review skippedAuto reviews are limited based on label configuration. 🏷️ Required labels (at least one) (2)
🚫 Excluded labels (none allowed) (1)
Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
CI's frozen-lockfile install rejected the new packages/ui devDeps (react, react-dom, @types/react, @types/react-dom, tsup, typescript) because the workspace lockfile wasn't regenerated. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
uploads-api | 3b1e6f7 | Commit Preview URL Branch Preview URL |
Jul 13 2026, 01:09 PM |
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
uploads-web | 3b1e6f7 | Commit Preview URL Branch Preview URL |
Jul 13 2026, 01:10 PM |
- Format packages/ui sources with oxfmt (line wrapping, transition/font stacks). - Exclude .design-sync/ from oxlint + oxfmt: the committed previews are design-sync converter inputs compiled by its own toolchain (they import @uploads/ui and the JSX runtime with no repo tsconfig), so repo-wide type-aware lint can't resolve them and shouldn't try. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Port back two annotation comments the Claude Design agent added to the synced _ds_bundle.css, onto the source token declarations so /design-sync carries them forward instead of overwriting: - --sans / --mono / --pixel -> /* @kind font */ (font tokens, not colors) - --pixel-shape -> /* @kind other */ (non-color flag token) Keeps the design-system compiler's token classification clean. Re-synced to the Uploads Claude Design project; verified the annotations now ship in the remote _ds_bundle.css. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <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.
What
Establishes the uploads.sh design system as a real component library and syncs it into a new Uploads project on claude.ai/design, so the design agent builds screens from our actual components instead of generic ones.
packages/ui— the new libraryA React + TSX component library carrying the uploads.sh brand, built with tsup to an ESM
dist+ type declarations + one self-contained stylesheet (tokens,@font-face, component CSS).ELSHaxis) — self-hosted woff2. Dark token palette lifted verbatim from the live app (--bg,--panel,--line,--fg/--body/--muted,--accentviolet,--green/--red).Surface,Brand,Button,Panel,Field/Input/Label,Callout,Badge,Divider,GalleryTile(a hosted image / PR-screenshot tile — the product's core object)..design-sync/— the sync inputs (committed for reproducible re-syncs)config.json— package-shape converter config (pinned to the Uploads project).conventions.md— the design-agent guidance header, validated against the built artifacts.previews/*.tsx— a hand-authored, self-contained preview per component.NOTES.md— build/font/render-check gotchas + re-sync risks.Verification
dist/index.js+dist/index.d.ts(11 components, allPropsinterfaces) +dist/uploads-ui.css.Notes
packages/uiisprivate(no changeset needed).cd packages/ui && npm install --no-save --no-package-lock && npx tsup, orpnpm --filter @uploads/ui buildfrom a full workspace install.ds-bundle/_screenshots/review/(gitignored); happy to host them into this PR if a visual would help.🤖 Generated with Claude Code