export-design-system

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.