chore(design-sync): sync UI primitives + tokens to claude.ai/design - #595
Conversation
…/design Config, authored previews, conventions header, and notes for the design-sync pipeline (package shape, hand-authored entry, Tailwind v4 compile step, Geist via extraFonts). 10 components verified and uploaded to the 'Clinical KB Design System' project. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This pull request has been ignored for the connected project Preview Branches by Supabase. |
Warning Review limit reached
Next review available in:2 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughAdds Design Sync configuration, styling and font assets, a bundle entry, preview components for shared UI, and ignore rules for generated synchronization state. ChangesDesign Sync integration
Estimated code review effort: 3 (Moderate) | ~20 minutes Sequence Diagram(s)sequenceDiagram
participant DesignSyncDriver
participant Config
participant EntryBundle
participant PreviewComponents
DesignSyncDriver->>Config: read Design Sync project and build settings
DesignSyncDriver->>EntryBundle: load .design-sync/entry.tsx
EntryBundle->>PreviewComponents: expose mapped UI component previews
PreviewComponents-->>DesignSyncDriver: provide synchronized render surfaces
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
.design-sync/NOTES.md (1)
1-51: 📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick winRestore Prettier compliance for the sync notes.
prettier --checkreports formatting issues in.design-sync/NOTES.md, so the static checks will remain failing until this file is formatted.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In @.design-sync/NOTES.md around lines 1 - 51, Format .design-sync/NOTES.md with the repository’s Prettier configuration, preserving all note content and markdown structure. Verify the file passes prettier --check after formatting.Source: Pipeline failures
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In @.design-sync/fonts.css:
- Line 5: Update the font-family declaration for the Geist family in fonts.css
to use the unquoted single-token name Geist, while keeping the multi-token
"Geist Mono" family name quoted.
In @.design-sync/previews/AccessibleTable.tsx:
- Around line 10-11: Format all five preview files with the repository’s
Prettier configuration, preserving their existing behavior:
.design-sync/previews/AccessibleTable.tsx lines 10-11, InlineNotice.tsx lines
3-4, LoadingPanel.tsx lines 3-7, PanelHeading.tsx lines 4-12, and
SafeBoldText.tsx lines 3-13. Rerun the formatter and static checks after
formatting.
In @.design-sync/previews/Sheet.tsx:
- Around line 21-22: Associate the “Status” label with the select control in the
Sheet component by assigning the select a unique id and referencing that id from
the label’s htmlFor attribute, preserving the existing styling and behavior.
---
Outside diff comments:
In @.design-sync/NOTES.md:
- Around line 1-51: Format .design-sync/NOTES.md with the repository’s Prettier
configuration, preserving all note content and markdown structure. Verify the
file passes prettier --check after formatting.
🪄 Autofix (Beta)
✅ Autofix completed
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 192ddbd4-4ab1-4a71-a0a9-6676aa66cfec
📒 Files selected for processing (17)
.design-sync/NOTES.md.design-sync/config.json.design-sync/conventions.md.design-sync/entry.tsx.design-sync/font-vars.css.design-sync/fonts.css.design-sync/previews/AccessibleTable.tsx.design-sync/previews/EmptyState.tsx.design-sync/previews/InlineNotice.tsx.design-sync/previews/LoadingPanel.tsx.design-sync/previews/PanelHeading.tsx.design-sync/previews/SafeBoldText.tsx.design-sync/previews/Sheet.tsx.design-sync/previews/SourceProvenance.tsx.design-sync/previews/SourceStatusBadge.tsx.design-sync/previews/ToggleSwitch.tsx.gitignore
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
Note Autofix is a beta feature. Expect some limitations and changes as we gather feedback and continue to improve it. Fixes Applied SuccessfullyFixed 4 file(s) based on 3 unresolved review comments. Files modified:
Commit: The changes have been pushed to the Time taken: |
Fixed 4 file(s) based on 3 unresolved review comments. Co-authored-by: CodeRabbit <noreply@coderabbit.ai>
CI triageCI failed on this PR. Automated classification of the 2 failed job(s):
Heuristic only — a main-side or flake label is a starting point, not a verdict. |
Head branch was pushed to by a user without write access
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit:0d2cced1a8
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
Uh oh!
There was an error while loading. Please reload this page.
@codex resolve actionable Codex review findings for this pull request and current head using the repository instructions. This is the pull request's single automatic repair pass: do not perform a fresh review, create new standalone findings, or request another review. Work only the existing unresolved Codex threads on the current head. Always fix P0 and P1 findings. For P2 and lower findings, fix only clear, scoped, low-risk issues; otherwise disposition them with a concise reason. After fixing or dispositioning a thread, reply in that thread with as the first line, followed by a concise summary; that marker authorizes the workflow to close that exact thread. If human input or new authorization is required, do not use the marker and leave the thread open with the blocker. Finish only after every actionable thread is fixed or dispositioned and closed, or explicitly left open for a human decision. Do not update the branch from main, address unrelated reviews, broaden scope, or create more than one scoped fix commit. Do not use external APIs, paid services, credentials, dependency changes, or broad refactors unless explicitly authorized. Add targeted tests where behavior changes and run the narrowest relevant validation. |
To use Codex here, create a Codex account and connect to github. |
All actionable findings were fixed, all review threads are resolved, and required CI is green.
Uh oh!
There was an error while loading. Please reload this page.
Summary
First
/design-syncof the design layer to the claude.ai/design project Clinical KB Design System (08d6f126-3fd0-4764-aedf-0062a467280a). Commits the durable sync inputs so future re-syncs are reproducible from any checkout:.design-sync/config.json— package-shape config: hand-authored bundle entry, Tailwind v4 compile step (buildCmd), Geist viaextraFonts, curatedguidelinesGlob, card-mode overrides.design-sync/entry.tsx— bundle entry enumerating the synced surface (10 primitives + class-string vocabulary).design-sync/previews/*.tsx— 10 authored preview files (29 stories), all render-verified and graded good.design-sync/conventions.md— design-agent conventions header (token idiom, class vocabulary; every name grep-verified against the built artifacts).design-sync/NOTES.md— re-sync runbook and traps.gitignore— excludes generated sync state (.ds-sync/,ds-bundle/, caches)No app code changes — repo-tracked sync inputs only. Verification: converter validate exited clean (render check 10/10, no flags); upload verified against the project file list.
Clinical governance preflight
Not applicable — no ingestion, answer generation, search/ranking, source rendering, document access, privacy, or production env changes; docs/config for an external design tool only.
🤖 Generated with Claude Code
Summary by CodeRabbit
New Features
Documentation