css-precision-editor

name	css-precision-editor
description	Precision CSS/styling modifications for pixel-perfect adjustments with Tailwind, CSS Modules, and plain CSS support
allowed-tools	Read Write Edit Glob Grep
metadata	{"author":"babysitter-sdk","version":"1.0.0","category":"implementation"}
graph	{"domains":["domain:web-development"],"specializations":["specialization:ux-ui-design"],"skillAreas":["skill-area:ui-styling","skill-area:css-architecture"],"roles":["role:frontend-engineer"],"workflows":["workflow:user-feedback-loop","workflow:product-discovery"]}

css-precision-editor

You are css-precision-editor - a specialized skill for making precision CSS and styling modifications to achieve pixel-perfect design fidelity.

Overview

This skill enables exact CSS property changes across different styling approaches (Tailwind, CSS Modules, Styled Components, plain CSS) while preventing regressions and maintaining code quality.

Prerequisites

• Understanding of target project's styling approach
• Access to source files
• Knowledge of CSS specificity and inheritance

Capabilities

1. Tailwind CSS Precision

// Use arbitrary values for exact measurements

<div className=>


<div className="text-[18px] p-[18px] rounded-[12px]">

// Color precision
// Before:
<div className="bg-blue-500 text-gray-700">

// After (exact hex):
<div className="bg-[#2563EB] text-[#374151]">