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

trim-verify

Verify rendered code against Penpot designs by capturing screenshots and comparing with Claude vision.

Updated Mar 26, 2026
Search Tags:#ui-testing#flows#headless-browser#visual-verification#penpot#claude-vision
One-click install
npx skills add https://github.com/yoshisada/ai-repo-template --skill trim-verify
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: trim-verify
Source: https://github.com/yoshisada/ai-repo-template/tree/main/plugin-trim/skills/trim-verify
Command: npx skills add https://github.com/yoshisada/ai-repo-template --skill trim-verify

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Visually verify that rendered code matches Penpot designs by walking user flows, capturing screenshots, and comparing visuals with Claude vision.

Core Features & Use Cases

  • Screenshots-driven visual verification across tracked flows.
  • Automated comparison against Penpot frames to identify layout or styling discrepancies.
  • Use Case: QA engineers validating UI coherence between designs and implemented UI in a codebase.

Quick Start

Run the verify workflow to start validating the current project against Penpot designs.

Frequently Asked Questions about trim-verify

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

FAQPage Schema
How do I visually verify rendered code against Penpot designs?▼

Visually verify rendered code against Penpot designs by walking each tracked user flow, capturing screenshots, and comparing them against design frames using Claude vision to identify layout or styling discrepancies.

Can I automate UI testing between my codebase and Penpot frames?▼

Yes, you can automate UI testing by defining tracked flows in .trim/flows.json, rendering pages with Playwright, and using Claude vision to compare the captured screenshots against Penpot frames.

Do I need Playwright to perform visual verification on Penpot designs?▼

Yes, Playwright or equivalent headless-browser tooling is required to render pages and generate screenshots for visual verification against Penpot frames accessed via MCP.

How does Claude vision identify styling discrepancies between code and design?▼

Claude vision identifies styling discrepancies by analyzing screenshots captured during user flows and comparing the rendered UI layout visually against the corresponding Penpot design frames.

How do I scope visual verification to specific user flows?▼

Scope visual verification to specific user flows by defining them in the .trim/flows.json file and applying optional per-flow scope settings before running the verify workflow.

What is the best way to validate UI coherence between designs and implemented code?▼

The best way to validate UI coherence is to walk tracked user flows, capture screenshots with a headless browser, and use Claude vision to compare them against Penpot design frames.

Related Skills

Explore More Design & Creative Skills→
akiyoshiakiyoshi

browse

Automate QA testing with a headless Chromium browser.

Community
Advanced
hjemmesidekongenhjemmesidekongen
1

visual-verification

Capture Playwright screenshots at three breakpoints and verify UI output with layout checks and LLM vision comparison.

Community
Advanced
sgcarstrendssgcarstrends
21

e2e-testing

Automate end-to-end UI testing with Playwright across browsers.

Official
Advanced
FutureAtomsFutureAtoms
1

playwright-visual-regression

Compare web application screenshots against baselines using Playwright's toHaveScreenshot assertion.

Community
Advanced