skills.rest
Cobalt-Money
Cobalt-MoneyOFFICIAL
Explore all skills by this author →
Website𝕏@sriketkGitHub

emil-design-eng

Encode design engineering principles for UI polish and animation.

7|Updated Mar 15, 2026
Search Tags:#design#ui#frontend#css#animation#polish
One-click install
npx skills add https://github.com/Cobalt-Money/Cobalt --skill emil-design-eng-cobalt-money
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: emil-design-eng
Source: https://github.com/Cobalt-Money/Cobalt/tree/main/.agents/skills/emil-design-eng
Command: npx skills add https://github.com/Cobalt-Money/Cobalt --skill emil-design-eng-cobalt-money

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill addresses the gap between functional code and high-quality, polished user interfaces by providing a rigorous framework for animation, interaction design, and component behavior.

Core Features & Use Cases

  • Animation Decision Framework: Provides clear rules on when to animate, what easing to use, and how to maintain perceived performance.
  • UI Polish Guidelines: Offers specific techniques for button feedback, popover origins, and interruptible transitions to ensure software feels responsive and intentional.
  • Use Case: When building a new dashboard, use this skill to review your CSS transitions and animation curves to ensure they meet the high standards of design engineering, such as replacing sluggish ease-in curves with responsive ease-out alternatives.

Quick Start

Use the emil-design-eng skill to review my current button component code and suggest improvements for its active state and transition properties.

Frequently Asked Questions about emil-design-eng

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I improve CSS transition and animation curves for better UI polish?▼

To improve UI polish, replace sluggish ease-in curves with responsive ease-out alternatives and apply specific animation duration standards. This ensures high-performance interface feel and perceived responsiveness in frontend components.

What easing should I use for gesture-based UI components?▼

For gesture-based UI components, use spring physics and specific easing standards to maintain interruptible transitions. This ensures software feels responsive and intentional during component interaction rather than rigidly scripted.

When do I need hardware acceleration for frontend animations?▼

You need hardware acceleration for frontend animations when adhering to performance standards for UI polish. It ensures high-performance interface feel during CSS transitions and component interactions without dropping frames.

What is the best way to handle button feedback and popover origins in CSS?▼

The best way to handle button feedback and popover origins is applying specific UI polish guidelines for active states and transition properties. This ensures component behavior feels intentional and responsive to user interaction.

Why does my dashboard interface feel sluggish during transitions?▼

Your dashboard interface feels sluggish during transitions if it uses poor easing curves like ease-in instead of ease-out, or lacks hardware acceleration. Reviewing CSS transitions against animation standards fixes perceived performance issues.

Related Skills

Explore More Design & Creative Skills→
mohamedgshoaibmohamedgshoaib
5

emil-design-eng

Encode design engineering principles for CSS transitions and spring animations.

Community
Advanced
k97k97
4

emil-design-eng

Encode design engineering principles for CSS transitions and spring physics.

Community
Advanced
phintruongphintruong

emil-design-eng

Review frontend UI component code for animation and interaction polish.

Community
Advanced
devstefanchodevstefancho
2

component-design-reviewer

Review React component design against five core principles.

Community
Intermediate