kienbui1995/design-handoff
skills/design-handoff/SKILL.md
Use when preparing designs for developer implementation, writing specs, or managing the design-to-code workflow
development
Updated Apr 23, 2026
$ install --global
skillsauthnpx skillsauth add kienbui1995/magic-powers 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: Apr 24, 2026, 12:54 AM18.8s1 file scanned
SKILL.md
- name:
- design-handoff
- description:
- Use when preparing designs for developer implementation, writing specs, or managing the design-to-code workflow
Design Handoff
When to Use
When designs are ready for implementation and need to be communicated clearly to developers.
Core Jobs
1. Prepare the Design File
Before handing off:
- [ ] All components use design system tokens (no magic numbers)
- [ ] All states covered: default, hover, active, disabled, error, empty, loading
- [ ] Responsive breakpoints annotated (mobile, tablet, desktop)
- [ ] Edge cases shown (long text, empty states, error states)
- [ ] Assets exported and named (SVGs, icons, images)
2. Write the Spec
Per component or screen:
- Spacing: exact px/rem values for padding, margin, gaps
- Typography: font size, weight, line height, letter spacing
- Colors: token names (not hex) — "primary-500", not "#3B82F6"
- Interactions: hover states, animation timing, transition easing
- Behavior: what happens on click/tap, keyboard interaction
3. Communicate Edge Cases
Write a short note per complex component:
- What is the max content length? What happens at overflow?
- What if the list is empty?
- What if the image fails to load?
4. Stay Available During Implementation
- Answer questions same day (blocking developers = wasted time)
- Review implementation against designs before PR merge
- Document any dev-agreed deviations from spec
Key Outputs
- Annotated design file (Figma/Sketch link)
- Component spec document
- Edge case documentation
- Exported assets
Anti-Patterns
- Handing off without covering all states
- Specs that say "matches design" instead of actual values
- No responsive designs for a responsive product
- Disappearing during implementation
Related Skills
kienbui1995/xr-interface-design
content-media
VerifiedTrustedCommunity
Use when designing for XR (AR/VR/MR), choosing interaction modes, or adapting 2D UI patterns for spatial computing
SKILL.mdUpdated Apr 24, 2026
kienbui1995/writing-skills
testing
VerifiedTrustedCommunity
Use when creating new skills, editing existing skills, or verifying skills work before deployment
SKILL.mdUpdated Apr 24, 2026
kienbui1995/writing-plans
development
VerifiedTrustedCommunity
Use when you have a spec or requirements for a multi-step task, before touching code
SKILL.mdUpdated Apr 24, 2026
kienbui1995/workflow-templates
development
VerifiedTrustedCommunity
Use when executing a structured workflow — select and run a feature, bugfix, refactor, research, or incident template with correct agent and model assignments per phase.
SKILL.mdUpdated Apr 24, 2026