菜单
Emil Kowalski's entire design engineering philosophy as a skill. Creator of Sonner (13M+ weekly npm downloads), Vaul, and animations.dev. Covers animation decision framework, custom easing curves, component interaction principles, and typography rules.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Catalogue navigator for design-agent-skills. Lists available design skill stubs, matches user intent to the right stub, and routes to install and invoke. Use when the user wants to browse or find the right design skill.
Domain navigator for UI craft, visual design, brand, color, typography, mobile design, and interactive design engineering skills. Routes to skills for taste-driven UI, platform design (iOS/Android), components, color science, and the full visual design stack.
Create programmatic videos with React. Official Remotion skill package — compose video sequences using React components, animate with spring physics, and render to MP4/GIF. Ideal for product demos, explainers, and data-driven videos.
SwiftUI visual design skill for distinctive iOS/macOS interfaces that avoid generic AI-slop patterns. Covers design direction, layout systems, typography, color, spacing, brand integration, and design review.
6 web quality skills from Google Chrome's Addy Osmani: accessibility (WCAG), web quality audit (Lighthouse-style), Core Web Vitals (LCP/INP/CLS), performance, SEO, and security best practices.
Validates animation durations, enforces typography scale, checks component accessibility, and prevents layout anti-patterns in Tailwind CSS. Ensures UI work meets baseline quality standards before shipping.
| name | emilkowalski-skill |
| description | Emil Kowalski's entire design engineering philosophy as a skill. Creator of Sonner (13M+ weekly npm downloads), Vaul, and animations.dev. Covers animation decision framework, custom easing curves, component interaction principles, and typography rules. |
| triggers | ["Emil Kowalski","design engineering","animation decision","easing curves","emil-design-eng"] |
| das | {"category":"design-engineering","upstream":"https://github.com/emilkowalski/skill","version":"latest","install":false} |
Catalogue stub — full package: emilkowalski/skill
Run this before any animation or design engineering work:
Is the skill already installed?
Check: ~/.design-agent-skills/skills/emil-design-eng/SKILL.md exists.
emil-design-eng and proceedDo you have shell access?
! — add -g for global install or omit for project-onlynpx skills add emilkowalski/skill --skill emil-design-eng
Or for all skills in the package:
npx skills add emilkowalski/skill
emil-design-engEmil Kowalski's complete design engineering methodology — animation decision framework (4 steps: should it animate? purpose? easing? duration?), required custom CSS easing curves, component interaction principles (button scale on :active, scale(0.95) entry animations, origin-aware transforms), CSS transitions over keyframes for interruptibility, and strict typography rules (65ch cap, tabular-nums, … not ...). Used by the creator of Sonner, Vaul, and animations.dev.