Skills
.Work. You
Rest

sync-pencil

Official

Bidirectional design-code sync for UI parity.

Design & Creative#synchronization#diff#code#ui-design#design-to-code#bidirectional#pencil
Authorlaststance
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Pencil designs (.pen) and their implementation code often diverge during iterative development. This Skill enables bidirectional synchronization to keep design and code in sync automatically, reducing rework and misalignment.

Core Features & Use Cases

  • Supports design-to-code and code-to-design workflows to maintain parity between visuals and implementation.
  • Provides element-level mapping, diff analysis, and batch-update capabilities for both design and code.
  • Suitable for design handoffs, UI refactors, and feature expansions where designs and code may diverge.

Quick Start

Provide a target design and code and run the bidirectional sync to update either side.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: sync-pencil
Download link: https://github.com/laststance/skills/archive/main.zip#sync-pencil

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.