design-handoff
The design-handoff skill generates comprehensive developer handoff documentation from design files or descriptions, translating visual and interaction specifications into actionable engineering requirements. Use this when a design is finalized and ready for implementation, providing developers with exact measurements, design token references, component states, responsive behavior, edge cases, and accessibility requirements in structured markdown format.
git clone --depth 1 https://github.com/openyak/openyak /tmp/design-handoff && cp -r /tmp/design-handoff/backend/app/data/plugins/design/skills/design-handoff ~/.claude/skills/design-handoffSKILL.md
# /design-handoff > If you see unfamiliar placeholders or need to check which tools are connected, see [CONNECTORS.md](../../CONNECTORS.md). Generate comprehensive developer handoff documentation from a design. ## Usage ``` /design-handoff $ARGUMENTS ``` Generate handoff specs for: @$1 If a Figma URL is provided, pull the design from Figma. Otherwise, work from the provided description or screenshot. ## What to Include ### Visual Specifications - Exact measurements (padding, margins, widths) - Design token references (colors, typography, spacing) - Responsive breakpoints and behavior - Component variants and states ### Interaction Specifications - Click/tap behavior - Hover states - Transitions and animations (duration, easing) - Gesture support (swipe, pinch, long-press) ### Content Specifications - Character limits - Truncation behavior - Empty states - Loading states - Error states ### Edge Cases - Minimum/maximum content - International text (longer strings) - Slow connections - Missing data ### Accessibility - Focus order - ARIA labels and roles - Keyboard interactions - Screen reader announcements ## Principles 1. **Don't assume** — If it's not specified, the developer will guess. Specify everything. 2. **Use tokens, not values** — Reference `spacing-md` not `16px`. 3. **Show all states** — Default, hover, active, disabled, loading, error, empty. 4. **Describe the why** — "This collapses on mobile because users primarily use one-handed" helps developers make good judgment calls. ## Output ```markdown ## Handoff Spec: [Feature/Screen Name] ### Overview [What this screen/feature does, user context] ### Layout [Grid system, breakpoints, responsive behavior] ### Design Tokens Used | Token | Value | Usage | |-------|-------|-------| | `color-primary` | #[hex] | CTA buttons, links | | `spacing-md` | [X]px | Between sections | | `font-heading-lg` | [size/weight/family] | Page title | ### Components | Component | Variant | Props | Notes | |-----------|---------|-------|-------| | [Component] | [Variant] | [Props] | [Special behavior] | ### States and Interactions | Element | State | Behavior | |---------|-------|----------| | [CTA Button] | Hover | [Background darken 10%] | | [CTA Button] | Loading | [Spinner, disabled] | | [Form] | Error | [Red border, error message below] | ### Responsive Behavior | Breakpoint | Changes | |------------|---------| | Desktop (>1024px) | [Default layout] | | Tablet (768-1024px) | [What changes] | | Mobile (<768px) | [What changes] | ### Edge Cases - **Empty state**: [What to show when no data] - **Long text**: [Truncation rules] - **Loading**: [Skeleton or spinner] - **Error**: [Error state appearance] ### Animation / Motion | Element | Trigger | Animation | Duration | Easing | |---------|---------|-----------|----------|--------| | [Element] | [Trigger] | [Description] | [ms] | [easing] | ### Accessibility Notes - [Focus order] - [ARIA labels needed] - [Keyboard interactions] ``` ## If Connectors Available If **~~design tool** is connected: - Pull exact measurements, tokens, and component specs from Figma - Export assets and generate a complete spec sheet If **~~project tracker** is connected: - Link the handoff to the implementation ticket - Create sub-tasks for each section of the spec ## Tips 1. **Share the Figma link** — I can pull exact measurements, tokens, and component info. 2. **Mention edge cases** — "What happens with 100 items?" helps me spec boundary conditions. 3. **Specify the tech stack** — "We use React + Tailwind" helps me give relevant implementation notes.
Convert laboratory instrument output files (PDF, CSV, Excel, TXT) to Allotrope Simple Model (ASM) JSON format or flattened 2D CSV. Use this skill when scientists need to standardize instrument data for LIMS systems, data lakes, or downstream analysis. Supports auto-detection of instrument types. Outputs include full ASM JSON, flattened CSV for easy import, and exportable Python code for data engineers. Common triggers include converting instrument files, standardizing lab data, preparing data for upload to LIMS/ELN systems, or generating parser code for production pipelines.
Run nf-core bioinformatics pipelines (rnaseq, sarek, atacseq) on sequencing data. Use when analyzing RNA-seq, WGS/WES, or ATAC-seq data—either local FASTQs or public datasets from GEO/SRA. Triggers on nf-core, Nextflow, FASTQ analysis, variant calling, gene expression, differential expression, GEO reanalysis, GSE/GSM/SRR accessions, or samplesheet creation.
This skill should be used when scientists need help with research problem selection, project ideation, troubleshooting stuck projects, or strategic scientific decisions. Use this skill when users ask to pitch a new research idea, work through a project problem, evaluate project risks, plan research strategy, navigate decision trees, or get help choosing what scientific problem to work on. Typical requests include "I have an idea for a project", "I'm stuck on my research", "help me evaluate this project", "what should I work on", or "I need strategic advice about my research".
Deep learning for single-cell analysis using scvi-tools. This skill should be used when users need (1) data integration and batch correction with scVI/scANVI, (2) ATAC-seq analysis with PeakVI, (3) CITE-seq multi-modal analysis with totalVI, (4) multiome RNA+ATAC analysis with MultiVI, (5) spatial transcriptomics deconvolution with DestVI, (6) label transfer and reference mapping with scANVI/scArches, (7) RNA velocity with veloVI, or (8) any deep learning-based single-cell method. Triggers include mentions of scVI, scANVI, totalVI, PeakVI, MultiVI, DestVI, veloVI, sysVI, scArches, variational autoencoder, VAE, batch correction, data integration, multi-modal, CITE-seq, multiome, reference mapping, latent space.
Performs quality control on single-cell RNA-seq data (.h5ad or .h5 files) using scverse best practices with MAD-based filtering and comprehensive visualizations. Use when users request QC analysis, filtering low-quality cells, assessing data quality, or following scverse/scanpy best practices for single-cell analysis.
Set up your bio-research environment and explore available tools. Use when first getting oriented with the plugin, checking which literature, drug-discovery, or visualization MCP servers are connected, or surveying available analysis skills before starting a new project.
>
>