grailautomation/design-handoff
design/skills/design-handoff/SKILL.md
Create comprehensive developer handoff documentation from designs. Trigger with "handoff to engineering", "developer specs", "implementation notes", "design specs for developers", or when a design needs to be translated into detailed implementation guidance.
development
Updated May 15, 2026
$ install --global
skillsauthnpx skillsauth add grailautomation/claude-plugins design-handoffInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: May 16, 2026, 5:47 AM170.4s1 file scanned
SKILL.md
- name:
- design-handoff
- description:
- Create comprehensive developer handoff documentation from designs. Trigger with "handoff to engineering", "developer specs", "implementation notes", "design specs for developers", or when a design needs to be translated into detailed implementation guidance.
Design Handoff
Create clear, complete handoff documentation so developers can implement designs accurately.
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
- Don't assume — If it's not specified, the developer will guess. Specify everything.
- Use tokens, not values — Reference
spacing-mdnot16px. - Show all states — Default, hover, active, disabled, loading, error, empty.
- Describe the why — "This collapses on mobile because users primarily use one-handed" helps developers make good judgment calls.
Related Skills
grailautomation/write-spec
documentation
VerifiedTrustedCommunity
Write a feature spec or PRD from a problem statement or feature idea
SKILL.mdUpdated May 15, 2026
grailautomation/user-research-synthesis
development
VerifiedTrustedCommunity
Synthesize qualitative and quantitative user research into structured insights and opportunity areas. Use when analyzing interview notes, survey responses, support tickets, or behavioral data to identify themes, build personas, or prioritize opportunities.
SKILL.mdUpdated May 15, 2026
grailautomation/synthesize-research
research
VerifiedTrustedCommunity
Synthesize user research from interviews, surveys, and feedback into structured insights
SKILL.mdUpdated May 15, 2026
grailautomation/stakeholder-update
data-ai
VerifiedTrustedCommunity
Generate a stakeholder update tailored to audience and cadence
SKILL.mdUpdated May 15, 2026