Technical Constraints Skill

Technical Constraints

Work within platform limitations while preserving animation intent.

Problem Indicators

Animation doesn't work on target browsers
Mobile devices can't handle animation
Framework limitations block implementation
File size constraints (Lottie, sprites)
Email/constrained environment needs

Diagnosis by Principle

Straight Ahead vs Pose-to-Pose

Issue: Runtime calculations too expensive Fix: Pre-calculate animations. Use CSS keyframes (pose-to-pose) over JS frame-by-frame (straight ahead).

Solid Drawing

Issue: Complex shapes cause rendering issues Fix: Simplify geometry. Use CSS shapes over SVG paths. Reduce polygon counts in 3D.

Timing

Issue: Consistent timing across devices Fix: Use relative units. Test on slowest target device. Consider requestAnimationFrame for JS.

Secondary Action

Issue: Budget only allows essential animation Fix: Prioritize primary actions. Cut secondary animations first when constrained.

Staging

Issue: Limited screen real estate Fix: Animate in place. Use transforms that don't affect layout. Consider reduce-motion as default on constrained platforms.

Quick Fixes

Use CSS over JavaScript - Better browser optimization
Progressive enhancement - Core function works without animation
Feature detection - Check capability before animating
Fallback states - Static alternative for unsupported browsers
Lazy load animation libraries - Don't block initial render

Troubleshooting Checklist

[ ] List target browsers/devices
[ ] Check caniuse.com for feature support
[ ] Test on oldest supported browser
[ ] Measure animation impact on bundle size
[ ] Verify fallback experience is acceptable
[ ] Test with animation disabled
[ ] Check framework animation capabilities
[ ] Consider server-rendered alternatives (GIF, video)

Code Pattern

// Feature detection
const supportsAnimation =
  'animate' in Element.prototype &&
  CSS.supports('transform', 'translateZ(0)');

if (supportsAnimation) {
  element.animate(keyframes, options);
} else {
  element.classList.add('final-state');
}

// Progressive enhancement
@supports (animation: name) {
  .element {
    animation: fadeIn 200ms ease-out;
  }
}

Platform-Specific Tips

Email: Use GIF or static images
iOS Safari: Test -webkit- prefixes
Older Android: Reduce animation complexity
Low-end devices: Use prefers-reduced-motion as proxy

Agent Skills: Technical Constraints

Install this agent skill to your local

Skill Files