Claude MarketplacesSubmit

Handoff Spec

owl-listener/designer-skills

Turns design mockups into actual implementation specs that developers can work from without playing twenty questions. It structures the handoff around visual measurements, interaction states, content rules, asset delivery, and edge cases. The emphasis on design tokens over raw values and documenting all states (not just the happy path) is solid. Use this when you're bridging design and development and want to avoid the usual back and forth about "what happens when this text is really long" or "what's the hover state supposed to look like." Beats annotating Figma files in the comments for the tenth time.

skills.sh installs: 2.3K
GitHub stars: 3.3K
last updated: Aug 21, 2026

Install

$ npx -y skills add owl-listener/designer-skills --skill handoff-spec --agent claude-code

Installs into .claude/skills of the current project.

Files

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

SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthly Promote your product hereReach 125k+ visitors monthly

Agent CaffeineSponsoredClose your lid, come back to finished work

SnugSponsoredThe clipboard manager for the AI era Promote your product hereReach 125k+ visitors monthly

WaxSponsoredBlock anything with supervision, without erasing your iPhone Promote your product hereReach 125k+ visitors monthly

knobsSponsoredSee your site on any phone, any day, in any language

Details

Repository: github.com/owl-listener/designer-skills
Category: Backend & APIs
First seen: Jun 3, 2026

Recommended

More Backend & APIs

1

alphagenome-single-variant-analysisgoogle-deepmind/science-skillsAnalyzes genetic variant effects on gene expression (RNA-seq), chromatin accessibility (DNASE), histone marks (ChIP), and transcription factors using the AlphaG2.3Kskills.sh installs

2

meta-adskostja94/marketing-skillsWhen the user wants to set up, optimize, or manage Meta (Facebook/Instagram) Ads. Also use when the user mentions "Meta Ads," "Facebook Ads," "Instagram Ads," "2.3Kskills.sh installs

3

huggingface-papershuggingface/skillsLook up and read Hugging Face paper pages in markdown, and use the papers API for structured metadata such as authors, linked models/datasets/spaces, Github rep2.3Kskills.sh installs

4

swap-integrationuniswap/uniswap-aiIntegrate Uniswap swaps into applications. Use when user says "integrate swaps", "uniswap", "trading api", "add swap functionality", "build a swap frontend", "c2.3Kskills.sh installs

5

research-decision-roomnexu-io/open-designTurn messy user research notes, interviews, support tickets, surveys, and product context into an evidence-backed decision room: a single HTML artifact with an 2.3Kskills.sh installs

6

capacitor-pluginscapawesome-team/skillsGuides the agent through installing, configuring, and using Capacitor plugins from six sources — official Capacitor plugins, Capawesome plugins, Capacitor Commu2.3Kskills.sh installs