ToolsPromptsSkillsWorkflowsBlogAbout

Emil Design Engineering Skills — 13 skills for designers and engineers (Vercel/Linear)

A collection of 13 skills for designers and engineers to help them build better user interfaces. Created by Emil Kowalski, former Vercel and Linear designer/engineer. Covers animation (building, reviewing, improving, finding opportunities, vocabulary), design guidelines (Apple design, UI library selection, prototyping), Swift development, and Sonner toast library guide. Based on years of experience building interfaces at Vercel and Linear. Install via `npx skills@latest add emilkowalski/skills`.

Emil Design Engineering Skills — 13 skills for designers and engineers (Vercel/Linear) preview

Prompt template

You are a design engineering-focused AI assistant with access to Emil's Design Engineering Skills — 13 skills for building better user interfaces. Use the relevant skill based on the user's request.

## Available Skills

### Animation (7 skills)
- emil-design-eng: The main skill — mostly animation, but also some design advice
- animate: Builds an animation from scratch while choosing the correct curve, duration, properties
- animate-expo: Same bar for React Native and Expo: gestures, sheets, haptics, screen transitions, keeping motion off JS thread
- review-animations: Review your animations in a strict way, based on Emil's rules
- improve-animations: Audit all animations in your codebase and get prioritized, self-contained plans
- find-animation-opportunities: Search your UI for places that would genuinely benefit from motion, while telling you what not to animate
- animation-vocabulary: Get better animations from an AI by telling it exactly what you want using the right words

### Design (3 skills)
- apple-design: Apple's principles for interface design and fluid motion, distilled from WWDC design talks and translated for the web
- pick-ui-library: Have your agent pick the right library for the task based on libraries Emil uses and trusts
- prototype: Build multiple different versions of a UI piece you describe and go through them using a switcher

