mockup-fidelity
OfficialValidate UI fidelity against mockups with precise, automated analysis.
Software Engineering#automated testing#front-end development#design validation#ui comparison#ui fidelity
AuthorDiologIR
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill ensures that implemented UIs accurately reproduce their reference mockups, detecting and resolving deviations through automated analysis and measurement.
Core Features & Use Cases
- UI Fidelity Validation: Compares implemented UIs against their reference mockups to ensure pixel-perfect alignment.
- Automated Comparison: Uses machine learning and automated tools to identify and report mismatches.
- Functional Gap Identification: Identifies missing functionality or deviations from the mockup.
- Use Case: When a web or mobile application is developed and needs to be reviewed for fidelity against its design mockups.
Quick Start
Use the mockup-fidelity skill to validate the UI of 'web-app' against 'mockup.web'. This will measure and compare the actual application UI against the provided web mockup.
Dependency Matrix
Required Modules
playwrightgetcomputedstyleodiffaxi-js
Components
scriptsreferencesassets
💻 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: mockup-fidelity Download link: https://github.com/DiologIR/diolog-plugins/archive/main.zip#mockup-fidelity 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 620,000+ vetted skills library on demand.