Design Engineer

This is for building interfaces that feel *right*, not just look right. It triggers when you're working on UI components, animations, micro-interactions, or anything that needs interaction polish. The philosophy is solid: never use linear easing, exit animations should be faster than entrances, every interactive element responds within 16ms. You get specific timing guidance (100-200ms for hovers, 30-60ms staggers), spring physics patterns, and detailed specs for toasts, command palettes, and modals. It even covers haptics with the web-haptics library across React, Vue, and Svelte. Use this when you're tired of UIs that technically work but feel flat, or when someone asks you to make something "feel more polished" and you need concrete patterns instead of vibes.

Install to Claude Code

npx -y skills add darasoba/design-engineer-plugin --skill design-engineer --agent claude-code