Core Skill Categories in emil-design-eng: The Complete Design Engineering Framework

The emil-design-eng skill organizes Emil Kowalski's design engineering philosophy into 13 core categories spanning foundational principles, animation frameworks, component architecture, and performance optimization.

The emil-design-eng skill in the emilkowalski/skills repository provides a structured knowledge base for building polished user interfaces. Located at skills/emil-design-eng/SKILL.md, these core skill categories combine high-level product thinking with concrete implementation patterns, offering design engineers a systematic approach to creating fluid, accessible, and performant web applications.

Foundations: Philosophy and Decision Making

Core Philosophy

The Core Philosophy category establishes the mental models underpinning great design engineering. According to the source code in skills/emil-design-eng/SKILL.md, key tenets include "Taste is trained, not innate," "Unseen details compound," and "Beauty is leverage." These principles emphasize that design quality emerges from accumulated micro-decisions rather than singular creative acts.

Animation Decision Framework

The Animation Decision Framework provides a four-step checklist to determine whether and how to animate UI elements. As documented in SKILL.md § Animation Decision Framework, this category evaluates:

• Whether an element should animate at all
• The specific purpose of the motion
• Appropriate easing curves
• Animation speed based on interaction frequency

function shouldAnimate(frequency) {
  // frequency = number of times the action occurs per day
  if (frequency > 100) return false;            // Keyboard shortcuts: never animate
  if (frequency > 10)  return 'reduce';         // Hover effects: reduce
  return true;                                  // Modals, toasts: standard animation
}

// Example usage:
const animate = shouldAnimate(150); // → false (no animation)

The Sonner Principles

The Sonner Principles category addresses high-level product thinking for component design. This section covers developer experience, establishing good defaults, strategic naming conventions, and handling invisible edge cases—principles derived from building the Sonner toast library.

Animation Implementation Techniques

Spring Animations

Spring Animations distinguish between spring-based motion and fixed-duration tweens. This category explains when to implement physics-based springs for natural-feeling motion, how to configure stiffness and damping parameters, and why springs outperform linear timing functions for interactive elements.

import { motion, useSpring } from "framer-motion";

function Draggable({ mouseX }) {
  const springX = useSpring(mouseX, { stiffness: 100, damping: 10 });
  return <motion.div style={{ x: springX }} />;
}

CSS Transform Mastery

The CSS Transform Mastery category provides detailed guidance on hardware-accelerated properties. According to SKILL.md § CSS Transform Mastery, this covers strategic use of translateY, scale(), 3-D transforms, and precise transform-origin configuration to ensure GPU-composited animations that avoid layout thrashing.

Clip-Path for Animation

Clip-Path for Animation leverages the clip-path property to reveal, hide, or morph elements without triggering expensive repaints. Common patterns include inset shapes for panel reveals, tab transitions, and hold-to-delete interactions.

.panel {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 200ms ease-out;
}
.panel.open {
  clip-path: inset(0 0 0 0);
}

Stagger Animations

The Stagger Animations category details techniques for cascading entry and exit animations across multiple elements. This approach uses minimal delay increments between items to create hierarchical visual flow without overwhelming the user's attention.

Component Architecture and Interaction Design

Component Building Principles

Component Building Principles offer concrete UI implementation rules. As specified in SKILL.md § Component Building Principles, guidelines include:

• Responsive button states with tactile feedback
• Managing popover origin points
• Configuring tooltip delay timings
• Maintaining spatial consistency across breakpoints

.button {
  transition: transform 160ms ease-out;
}
.button:active {
  transform: scale(0.97); /* subtle press feedback */
}

Gesture and Drag Interactions

The Gesture and Drag Interactions category covers momentum-based dismissal patterns, including damping calculations, pointer capture management, multi-touch protection, and friction-based dragging physics. These patterns ensure touch interactions feel physically grounded and responsive across device types.

Performance Optimization and Quality Assurance

Performance Rules

Performance Rules focus on GPU-friendly implementation strategies. This category mandates using transform and opacity for animations while avoiding costly CSS variable updates during motion. The guidelines recommend defining reusable easing curves as CSS custom properties to ensure consistency.

:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}
.drawer {
  transition: transform var(--ease-out) 250ms;
}

Accessibility

The Accessibility category enforces inclusive design patterns. Key requirements include respecting prefers-reduced-motion media queries, implementing conditional hover states for touch devices, and ensuring animations don't compromise cognitive accessibility.

Debugging Animations

Debugging Animations provides systematic testing methodologies. Techniques include slow-motion inspection, frame-by-frame analysis, and real-device validation to identify timing inconsistencies or performance bottlenecks before production deployment.

Review Checklist

The Review Checklist category consolidates common UI animation pitfalls into a corrective reference table. This systematic review process ensures implementations meet the standards defined across all other categories before shipping.

Key Files in the Repository

The core skill categories are distributed across several interconnected files:

• skills/emil-design-eng/SKILL.md — Primary source containing all 13 core categories, guidelines, and implementation examples
• README.md — Repository overview explaining how skills integrate into the design engineering workflow
• skills/review-animations/SKILL.md — Companion skill defining the review table format required by the emil-design-eng audit process
• skills/improve-animations/SKILL.md — Additional animation patterns that complement the core categories with advanced techniques

Summary

The core skill categories in emil-design-eng provide a comprehensive design engineering curriculum:

• Philosophical foundations establish that taste develops through training and attention to unseen details
• Decision frameworks provide systematic criteria for determining when and how to implement motion
• Technical implementation covers springs, transforms, clip-paths, and gesture physics with concrete code patterns
• Quality assurance includes performance optimization, accessibility compliance, and systematic review checklists

These categories collectively form an authoritative reference for building interfaces that balance aesthetic polish with technical robustness.

Frequently Asked Questions

What is the primary file path for the emil-design-eng skill categories?

The primary documentation resides at skills/emil-design-eng/SKILL.md in the emilkowalski/skills repository. This file contains the complete specification for all 13 core categories, including philosophy, animation frameworks, component principles, and review checklists.

How does the Animation Decision Framework determine when to disable animations?

The framework uses interaction frequency as the primary metric. According to the implementation in SKILL.md, actions occurring more than 100 times daily (like keyboard shortcuts) should never animate, while high-frequency interactions (10+ times daily) should use reduced motion. Standard animations are reserved for infrequent modal dialogs and toast notifications.

Why does the CSS Transform Mastery category emphasize GPU-friendly properties?

GPU-accelerated properties like transform and opacity avoid triggering browser layout and paint phases, ensuring smooth 60fps animations. The category specifically warns against animating properties that cause layout recalculation or update CSS variables during motion, as these operations force main-thread work that degrades performance on lower-end devices.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}