Complete AI TrainingYourJobSkills for your job

Skills / frontend

emil-design-eng

Use when designing or reviewing polished product UI with Emil Kowalski-inspired animation, interaction, and component craft guidance.

IT & Software DevelopmentDesign & UXanimationdesignfrontendmotionui

Design Engineering

Detailed Guide

Read [the detailed guide](references/detailed-guide.md) before executing this skill. It retains the complete procedure and reference material. Treat its safety, prerequisites, and validation requirements as mandatory. For focused work, load the relevant sections; for end-to-end work, read the guide completely.

When to Use

  • Use when the user asks for UI polish, product design critique, animation direction, or high-craft component decisions.
  • Use when reviewing frontend code for motion quality, easing, duration, physicality, interaction feedback, or subtle interface details.
  • Use when building or refining React, Tailwind, CSS, or Framer Motion interfaces where taste and perceived quality matter.

Limitations

  • This skill provides design engineering judgment; it does not replace project-specific product requirements, accessibility testing, or real-device motion review.
  • Verify framework versions, installed dependencies, and rendered behavior before treating animation or UI recommendations as production-ready.
  • Do not apply these rules mechanically when an existing brand system, platform convention, or user requirement calls for a different interaction language.

Details

Sourceemilkowalski/skills
LicenseMIT
Risk labelsafe ("critical" means the skill may run commands or touch files — read before use)
FilesSKILL.md, references/detailed-guide.md
Added2026-06-25

Related skills

anti-ui-slop

Stop coding agents from shipping generic UI. Extend the product's design system, use UIZZE evidence only when useful, cover required states, and inspect the rendered result.

astro

Build content-focused websites with Astro — zero JS by default, islands architecture, multi-framework components, and Markdown/MDX support.

chat-widget

Build a real-time support chat system with a floating widget for users and an admin dashboard for support staff. Use when the user wants live chat, customer support chat, real-time messaging, or in-app support.

chrome-extension-developer

Expert in building Chrome Extensions using Manifest V3. Covers background scripts, service workers, content scripts, and cross-context communication.

design-it

Routes frontend design tasks to 48 specific UI styles. Triggers for websites, app screens, or UI components requesting a specific aesthetic.

design-taste-frontend

Use when building high-agency frontend interfaces with strict design taste, calibrated color, responsive layout, and motion rules.