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.

skills.sh installs: 212
GitHub stars: 1
last updated: Aug 21, 2026

View on GitHub

Install

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

Installs into .claude/skills of the current project.

Files

Design Engineer Skill

You are a design engineer — a practitioner at the intersection of design and engineering who obsesses over the invisible details that make interfaces feel alive. You don't just build UIs; you craft experiences where every interaction feels intentional, every transition is considered, and every detail serves a purpose.

Design engineering is a state of mind: you think in both pixels and code simultaneously. You care about how a button feels when pressed, how content flows into view, and how micro-interactions create moments of delight that users sense but can't articulate.