Agent skill
design-handoff
Prepare designs for development handoff. Document specifications, interactions, and assets to enable efficient development and maintain design quality.
Install this agent skill to your Project
npx add-skill https://github.com/aj-geddes/useful-ai-prompts/tree/main/skills/design-handoff
SKILL.md
Design Handoff
Table of Contents
- Overview
- When to Use
- Quick Start
- Reference Guides
- Best Practices
Overview
Design handoff bridges design and development, ensuring developers have all information needed to implement designs accurately and efficiently.
When to Use
- Before development starts
- Feature completion in design
- Component library updates
- Design system changes
- Iterative refinement handoff
Quick Start
Minimal working example:
Design Handoff Package:
Overview:
- Feature description
- User flows
- Key interactions
- Platform (web, iOS, Android)
Screens & Components:
- All screen designs
- Responsive variants (mobile, tablet, desktop)
- All component states (default, hover, focus, disabled, error)
- Dark mode variants (if applicable)
Specifications:
- Typography (font, size, weight, line-height)
- Spacing & layout (padding, margin, gaps)
- Colors (hex values, opacity)
- Shadows & elevations
- Border radius
- Animations & transitions
Interactions:
- Click/tap behaviors
- Hover states
// ... (see reference guides for full implementation)
Reference Guides
Detailed implementations in the references/ directory:
| Guide | Contents |
|---|---|
| Developer-Friendly Documentation | Developer-Friendly Documentation |
| Handoff Checklist | Handoff Checklist |
| Design-Dev Collaboration | Design-Dev Collaboration |
Best Practices
✅ DO
- Create comprehensive documentation
- Export all assets and specifications
- Document every component state
- Include responsive variants
- Explain design decisions
- Provide developer-friendly specs
- Use shared design tools
- Schedule kickoff meeting
- Make yourself available for questions
- Review implementations and iterate
❌ DON'T
- Expect developers to guess
- Leave responsive design to chance
- Skip edge case documentation
- Use unclear specifications
- Disappear after handoff
- Change designs mid-development without notification
- Provide images instead of vector files
- Ignore technical constraints
- Miss performance considerations
- Skip accessibility in handoff
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
aj-geddes/useful-ai-prompts
websocket-implementation
Implement real-time bidirectional communication with WebSockets including connection management, message routing, and scaling. Use when building real-time features, chat systems, live notifications, or collaborative applications.
aj-geddes/useful-ai-prompts
refactor-legacy-code
Modernize and improve legacy codebases while maintaining functionality. Use when you need to refactor old code, reduce technical debt, modernize deprecated patterns, or improve code maintainability without breaking existing behavior.
aj-geddes/useful-ai-prompts
Sentiment Analysis
Classify text sentiment using NLP techniques, lexicon-based analysis, and machine learning for opinion mining, brand monitoring, and customer feedback analysis
aj-geddes/useful-ai-prompts
flask-api-development
Develop lightweight Flask APIs with routing, blueprints, database integration, authentication, and request/response handling. Use when building RESTful APIs, microservices, or lightweight web services with Flask.
aj-geddes/useful-ai-prompts
ML Model Explanation
Interpret machine learning models using SHAP, LIME, feature importance, partial dependence, and attention visualization for explainability
aj-geddes/useful-ai-prompts
Statistical Hypothesis Testing
Conduct statistical tests including t-tests, chi-square, ANOVA, and p-value analysis for statistical significance, hypothesis validation, and A/B testing
Didn't find tool you were looking for?