Skip to content

feat: /export-design-system command for publishable component libraries#60

Open
PAMulligan wants to merge 1 commit into
mainfrom
19-design-system-export-functionality
Open

feat: /export-design-system command for publishable component libraries#60
PAMulligan wants to merge 1 commit into
mainfrom
19-design-system-export-functionality

Conversation

@PAMulligan
Copy link
Copy Markdown
Collaborator

Summary

  • Adds a standalone /export-design-system slash command, an export-design-system skill, and a scripts/export-design-system.{js,sh} exporter that emits a publishable pnpm workspace from generated components and design-tokens.lock.json.
  • Output: @scope/design-tokens (framework-agnostic — CSS vars, Tailwind preset, typed exports) plus @scope/<framework>-components (built with Vite library mode for React/Vue/Svelte; tsc for React Native, since Vite is incompatible with the RN runtime).
  • Scoped to whatever outputTarget is set in build-spec.json (with --framework flag and package.json-based fallback). Includes Changesets versioning scaffold, .npmrc, per-package READMEs, and a ThemeProvider + useTheme per framework.

Closes #19.

What's in the box

  • scripts/export-design-system.js — main exporter (~640 LOC, ESM, no extra deps)
  • scripts/export-design-system.sh — wrapper matching the generate-stories.sh pattern
  • .claude/commands/export-design-system.md — slash command
  • .claude/skills/export-design-system/SKILL.md — skill docs
  • CLAUDE.md — registered new script + skill + command, count bumps (19→20 skills, 29→31 scripts)

Test plan

  • --help renders correctly
  • React: auto-detects outputTarget from build-spec.json, scope from package.json, copies components + index.ts, excludes *.test.* / *.stories.* / *.d.ts
  • Vue: .vue components copied, ThemeProvider.ts uses provide/inject + h() render
  • Svelte: .svelte components, ThemeProvider.svelte, vite-plugin-svelte config
  • React Native: no vite.config.ts, tsc -p tsconfig.json build, peerDeps react-native >=0.74, RN note in stdout + README
  • Existing output dir: refuses without --force (exit 1), overwrites with --force
  • Missing inputs: clear error, exit 2
  • Unsupported framework (--framework angular): exit 3
  • --dry-run: writes nothing
  • --json: machine-readable summary
  • Cross-platform tokens-package build: cp replaced with a generated scripts/postbuild.mjs using fs.cpSync (caught during smoke testing on Windows)
  • End-to-end: pnpm install && pnpm build against a real lockfile from a /build-from-figma run (not yet exercised — peer-dep ranges and Tailwind preset mapping may need tweaks for non-standard lockfile shapes)

Caveats

  • The script writes files only — it does not run pnpm install or pnpm build. First real proof-of-life will come from running the workspace against a real lockfile.
  • Tailwind preset assumes lockfile keys colors, spacing, radii/borderRadius, typography.fontFamily. Non-standard shapes may require a hand-tweak to the generated preset.
  • React Native uses tsc not Vite. Documented in stdout, README, and skill docs.

🤖 Generated with Claude Code

…raries

Adds a standalone command that exports generated components and the design
token lockfile as a versioned pnpm workspace, scoped to whatever outputTarget
is set in build-spec.json.

The workspace contains two packages:
- @scope/design-tokens — framework-agnostic (CSS vars, Tailwind preset, typed
  exports, raw lockfile snapshot), built with Vite library mode.
- @scope/<framework>-components — framework-specific component library with
  ThemeProvider/useTheme, peer-deps, and proper exports map. React/Vue/Svelte
  use Vite library mode; React Native falls back to tsc since Vite is
  incompatible with the RN runtime.

Includes Changesets versioning scaffold, .npmrc, .gitignore, tsconfig.base.json,
and per-package READMEs. Components are copied with tests/stories/types
filtered out.

Closes #19

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@PAMulligan PAMulligan linked an issue May 5, 2026 that may be closed by this pull request
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Design system export functionality

1 participant