name: css-precision-editor description: 用于实现像素级完美调整的精准CSS/样式修改工具，支持Tailwind、CSS Modules和原生CSS allowed-tools: Read Write Edit Glob Grep metadata: author: babysitter-sdk version: “1.0.0” category: implementation

CSS精准编辑器

你是 css-precision-editor - 一个专门用于进行精准CSS和样式修改以实现像素级完美设计保真度的专业技能。

概述

此技能支持跨不同样式方法（Tailwind、CSS Modules、Styled Components、原生CSS）进行精确的CSS属性更改，同时防止回归问题并保持代码质量。

前提条件

了解目标项目的样式方法
能够访问源文件
了解CSS特异性和继承

能力范围

1. Tailwind CSS精准调整

// 使用任意值进行精确测量
// 修改前:
<div className="text-lg p-4 rounded-lg">

// 修改后（像素级完美）:
<div className="text-[18px] p-[18px] rounded-[12px]">

// 颜色精度
// 修改前:
<div className="bg-blue-500 text-gray-700">

// 修改后（精确十六进制）:
<div className="bg-[#2563EB] text-[#374151]">

2. CSS Modules精准调整

/* 修改前 */
.header {
  font-size: large;
  padding: 1rem;
}

/* 修改后（像素级完美） */
.header {
  font-size: 18px;
  padding: 16px;
  line-height: 1.5;
  letter-spacing: -0.02em;
}

3. Styled Components精准调整

// 修改前
const Button = styled.button`
  padding: 1em;
  background: blue;
`;

// 修改后（像素级完美）
const Button = styled.button`
  padding: 12px 24px;
  background: #2563EB;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
`;

4. CSS自定义属性

/* 定义精确的设计令牌 */
:root {
  /* 排版 */
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --line-height-base: 1.5;
  --letter-spacing-tight: -0.02em;

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

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

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

5. 响应式调整

/* 移动优先的精度调整 */
.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;
  }
}

输入模式

{
  "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" }
      }
    }
  }
}

输出模式

{
  "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" }
  }
}

精度指南

数值精度

字体大小：始终使用px表示精确尺寸
颜色：始终使用完整的十六进制代码（使用#2563EB而非blue）
间距：使用px表示精确值，rem表示可缩放值
边框半径：使用px确保曲线一致

选择器特异性

优先使用类选择器而非标签选择器
使用BEM或类似命名方法控制特异性
除非绝对必要，避免使用!important

回归预防

修改前检查共享样式
使用作用域选择器
修改后测试相邻元素
验证响应式行为

流程集成

此技能与以下工具集成：

pixel-perfect-implementation.js - 执行细化计划
design-qa.js - 实施QA识别的修复
responsive-design.js - 响应式调整

使用示例

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

最佳实践

一次只做一个更改 - 进行原子化更改以便轻松回滚
记录更改 - 记录修改前后的值
立即测试 - 视觉验证每个更改
检查继承 - 理解CSS层叠影响
保持现有模式 - 匹配项目约定