Css precision editor

Skill a5c-ai/babysitter/library/specializations/ux-ui-design/skills/css-precision-editor

Babysitter enforces obedience on agentic workforces and enables them to manage extremely complex tasks and workflows through deterministic, hallucination-free self-orchestration

Install

npx -y skills add a5c-ai/babysitter --skill css-precision-editor

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

What its author says it does

Copied from the file, not written here

Precision CSS/styling modifications for pixel-perfect adjustments with Tailwind, CSS Modules, and plain CSS support

SKILL.md

5.3 KB, as published. Nobody here has run it

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
// Before:
<div className="text-lg p-4 rounded-lg">

// After (pixel-perfect):
<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]">

2. CSS Modules Precision

/* Before */
.header {
  font-size: large;
  padding: 1rem;
}

/* After (pixel-perfect) */
.header {
  font-size: 18px;
  padding: 16px;
  line-height: 1.5;
  letter-spacing: -0.02em;
}

3. Styled Components Precision

// Before
const Button = styled.button`
  padding: 1em;
  background: blue;
`;

// After (pixel-perfect)
const Button = styled.button`
  padding: 12px 24px;
  background: #2563EB;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
`;

4. CSS Custom Properties

/* Define precise design tokens */
:root {
  /* Typography */
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --line-height-base: 1.5;
  --letter-spacing-tight: -0.02em;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;

  /* Colors */
  --color-primary: #2563EB;
  --color-secondary: #64748B;
  --color-background: #F8FAFC;

  /* Borders */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
}

5. Responsive Adjustments

/* Mobile-first precision */
.component {
  font-size: 14px;
  padding: 12px;
}

@media (min-width: 768px) {
  .component {
    font-size: 16px;
    padding: 16px;
  }
}

@media (min-width: 1024px) {
  .component {
    font-size: 18px;
    padding: 20px;
  }
}

Input Schema

{
  "type": "object",
  "required": ["changes", "implementationContext"],
  "properties": {
    "changes": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "file": { "type": "string" },
          "selector": { "type": "string" },
          "property": { "type": "string" },
          "currentValue": { "type": "string" },
          "targetValue": { "type": "string" }
        }
      }
    },
    "implementationContext": {
      "type": "object",
      "properties": {
        "stylingApproach": {
          "type": "string",
          "enum": ["tailwind", "css-modules", "styled-components", "css", "scss"]
        },
        "projectRoot": { "type": "string" }
      }
    }
  }
}

Output Schema

{
  "type": "object",
  "properties": {
    "success": { "type": "boolean" },
    "filesModified": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "path": { "type": "string" },
          "changes": { "type": "array" }
        }
      }
    },
    "changesApplied": { "type": "array" },
    "changesSkipped": { "type": "array" },
    "summary": { "type": "string" }
  }
}

Precision Guidelines

Value Precision

Font sizes: Always use px for exact sizes
Colors: Always use full hex codes (#2563EB not blue)
Spacing: Use px for exact values, rem for scalable
Border radius: Use px for consistent curves

Selector Specificity

Prefer class selectors over tag selectors
Use BEM or similar naming for specificity control
Avoid !important unless absolutely necessary

Regression Prevention

Check for shared styles before modifying
Use scoped selectors
Test sibling elements after changes
Verify responsive behavior

Process Integration

This skill integrates with:

pixel-perfect-implementation.js - Executes refinement plans
design-qa.js - Implements QA-identified fixes
responsive-design.js - Responsive adjustments

Usage Example

/skill css-precision-editor \
  --file src/components/Header.tsx \
  --selector ".header-title" \
  --property "font-size" \
  --current "1.5rem" \
  --target "24px"

Best Practices

One change at a time - Make atomic changes for easy rollback
Document changes - Note before/after values
Test immediately - Verify each change visually
Check inheritance - Understand CSS cascade impact
Preserve existing patterns - Match project conventions