Audit UI layouts and component styling with pixel-precision via the Caliper MCP server.
npx skills add https://github.com/issacnav/flashcardapp --skill caliper
Please help me install this Agent Skill. Skill: caliper Source: https://github.com/issacnav/flashcardapp/tree/main/.agents/skills/caliper Command: npx skills add https://github.com/issacnav/flashcardapp --skill caliper
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".
Start Caliper in development mode, connect to a live browser with an active Agent Bridge, and begin auditing the target component.
High-intent search queries and answers about installing and using this skill.
You can audit UI spacing and alignment with pixel precision by using an agent to measure rendered geometry and spacing. This approach connects to a live browser session to verify layout measurements directly against your design specifications.
Mapping rendered UI elements back to source code is achieved through source tracing, which links the pixel-perfect measurements directly to specific source code lines. This allows you to quickly locate and fix styling discrepancies during development.
Calculating WCAG contrast ratios during a design audit involves measuring the rendered colors and evaluating their perceptual differences. The system computes both the contrast ratio and Delta E to ensure your UI meets accessibility standards.
Yes, an active browser session connected to an MCP server is required to measure layout geometry and fix layout shift. The environment setup includes connecting to this live session to perform real-time, pixel-perfect verification.
Yes, you can monitor user selections in real-time while verifying UI styling through passive observation. This feature utilizes a specific state resource to track selections dynamically without interrupting the development workflow.
Production safety cautions for layout audits involve preventing the measurement tools and environment setup from leaking into production builds. You should run the auditing processes in development mode to avoid altering the shipped bundle.
BorisserzInspect DOM, console, network, and performance data via Chrome DevTools MCP.
nangyak4415-sudoRefine UI alignment, spacing, typography, interaction states, and copy inconsistencies.
wesleyegbertoAudit and refactor web UI designs for visual hierarchy, spacing, and depth.
jiunbaeAutomate App Store Connect tasks via API and Playwright browser automation.
