# Core Skill Categories in emil-design-eng: The Complete Design Engineering Framework > Discover the 13 core skill categories in emil-design-eng, covering design engineering philosophy from foundational principles to performance optimization. - Repository: [Emil Kowalski/skills](https://github.com/emilkowalski/skills) - Tags: deep-dive - Published: 2026-07-28 --- **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`](https://github.com/emilkowalski/skills/blob/main/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`](https://github.com/emilkowalski/skills/blob/main/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`](https://github.com/emilkowalski/skills/blob/main/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 ```javascript 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. ```jsx import { motion, useSpring } from "framer-motion"; function Draggable({ mouseX }) { const springX = useSpring(mouseX, { stiffness: 100, damping: 10 }); return ; } ``` ### CSS Transform Mastery The **CSS Transform Mastery** category provides detailed guidance on hardware-accelerated properties. According to [`SKILL.md`](https://github.com/emilkowalski/skills/blob/main/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. ```css .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`](https://github.com/emilkowalski/skills/blob/main/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 ```css .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. ```css :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`](https://github.com/emilkowalski/skills/blob/main/skills/emil-design-eng/SKILL.md)** — Primary source containing all 13 core categories, guidelines, and implementation examples - **[`README.md`](https://github.com/emilkowalski/skills/blob/main/README.md)** — Repository overview explaining how skills integrate into the design engineering workflow - **[`skills/review-animations/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/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`](https://github.com/emilkowalski/skills/blob/main/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`](https://github.com/emilkowalski/skills/blob/main/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`](https://github.com/emilkowalski/skills/blob/main/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.