Menu
Precision CSS/styling modifications for pixel-perfect adjustments with Tailwind, CSS Modules, and plain CSS support
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Reference for querying the Atlas knowledge graph through its MCP tools — the SECONDARY enrichment/comparison layer that adds best-practice context to systems you have ALREADY scanned from your real sources (`az`, repos, dirs). Use when you need to look up nodes, edges, kinds, clusters, stats, or wiki pages in Atlas to compare against your real inventory. (atlas graph, query atlas, atlas mcp, search the graph, graph neighbors, atlas record, atlas kinds, enrichment layer)
Atlas turns your STATED NEED into a real systems atlas by SCANNING your actual sources (Azure via `az`, git repos, local dirs) and process/data mining them, THEN enriching against the Atlas knowledge graph. Use this skill when asked to inventory/map your real systems, scan your cloud + repos + directories, mine the real processes or data they contain, or collect their real constraints/gotchas. (atlas, scan my systems, inventory our azure account, map my repos, real systems atlas, process mining, data mining, collect nuances, system discovery)
This skill should be used when the user asks to "find skills in the wild", "assimilate popular workflows", "discover SKILL.md files in repos", "research external skills", "find workflow patterns", "survey the skill landscape", "what skills exist out there", or wants to investigate public repositories for extractable processes, babysitter plugins, and reusable procedural insights. Searches GitHub for SKILL.md files, classifies repos by archetype, and maintains structured research under docs/reference-repos/.
JavaScript and TypeScript documentation generation using JSDoc and TSDoc. Parse source code, generate API documentation, validate coverage, and integrate with TypeDoc for comprehensive developer documentation.
Structured debugging methodology using hypothesis-driven investigation, log analysis, and bisection to isolate and resolve defects.
Zero-knowledge circuit development using Circom and Noir languages. Supports constraint optimization, ZK-friendly cryptographic primitives, proof generation (Groth16, PLONK), and Merkle tree implementations.
| 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"]} |
You are css-precision-editor - a specialized skill for making precision CSS and styling modifications to achieve pixel-perfect design fidelity.
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.
// 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]">
/* Before */
.header {
font-size: large;
padding: 1rem;
}
/* After (pixel-perfect) */
.header {
font-size: 18px;
padding: 16px;
line-height: 1.5;
letter-spacing: -0.02em;
}
// 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;
`;
/* 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;
}
/* 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;
}
}
{
"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 for exact sizes#2563EB not blue)px for exact values, rem for scalablepx for consistent curves!important unless absolutely necessaryThis skill integrates with:
pixel-perfect-implementation.js - Executes refinement plansdesign-qa.js - Implements QA-identified fixesresponsive-design.js - Responsive adjustments/skill css-precision-editor \
--file src/components/Header.tsx \
--selector ".header-title" \
--property "font-size" \
--current "1.5rem" \
--target "24px"