skills.rest
ForgePlan
ForgePlanOFFICIAL
Explore all skills by this author →
WebsiteGitHub

canvas-port

Port Pencil design systems to web frameworks with token contracts and visual regression tests.

3|Updated Apr 3, 2026
Search Tags:#React#Storybook#Web Components#Vue#Style Dictionary#Pencil#design system porting
One-click install
npx skills add https://github.com/ForgePlan/marketplace --skill canvas-port
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: canvas-port
Source: https://github.com/ForgePlan/marketplace/tree/main/plugins/agents-canvas/skills/canvas-port
Command: npx skills add https://github.com/ForgePlan/marketplace --skill canvas-port

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires pencil, style-dictionary, storybook, lit, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill simplifies the process of porting a Pencil design system to various frameworks (Web Components, React, Vue, Svelte, Angular, Solid, Lit), ensuring consistent UI/UX across multiple platforms.

Core Features & Use Cases

  • Multi-Framework Support: Port design systems to React, Vue, Svelte, Angular, Solid, Lit, and Web Components.
  • Token Contract Management: Automate the generation of CSS custom properties from tokens.json for theme management.
  • Storybook Integration: Create Storybook components with detailed story specs for each design system element.
  • Visual Regression: Use visual regression tests to ensure the ported design matches the original design.
  • Use Case: When you have a design system in Pencil and need to implement it in React for your web application.

Quick Start

Use the canvas-port skill to generate the ported design for your project's framework.

Frequently Asked Questions about canvas-port

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

FAQPage Schema
How do I port a design system to React and Vue?▼

To port a design system to React and Vue, you can automate the creation of token contracts, story specs, and visual regression tests from your original design source. This ensures consistent UI/UX across multiple web frameworks.

What's the best way to maintain consistent UI/UX across multiple web frameworks?▼

Maintaining consistent UI/UX across multiple web frameworks requires automating token contract generation and creating detailed story specs for each design system element. Visual regression tests ensure the ported design matches the original source accurately.

How does Style Dictionary integrate with Storybook for design system porting?▼

Style Dictionary integrates with Storybook by automating the generation of CSS custom properties from `tokens.json` for theme management, while Storybook components are created with detailed story specs for each design system element to ensure visual consistency.

Can I use Pencil to generate Web Components with Lit?▼

Yes, you can use Pencil to generate Web Components with Lit. The porting process requires Lit for Web Components if applicable, alongside Pencil, Style Dictionary, and Storybook to automate token contracts and visual regression tests.

Do I need Style Dictionary to automate token contract management?▼

Yes, Style Dictionary is required to automate token contract management. It generates CSS custom properties from `tokens.json` for theme management, ensuring consistent design tokens across the ported frameworks like React, Vue, Svelte, and Angular.

What are the limitations of porting design systems across frameworks?▼

Limitations of porting design systems include the strict dependency on Pencil, Style Dictionary, Storybook, and Lit for Web Components. Visual regression tests are necessary to verify that the ported UI accurately matches the original Pencil design system without visual drift.

Related Skills

Explore More Software Engineering Skills→
Sheldon-92Sheldon-92
3

web-frontend

Generate React component libraries and themes from DESIGN.md and tokens.json.

Community
Advanced
alekspetrovalekspetrov
196

visual-regression

Automate visual-regression testing setup for Storybook components with CI workflows.

Community
Advanced
SensLiaoSensLiao

qa-component-behavior

Automate UI component testing for React, Vue, Svelte, and Angular with Testing Library and Storybook.

Community
Intermediate
daffy0208daffy0208
34

Figma Developer

Convert Figma designs into React components and design tokens.

Community
Intermediate