npx claudepluginhub 8gg-git/knowledge-work-plugins --plugin design<Figma URL or design description># /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. See the **design-handoff** skill for guidance on what to include and handoff principles. ## Usage Generate handoff specs for: @$1 If a Figma URL is provided, pull the design from Figma. Otherwise, work from the provided description or screenshot. ## Output ## If Connectors Available If **~~design tool** is connected: - Pull exact measurements, tokens, and component specs from Figma...
/handoffGenerates a structured markdown handoff document summarizing git status, commits, uncommitted changes, session learnings, progress, and next steps. Saves to ~/.pro-workflow/handoffs/. Supports --full and --compact modes.
/handoffEnds swarm session: summarizes work/blockers, persists state via hivemind_store and git, cleans agents/tasks/reservations, updates hive, generates handoff note.
/handoffGenerates a developer handoff package for the specified screen, feature, or component, including visual specs, interaction specs, QA checklist, assets, and notes.
/handoffSaves session state snapshot as structured JSON to docs/tasks/<branch>/session_logs/<timestamp>_handoff.json, capturing git status, progress summary, tasks, and context for resume.
/handoffCreates a detailed handoff plan summarizing conversation, technical details, code, decisions, and next steps for continuing work in a new session.
/handoffCreates handoff branch from main, scratchpad with analysis/plan/files/testing, PR, roadmap entry, and copy-paste worker prompt for task delegation.
If you see unfamiliar placeholders or need to check which tools are connected, see CONNECTORS.md.
Generate comprehensive developer handoff documentation from a design. See the design-handoff skill for guidance on what to include and handoff principles.
/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.
## 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 ~~design tool is connected:
If ~~project tracker is connected: