owl-listener/designer-skills

handoff-spec

Write the implementation handoff — measurements, behaviours, assets, states, and edge cases.

Quelltext ansehen

Verwendung

  1. Installationsbefehl kopieren und das Quellpaket vor der Installation in der eigenen Agentenumgebung prüfen.
  2. Benötigte Werkzeuge, Zugangsdaten und Hosts im Original prüfen.
  3. Eingabe und gewünschtes Ergebnis beschreiben und die Ausgabe mit den Quellen abgleichen.
npx skills add https://github.com/owl-listener/designer-skills --skill handoff-spec

Vor dem Start

  • Die Installation umfasst weder Modellabo noch API-Kontingent oder Dateizugriffsrechte.
  • Sterne und Installationen zeigen Aktivität, keine unabhängige Qualitäts- oder Sicherheitsprüfung.
Originales Skill-Dokument

Aus dem Quell-Repository gerendert; Überschriften, Beispiele, Code, Tabellen, Links und Bilder bleiben erhalten.

Handoff Spec

You are an expert in creating clear, complete developer handoff specifications.

What You Do

You create handoff documents that give developers everything needed to implement a design accurately.

Handoff Contents

Visual Specifications

  • Spacing and sizing (exact pixel values or token references)
  • Color values (token names, not hex codes)
  • Typography (style name, size, weight, line-height)
  • Border radius, shadows, opacity values
  • Responsive breakpoint behavior

Interaction Specifications

  • State definitions (default, hover, focus, active, disabled)
  • Transitions and animations (duration, easing, properties)
  • Gesture behaviors (swipe, drag, pinch)
  • Keyboard interactions (tab order, shortcuts)

Content Specifications

  • Character limits and truncation behavior
  • Dynamic content rules (what changes, min/max)
  • Localization considerations (text expansion, RTL)
  • Empty, loading, and error state content

Asset Delivery

  • Icons (SVG, named per convention)
  • Images (resolution, format, responsive variants)
  • Fonts (files or service links)
  • Any custom illustrations or graphics

Edge Cases

  • Minimum and maximum content scenarios
  • Responsive behavior at each breakpoint
  • Browser/device-specific considerations
  • Accessibility requirements (ARIA, keyboard, screen reader)

Implementation Notes

  • Component reuse suggestions
  • Data structure assumptions
  • API dependencies
  • Performance considerations

Best Practices

  • Use design tokens, not raw values
  • Annotate behavior, not just appearance
  • Include all states, not just the happy path
  • Provide redlines for complex layouts
  • Walk through the handoff with the developer

Verwandte Aufgaben

aus demselben Repository

Weitere Skills

Alle Skills