pixel-perfect-report-layout

Official

Achieve pixel-perfect HTML report layouts.

Authorzeitwert
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This skill enables precise CSS positioning to reproduce original Aspose Word template layouts for HTML print reports, reducing visual drift between previews and final outputs.

Core Features & Use Cases

  • Absolute positioning: Create per-element CSS classes with explicit top/left/right/bottom coordinates to lock layout.
  • Measurement-based workflow: Convert measured positions from Aspose screenshots into CSS mm units and relative containers.
  • Use Case: When comparing two report screenshots, generate a pixel-perfect layout by aligning key elements like cover photo, labels, and sections.

Quick Start

Use the pixel-perfect-report-layout skill to start aligning report elements to match the original layout during QA.

Dependency Matrix

Required Modules

None required

Components

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: pixel-perfect-report-layout
Download link: https://github.com/zeitwert/fm-server/archive/main.zip#pixel-perfect-report-layout

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.