emil-design-eng

Review front-end UI code for animation, interaction, and accessibility compliance.

Updated Dec 4, 2025
One-click install
npx skills add https://github.com/PolliticalSolutions/political-portal --skill emil-design-eng-polliticalsolutions
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: emil-design-eng
Source: https://github.com/PolliticalSolutions/political-portal/tree/main/.agents/skills/emil-design-eng
Command: npx skills add https://github.com/PolliticalSolutions/political-portal --skill emil-design-eng-polliticalsolutions

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps you design and ship UI that feels premium by standardizing taste-driven decisions around motion, components, and the small interaction details users experience as “rightness.”

Core Features & Use Cases

  • UI polish principles: Systematizes invisible correctness such as press feedback, transform origins, and micro-interaction behavior.
  • Animation decision framework: Provides rules for when to animate, how to animate (easing, duration), and how to keep interactions snappy and consistent.
  • Performance and accessibility guardrails: Enforces GPU-friendly properties, interruptible motion patterns, and respects prefers-reduced-motion.
  • Component review format: Requires actionable Before/After tables to quickly spot and correct UI motion and styling issues.

Quick Start

Ask the AI to review a specific component’s UI/animation code and output a Before/After markdown table explaining exactly what to change and why.

Frequently Asked Questions about emil-design-eng

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

FAQPage Schema
How do I review front-end code for UI polish and animation quality?▼

To review front-end UI polish, evaluate interaction feedback, transform origins, and motion timing. Use a component review format to generate Before/After tables that identify styling issues and provide actionable corrections for micro-interactions.

What are the best practices for animation timing and easing curves in component design?▼

Best practices for component design animation dictate using custom easing curves and keeping interaction timing under 300ms. This ensures transitions remain snappy and consistent, standardizing taste-driven decisions for premium interface feel.

How do you handle prefers-reduced-motion behavior in front-end interactions?▼

Handle prefers-reduced-motion behavior by enforcing performance and accessibility guardrails. Ensure motion patterns are interruptible, use GPU-friendly properties, and respect user preferences to maintain accessibility across frequent and occasional interaction patterns.

Why do my UI transitions feel janky during rapid user interactions?▼

UI transitions feel janky during rapid interactions if they are not interruptible. Apply design engineering rules to enable interruptible motion patterns, use GPU-friendly properties, and verify transform correctness to achieve responsive feedback.

Does this design review approach work for origin-aware popovers and interaction feedback?▼

Yes, this design review approach works for origin-aware popovers and interaction feedback. It enforces specific requirements for transform origins and press feedback, standardizing the invisible correctness users experience as interface rightness.