trim-library

Name: trim-library
Availability: InStock
Author: yoshisada

List tracked code and Penpot components with sync status, or sync drifted components.

Updated Mar 26, 2026

Search Tags:#workflow #component-library #trim #penpot #code-to-design #drift-synchronization

Ready to run

npx skills add https://github.com/yoshisada/ai-repo-template --skill trim-library

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: trim-library
Source: https://github.com/yoshisada/ai-repo-template/tree/main/plugin-trim/skills/trim-library
Command: npx skills add https://github.com/yoshisada/ai-repo-template --skill trim-library

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The bidirectional component library often drifts between code and design assets; this Skill simplifies keeping all tracked components aligned and in sync.

Core Features & Use Cases

List all tracked components with their current sync status.
Sync drifted components in one step when invoked with the sync option.
View and audit mappings between code and Penpot components to facilitate design-code collaboration.

Quick Start

List components to review their status, or run a sync to reconcile drifted items.

Frequently Asked Questions about trim-library

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

FAQPage Schema

How do I keep code-to-design component mappings in sync?▼

To keep code-to-design component mappings in sync, invoke the trim-library Skill with the 'sync' option to perform drift corrections and reconcile tracked items. It automatically aligns drifted code components with their corresponding Penpot design assets.

How do I list tracked components and check their sync status?▼

To list tracked components and check their sync status, simply invoke the Skill without the sync option. It reads the local .trim/components.json file to display all tracked code and Penpot components and their current alignment state.

Why does my Penpot component library drift from my code components?▼

A Penpot component library drifts from code components when bidirectional updates occur independently without coordination. The Skill detects this drift by comparing local git timestamps and component states against the stored .trim configuration.

Do I need a local .trim/config to manage bidirectional component synchronization?▼

Yes, you need a local .trim/config and a .trim/components.json file to manage bidirectional component synchronization. The Skill relies on these local files to determine the current state of tracked code and Penpot components.

Can I audit mappings between code and Penpot components offline?▼

Yes, you can audit mappings between code and Penpot components offline. The Skill supports offline listing of all tracked components and their sync status by reading the local .trim/components.json file without requiring an active connection.

What is the best way to reconcile drifted design assets and code components?▼

The best way to reconcile drifted design assets and code components is to run a single sync operation using the trim-library Skill. It coordinates plugin resolution, git timestamps, and MCP-based syncing to correct drift in one step.