[FEATURE] design-sync is React-only: add support for Svelte / non-React design systems

Open 💬 0 comments Opened Jun 26, 2026 by Spenhouet

What's missing

The design-sync skill (v2.1.193) can only import React component libraries. Both source shapes render previews as React functions loaded from window.<Global> and emit .jsx preview cards, and the storybook shape's SKILL.md states "Requires React 18+" outright. There is no path for a design system written in another framework.

Impact

I tried syncing a SvelteKit design system (Svelte 5, shadcn-svelte + bits-ui, Storybook via @storybook/addon-svelte-csf). The skill correctly detects Storybook and stories, but the compiled Svelte components can never render in Claude Design's React runtime, so the whole high-fidelity import path is unavailable. shadcn-svelte is a common, well-defined target, so this is not a niche stack.

What I'd like

Some way to import a non-React design system. Options, roughly in order of effort:

  • A Svelte renderer for the preview/runtime layer (mount compiled Svelte components instead of React).
  • A documented framework-agnostic import that captures tokens, typography, and component previews without requiring a React runtime.
  • At minimum, the skill should detect a non-React stack early and say so clearly, instead of proceeding as if React is implied.

Environment

design-sync skill 2.1.193, Claude Code on Linux. Source repo is Svelte 5 + SvelteKit, no React dependency.

View original on GitHub ↗