trim-diff
CommunityIdentify design-code drift and fix it fast.
Design & Creative#workflow#integration#drift-detection#penpot#diff-report#design-code#mismatch-categorization
Authoryoshisada
Version1.0.0
Installs0
System Documentation
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.
Dependency Matrix
Required Modules
None requiredComponents
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: trim-diff Download link: https://github.com/yoshisada/ai-repo-template/archive/main.zip#trim-diff Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.