Generate Precise Design Handoff Specifications

This skill provides expertise in creating comprehensive design handoff specifications that bridge the gap between design and development, translating visual designs into precise technical documentation developers can implement accurately and efficiently. Core principles cover precision and clarity (exact measurement/spacing/positioning values, consistent units such as px/rem/em per project standards, both absolute and relative measurements where appropriate, exact color values in multiple formats - hex, RGB, HSL), developer-focused documentation (information structured in the order developers need it, CSS properties and values included where useful, component hierarchy and nesting structure, documented interactive states and transitions), and asset management (cataloging all required images/icons/graphics, export formats/sizes/compression requirements, naming conventions and file organization, accessibility considerations for visual elements).

The specification structure covers a component overview (type - atom/molecule/organism, usage guidance, listed variants including default/hover/active/disabled), layout and positioning specified as actual CSS (container width/padding/margin/flex properties), and typography specifications as CSS (font-family, font-size, font-weight, line-height with percentage annotation, letter-spacing, color). Interactive state documentation specifies exact values per state - default (background, border, shadow), hover (background, border, transition timing, cursor), active/pressed (background, border, transform), and disabled (background, color, cursor, opacity).

Responsive behavior is specified through breakpoint-specific CSS media queries for mobile (320-767px), tablet (768-1023px), and desktop (1024px+), each with distinct padding, font-size, and width values. Asset specifications cover icon requirements (SVG preferred with PNG fallback, standard sizes like 16x16/24x24/32x32px, monochrome color with hover state, a naming convention) and image requirements (WebP with JPEG fallback, 1x/2x/3x for retina displays, compression targets, descriptive alt text). Animation and transition specifications cover CSS transition-property/duration/timing-function values and keyframe-based loading animations.

Accessibility requirements cover WCAG compliance details (minimum 4.5:1 color contrast for normal text and 3:1 for large text, a specified focus indicator style, minimum 44x44px touch targets, proper ARIA labels and roles) with an HTML markup example showing aria-label and aria-describedby usage. Implementation notes cover developer considerations - z-index hierarchy documentation, performance flags for heavy animations or large assets, minimum browser version support, required font/library/framework dependencies, and edge-case/error-state test scenarios - plus a quality-control checklist verifying visual accuracy against mockups, interactive state functionality, responsive behavior across breakpoints, accessibility compliance, performance targets, and cross-browser compatibility.

Use this skill when writing a design handoff specification - translating a visual design into precise CSS values, interactive state documentation, responsive breakpoint behavior, and asset requirements for developers to implement. It is well suited to design systems or components complex enough to need precise measurement and state documentation. It is not meant for trivial single-property style changes with no meaningful states, breakpoints, or asset requirements to document.

Input: the visual design or component to hand off, and the project's unit/naming/accessibility standards.

Output: a structured specification with CSS layout/typography values, interactive state definitions, responsive breakpoint rules, and asset requirements. Example interactive state specification:

.component:hover {
  background: #F9FAFB;
  border: 1px solid #D1D5DB;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}

Produces CSS/HTML specifications compatible with standard frontend frameworks; references WCAG accessibility standards and ARIA markup conventions.

UX/UI designers and design system maintainers writing developer-ready handoff specs, and teams that need precise, unambiguous design-to-code documentation rather than screenshots with verbal notes.