skills.rest
PMDevSolutions
PMDevSolutionsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

export-design-system

Convert generated design assets into publishable pnpm workspaces with Changesets versioning support.

7|1|Updated Mar 11, 2026
Search Tags:#design system#component library#monorepo#changesets#pnpm workspace#tailwind preset#publishable package
One-click install
npx skills add https://github.com/PMDevSolutions/Aurelius --skill export-design-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: export-design-system
Source: https://github.com/PMDevSolutions/Aurelius/tree/main/.claude/skills/export-design-system
Command: npx skills add https://github.com/PMDevSolutions/Aurelius --skill export-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the problem of being unable to easily reuse generated design components and design tokens across multiple applications or publish them as a standalone, versioned library after a design-to-code pipeline run. Without this tool, teams would have to manually copy, configure, and package components and tokens, which is error-prone and time-consuming.

Core Features & Use Cases

  • Automated Monorepo Generation: Creates a fully configured pnpm workspace with separate packages for framework-agnostic design tokens and framework-specific component libraries.
  • Multi-Framework Support: Generates component libraries for React, Vue, Svelte, and React Native, with correct peer dependencies and build configurations for each framework.
  • Built-in Versioning & Publishing: Includes Changesets configuration for version management, proper npm exports maps, and Tailwind presets for seamless integration into consumer applications.
  • Real-World Use Case: After running a /build-from-figma pipeline to generate a set of React components, use this Skill to export the components and design tokens as a private npm package that can be shared across your organization's web and mobile apps.

Quick Start

Use the export-design-system skill to convert your latest generated design assets and design tokens into a publishable pnpm component library workspace.

Frequently Asked Questions about export-design-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I export generated design system components into a publishable npm package?▼

To export a publishable design system, you can convert generated design assets and design tokens into a versioned pnpm workspace. This generates framework-specific component libraries with Changesets versioning support for cross-application reuse.

Can I generate a monorepo for multiple frameworks like React, Vue, and Svelte from one design pipeline?▼

Yes, you can generate a pnpm workspace containing framework-specific component libraries for React, Vue, Svelte, and React Native. Each library is configured with correct peer dependencies and build configurations for its respective framework.

How do Changesets and Tailwind presets work when packaging a component library?▼

Changesets manages versioning and publishing in the generated workspace, while Tailwind presets provide seamless integration of design tokens into consumer applications. This combination ensures proper version management and styling consistency across packages.

What do I need to set up before converting Figma or Canva designs into a shared component workspace?▼

You need generated design system assets, including components and design token lockfiles, from a prior design-to-code pipeline run. The export process applies to post-pipeline workflows following build-from-figma, build-from-canva, or build-from-screenshot runs.

Does this approach handle framework-agnostic design tokens separately from UI components?▼

Yes, the generated pnpm workspace creates separate packages for framework-agnostic design tokens and framework-specific component libraries. This separation allows tokens to be consumed independently across different platforms via proper npm exports maps.

Why use a pnpm workspace for migrating a design system instead of manually copying components?▼

Using a pnpm workspace automates monorepo generation with proper npm exports maps, peer dependencies, and Changesets versioning. This prevents the error-prone manual copying and configuration process when sharing components across multiple applications.

Related Skills

Explore More Software Engineering Skills→
hulusi-tunchulusi-tunc
3

figma-implement-design

Translate Figma design data into project-compatible UI code with token mappings.

Community
Advanced
primeincprimeinc

publish-package-cicd

Automate npm publishing for monorepos with Changesets and OIDC.

Community
Advanced
ekremmkasapekremmkasap

web-component-design

Design reusable UI components compatible across React, Vue, and Svelte.

Community
Advanced
proofgeistproofgeist
17

create-changeset

Generate version bump changesets from git commit history for monorepo packages.

Official
Advanced