### Development (2 skills)
- write-swift: Write modern Swift. Includes: value types, Swift 6 concurrency, generics, performance, Swift Testing
- ask-sonner: Guide to working with Sonner (Emil's toast library). Setup, styling, recipes, fixes for common issues

## Core Animation Principles
- Enter animations use ease-out (not ease-in) — objects entering should decelerate
- Use semi-transparent shadows instead of solid borders for UI depth
- Agents don't have great taste — these skills list all the little mistakes agents make and how to fix them
- Small things compound: correct easing, duration, properties make interfaces amazing or just "not that great"

## Task
[Your design/animation task here]

How to use

  1. 1Install: `npx skills@latest add emilkowalski/skills`
  2. 2For building animations: use animate skill — chooses correct curve, duration, properties
  3. 3For React Native/Expo: use animate-expo — gestures, sheets, haptics, screen transitions, JS thread optimization
  4. 4For reviewing existing animations: use review-animations — strict review based on Emil's rules
  5. 5For improving codebase animations: use improve-animations — audit all animations, get prioritized plans
  6. 6For finding where to add motion: use find-animation-opportunities — genuine benefits + what NOT to animate
  7. 7For better AI animation prompts: use animation-vocabulary — tell AI exactly what you want with right words
  8. 8For Apple-style design: use apple-design — WWDC design talks distilled for web
  9. 9For UI library selection: use pick-ui-library — trusted libraries, no abandoned packages
  10. 10For prototyping: use prototype — multiple versions with switcher
  11. 11For Swift: use write-swift — value types, Swift 6 concurrency, generics, performance, testing
  12. 12For Sonner toasts: use ask-sonner — setup, styling, recipes, common fixes

Pro tips

  • Emil Kowalski is a former Vercel and Linear designer/engineer — these skills come from production experience
  • Critical gotcha: enter animations use ease-out, not ease-in — agents frequently get this wrong
  • Use semi-transparent shadows instead of solid borders for UI depth — agents often choose borders
  • The main skill (emil-design-eng) covers mostly animation but also general design advice
  • animate-expo is specifically for React Native — keeping motion off the JS thread is critical for performance
  • find-animation-opportunities tells you both what TO animate and what NOT to animate — restraint is key
  • animation-vocabulary helps you communicate better with AI — using the right words gets better results
  • pick-ui-library prevents AI from hand-rolling components or installing abandoned packages
  • Sonner is Emil's own toast library — ask-sonner has first-party knowledge of common issues

Use cases

Building smooth UI animations with correct easing, duration, and propertiesReviewing existing animations for quality and correctnessAuditing an entire codebase's animations and getting prioritized improvement plansFinding places in UI that would benefit from motion (and what not to animate)Building React Native/Expo animations (gestures, sheets, haptics, transitions)Learning Apple's interface design principles for webSelecting the right UI library for a task (trusted, not abandoned)Prototyping multiple UI variations with a switcherWriting modern Swift (value types, concurrency, generics, testing)Working with Sonner toast library (setup, styling, recipes, fixes)Improving AI animation prompts with proper vocabulary

Examples

Build a modal enter animation

Input: Animate this modal when it enters

Output: Invokes animate skill. Chooses ease-out curve (correct for enter animations), appropriate duration (200-300ms), and properties (opacity + scale/translate). Avoids common agent mistakes like using ease-in for enter animations. Produces clean, production-ready animation code.

Review animations in codebase

Input: Review all animations in this component

Output: Invokes review-animations skill. Strict review based on Emil's rules. Checks easing correctness (enter=ease-out, exit=ease-in), duration appropriateness, property selection, performance (avoiding layout thrashing), and taste. Produces a prioritized list of issues with fixes.

Find animation opportunities

Input: Where should we add animations in this UI?

Output: Invokes find-animation-opportunities skill. Searches UI for places that genuinely benefit from motion (page transitions, micro-interactions, feedback, loading states). Also tells you what NOT to animate (static content, decorative elements, things that cause motion sickness). Produces a prioritized opportunity list.

React Native gesture animation

Input: Build a swipe-to-delete gesture in React Native

Output: Invokes animate-expo skill. Uses Reanimated for JS-thread-offloaded animation, gesture handler for swipe detection, haptics for feedback. Ensures motion stays off the JS thread for 60fps performance. Produces production-ready React Native animation code.

Key parameters

Installation: `npx skills@latest add emilkowalski/skills`13 skills across 3 categories: Animation (7), Design (3), Development (2)Supported agents: Claude Code, Cursor, Codex, any skills-compatible agentAuthor: Emil Kowalski (former Vercel and Linear designer/engineer)License: MITCompanion: Sonner toast library (Emil's own open source project)Focus: animation correctness, design taste, UI engineering best practices

Not this

  • Not a design system or component library — skills for building better interfaces, not pre-built components
  • Not a replacement for design tools (Figma, etc.) — code-focused animation and UI engineering
  • Not for 3D or game animations — focused on UI/UX motion for web and mobile
  • Not automatically installed — requires npx skills CLI
  • Not all skills are animation — covers design guidelines, Swift, UI library selection, prototyping

Works best with

Ratings & Reviews

Loading reviews…

Share your experience

Select a rating

Related Skills

Emil Kowalski Skills — AI Skills for Designers & Engineers
Design

Emil Kowalski Skills — AI Skills for Designers & Engineers

A curated collection of 12 AI skills for designers and engineers, built by Emil Kowalski (ex-Vercel, ex-Linear). Helps agents make great animation and design decisions — from building animations from scratch to auditing your codebase, picking the right UI library, and writing modern Swift. 45.1k GitHub stars.

AnimationUI DesignMotion Design
4.9
Remotion Agent Skills — 12 skills for programmatic video creation with React
Design

Remotion Agent Skills — 12 skills for programmatic video creation with React

Remotion maintains a list of 12 Agent Skills that define best practices for working in Remotion projects. Useful for AI agents like Claude Code, Codex, Kimi Code or Cursor. Covers best practices, project creation, React markup, Studio preview, rendering, map animations, captions/subtitles, SaaS architecture, interactivity, documentation search, upgrades, and multimedia handling with Mediabunny. Install via `npx skills add remotion-dev/skills`. Also offered when creating a new Remotion project via `bun create video`.

RemotionVideo CreationReact
4.8
Baoyu Design — Claude Design as a portable local Agent Skill
Design

Baoyu Design — Claude Design as a portable local Agent Skill

Packages Claude Design — the design engine behind claude.ai/design — as a portable Agent Skill. Drop it into a local agent (Cursor, Claude Code, Claude Desktop, or any file-capable coding agent) and you get most of what the website does, right inside your editor: polished UI mockups, interactive prototypes, wireframes, landing pages, dashboards, mobile apps, and slide decks — all produced as self-contained HTML. No website, no separate subscription, no upload step. The agent already on your machine does the work, and every artifact stays in your repo.

Claude DesignUI DesignPrototyping
4.9