chore: add design-sync config for Claude Design upload#3381
Draft
dreamwasp wants to merge 10 commits into
Draft
Conversation
Adds .design-sync/ config set for syncing @Codecademy/gamut to the [DRAFT] Gamut Design System project on claude.ai/design (71 components). - config.json: project ID, storybook shape, build cmd, provider config, card mode overrides, titleMap for docs-only stories - tsconfig.json: resolves ~styleguide webpack aliases for esbuild - overrides/bundle.mjs: enables minification (icons-as-code pushes unminified bundle to 5.2MB, over the 5MB upload limit) - previews/SkipToContent.tsx: custom preview for hidden skip-link component - NOTES.md: setup notes and re-apply instructions for dist patches - packages/gamut/package.json: add "types" field so design-sync converter can locate dist/index.d.ts in this NX monorepo (NX omits it by default) - .gitignore: exclude .ds-sync/, ds-bundle/, and ephemeral .design-sync/ subdirs Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
|
View your CI Pipeline Execution ↗ for commit f5069e9 ☁️ Nx Cloud last updated this comment at |
|
…header - Add @codecademy/gamut-styles/dist/themes to extraEntries so all 5 named themes (coreTheme, adminTheme, platformTheme, lxStudioTheme, percipioTheme) are available in the bundle for theme-swapping in Claude Design - Fix tsconfig path (../../ not ../../../ from PKG_DIR=packages/gamut) - Add .design-sync/conventions.md as readmeHeader: GamutProvider wrapping, theme table, props-only styling idiom, idiomatic build example - Update NOTES.md with tsconfig fix, grade edge cases, and theme export finding Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
… Design Switches the design-sync provider default from coreTheme to percipioTheme for the [DRAFT] Gamut Design System project, and mirrors the 13 relevant gamut-* skill docs plus a new gamut-code-style.md (a Claude-Design-oriented rewrite of gamut-review's build rules) into .design-sync/guidelines/ so future syncs stay in sync with what's already been pushed to the project. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…nomy, merge guideline corpus Forks source-storybook.mjs to group components by their real Storybook top-level sidebar category (atoms/molecules/organisms/layouts/typography) instead of an inconsistent sub-category name. Full nested grouping was tried and reverted — emit.mjs hardcodes a 3-level relative asset path that a 4th nesting level breaks, and emit.mjs is off-limits to fork. Replaces the flat gamut-*.md guideline set with a merged structure based on a more mature, purpose-built corpus (Guidelines.md reading order, design-tokens/, per-component guides), folding in unique detail from the prior skill-doc set and fixing every percipioTheme-vs-lxStudioTheme default reference along the way. Rewrites conventions.md with a human-readable intro and an explicit "Agent Information" section pointing at the guidelines reading order. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Two rounds of real build feedback from Claude Design surfaced concrete documentation gaps. Addresses: runtime-loading gotchas in the x-import environment (React injection order, single-React-instance rule), an icon index (371 exports enumerated from gamut-icons' built .d.ts, not transcribed), per-theme resolved token values (theme-core/percipio/ lxstudio.md — including a real LX Studio border-radius scale discrepancy), a reconciliation note for the auto-generated "0 CSS custom properties" README stat vs ColorMode's runtime-injected --color-* properties, deeper Input/Select docs (controlled/uncontrolled patterns, and a correction that Input's icon slot is trailing not leading), and supplemental docs for BarChart/DatePicker content that was being truncated out of their auto-generated .prompt.md. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…omponent rules Real prototyping surfaced hardcoded status colors/backgrounds, ColorMode skipped, and small atoms (Tag/Badge) rebuilt as styled Box. Root cause per the user's diagnosis: the fast path (setup doc -> one component's .prompt.md -> build) skips the color docs entirely, and "prefer purpose-built components" only demonstrated big organisms. - Fork docs.mjs to append a fixed semantic-color reminder to every auto-generated .prompt.md (70/71 - GridForm has no doc source to hook, it's a .d.ts-only floor card assembled in the off-limits emit.mjs). - Non-negotiables block at the top of conventions.md and Guidelines.md's Core Principle. - colors.md gets a hardcode->token table, a dedicated status/feedback section, and cross-links to ColorMode's common mistakes + Departures. - overview-components.md explicitly calls out small styled Box/FlexBox as a Tag/Badge reinvention, not just big organisms. - Corrected theme-percipio.md: Percipio supports both light and dark mode via ColorMode, not light-only as previously documented. - Dropped the checklist's two oxlint-rule asks (hex/style literal detection, Box-as-Tag heuristic) - _adherence.oxlintrc.json is generated by fixed tag-mapping logic and then overwritten server-side by Claude Design's own self-check, with no lever for property-value linting. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…sistance Learner Dashboard build notes: the builder never opened overview-components.md or the List/DataList/DataTable guides, going straight from README to specific .prompt.md files - and rebuilt List, DataTable, Tabs, and Alert from Box/FlexBox as a result. Same root cause as the color-hardcode issue: the fast path never reaches the doc that would prevent the mistake. - New guidelines/components/index.md - one-line decision table (use when / not this-use X instead) for every component, linked as Guidelines.md's second read. - Extend the docs.mjs fork: Box/FlexBox/GridBox's .prompt.md now carry a "reach for this instead" block; every icon-prop-bearing component (FillButton, StrokeButton, TextButton, IconButton, Badge, Tag, Menu) points at the icons.md reference instead of the builder grepping the bundle. - New guidelines/recipes/ - data-list-with-status.md and tabbed-sections.md, full composed examples for the two patterns actually rebuilt. - New component.md files for Alert, Badge, Tag, Tabs, and a Card <-> ColorMode clarification (variant="default" follows ColorMode; others are fixed). Caught and fixed real API mistakes while sourcing these from actual story files: Alert's variant prop is `type`, not `variant`; Badge has no built-in status-color variant (use variant="custom" + semantic bg); Tabs is a composite (TabList/Tab/TabPanels/TabPanel), not a `tabs` prop array. - Dropped the checklist's manifest-mirroring ask (_ds_manifest.json is generated server-side by Claude Design's own self-check, same as _adherence.oxlintrc.json - no lever to add a useWhen field) and the systemic 43-component empty-variant-block gap (would need AST-based extraction from story sources - out of scope this round; hand-fixed the 8 highest-traffic components instead: List, DataList, DataTable, Tabs, Alert, Badge, Card, Tag). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…eering, theme-switch docs Closes a set of concrete deviations seen in real builds: - STOP gate at the top of Guidelines.md and conventions.md (README header) - required reading order before generating any code. - Inlined the styling do/don't list, pattern->component table, and semantic-token mapping directly into Guidelines.md's body, so they're present without an agent choosing to open the linked files. - "Before you ship" checklist added to Guidelines.md. - Props-only promoted to non-negotiable #1 in both Guidelines.md and conventions.md; extended to ban Emotion's inline `css` prop alongside `style`/`className`. - Departures rule made proactive: when the request itself asks for something off-system (exact hex, arbitrary pixel value, one-off font size), say so before building it - not just call it out after the fact. - "Switching themes" section in overview-setup.md - all three steps (provider prop, destructure, re-resolve hardcoded fallbacks) must move together or stale values get left behind. - Menu strengthened as the required component for nav/action lists in overview-components.md's discovery table + Component Discovery section, mirrored in Guidelines.md's inlined table. - docs.mjs fork extended with a prepend mechanism (front-of-file, not footer) for List (redirect to DataTable/DataList for tabular data) and Menu (redirect away from hand-built Box/FlexBox nav rows). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Collaborator
|
📬 Published Alpha Packages:
|
Contributor
|
🚀 Styleguide deploy preview ready! Preview URL: https://6a57d8304eda90dfcc1854ac--gamut-preview.netlify.app |
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
2 participants
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 .design-sync/ config set for syncing @codecademy/gamut to the [DRAFT] Gamut Design System project on claude.ai/design (71 components).
Overview
PR Checklist
Testing Instructions
Don't make me tap the sign.
PR Links and Envs