skills.rest
yoshisada
yoshisadaCOMMUNITY
Explore all skills by this author →
GitHub

trim-diff

Detect and categorize drift between Penpot designs and codebases.

Updated Mar 26, 2026
Search Tags:#workflow#integration#drift-detection#penpot#diff-report#design-code#mismatch-categorization
One-click install
npx skills add https://github.com/yoshisada/ai-repo-template --skill trim-diff
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: trim-diff
Source: https://github.com/yoshisada/ai-repo-template/tree/main/plugin-trim/skills/trim-diff
Command: npx skills add https://github.com/yoshisada/ai-repo-template --skill trim-diff

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Detect and categorize drift between Penpot designs and code, surfacing misalignments with clear actionable guidance.

Core Features & Use Cases

  • Automated design-code drift detection that compares Penpot components against the codebase
  • Categorized drift reports with explicit categories: code-only, design-only, style-divergence, layout-difference
  • Actionable suggestions included per mismatch to support pull, push, or manual review
  • Wheel-workflow orchestration for end-to-end drift analysis and reporting

Quick Start

Run the trim-diff workflow to generate a drift report comparing Penpot designs with your codebase.

Frequently Asked Questions about trim-diff

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

FAQPage Schema
How do I detect design-code drift between Penpot and my codebase?▼

Design-code drift is detected by comparing Penpot components against your codebase to surface misalignments. The workflow reads configuration files and outputs a structured diff report with categorized mismatches and actionable suggestions.

What categories are used to classify Penpot design and code mismatches?▼

Mismatches are classified into four explicit categories: code-only, design-only, style-divergence, and layout-difference. This categorization helps developers quickly understand the nature of each design-code misalignment.

How do I generate a diff report comparing Penpot designs with tracked components?▼

Run the trim-diff workflow to orchestrate end-to-end analysis and generate a drift report. It compares your Penpot designs with tracked components and provides actionable suggestions per mismatch for pull, push, or manual review.

Do I need MCP tooling to run the Penpot drift detection workflow?▼

Yes, MCP tooling is required to execute the drift detection workflow. The process relies on MCP integration to read the .trim/config and .trim/components.json files and output the structured mismatch report.

Can I run a component-level diff instead of a full design-code comparison?▼

Yes, the drift detection workflow supports both full-run and component-level diffs. This allows you to target specific tracked components for comparison rather than analyzing the entire Penpot project.

What actionable suggestions are provided when a Penpot and code mismatch is found?▼

Each identified mismatch includes actionable suggestions supporting pull, push, or manual review workflows. This guidance helps developers resolve design-code drift efficiently based on the specific mismatch category.

Related Skills

Explore More Design & Creative Skills→
yoshisadayoshisada

trim-init

Discover Penpot files via MCP and create .trim/config with component mappings.

Community
Intermediate
reedmayhew18reedmayhew18
23

code-review

Identify issues in code changes and produce a severity-organized report.

Community
Advanced
Shaarav4795Shaarav4795

penpot-uiux-design

Create UI/UX designs and design systems in Penpot via MCP tools.

Community
Intermediate
ericdahl-devericdahl-dev

design-review

Detect and resolve visual inconsistencies in code or design documents.

Official
Intermediate