caliper
CommunityPixel-perfect UI audits with source mapping.
Design & Creative#design-audit#layout-measurement#contrast-check#source-mapping#caliper#ui-precision
Authorissacnav
Version1.0.0
Installs0
System Documentation
What problem does it solve?
High-precision layout audits and component tracing for design engineering. Use when asked to "audit spacing", "measure contrast", "verify styling", "fix layout shift", or "reconcile design".
Core Features & Use Cases
- High-Precision Auditing: Measure pixel-perfect spacing, geometry, and alignment.
- Color Verification: Calculate WCAG contrast ratios and Delta E perceptual differences.
- Source Tracing: Map rendered elements directly to specific source code lines.
- Passive Observation: Monitor user selections in real-time via the caliper://state resource.
Quick Start
Start Caliper in development mode, connect to a live browser with an active Agent Bridge, and begin auditing the target component.
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: caliper Download link: https://github.com/issacnav/flashcardapp/archive/main.zip#caliper 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.