Design Engineering Skills Audit UI Motion Choices

Design engineering skills give frontend teams six focused ways to review animation, plan motion changes, name interaction qualities, and decide when an interface should stay still. This guide separates review-only outputs from implementation so teams can choose the right skill before editing code.

The collection documents six named skills for UI craft, animation review, motion planning, animation discovery, vocabulary, and Apple-style interface principles. Treat it as a menu of review tools, not one broad instruction to make a product look better.

Skills Overview

This collection is useful when the code agent is fast but the motion taste is uncertain. The README frames the project as help for designers and engineers who build user interfaces, especially where small animation decisions can make software feel polished or sloppy.

Skills Included

Design Foundations

• emil-design-eng: UI polish, component design, animation decisions, and design-engineering philosophy.
• apple-design: Apple interface and fluid-motion principles translated for web work.

Motion Review And Planning

• review-animations: strict motion-code review. It does not write features or review unrelated code.
• improve-animations: codebase-level animation audit that produces prioritized findings and self-contained plans without changing source code itself.

Discovery And Vocabulary

• find-animation-opportunities: search for places where motion is genuinely useful, and reject places where it should stay still.
• animation-vocabulary: language for describing motion precisely when prompting an AI or discussing UI behavior.

Where This Skill Collection Fits

The best fit is a product surface that already exists: a dropdown, toast, modal, sheet, hover state, command palette, carousel, or onboarding interaction that needs a craft pass before a code agent edits it. The skills push the agent to ask whether motion is justified, how often users will see it, what easing and duration should be used, and what output should be reviewed by a person.

Who It Helps

• Frontend engineers who need a second pass on interaction details before merge.
• Design engineers who want shared language for easing, timing, origin, interruptibility, and reduced motion.
• Product teams that want animation to clarify feedback or spatial state instead of adding decoration.
• AI-assisted builders who can generate code quickly but need a stricter review gate.

Access / Install Links

The repository README documents this install command:

npx skills@latest add emilkowalski/skills

Use the repository-level command when you want the full six-skill collection. The project page also offers a shorter installation command for the broader design-engineering skill identity.

Setup Steps

1. Install the collection with the README command.
2. Choose the narrow skill that matches the task: review, audit, opportunity search, vocabulary, or design principles.
3. Give the agent the relevant UI code, diff, product surface, or motion question.
4. Review the output before assigning implementation or shipping a change.

Selection Logic

• Start with review-animations when there is an existing animation diff or motion implementation.
• Use improve-animations when the question is broader than one diff and the team needs prioritized plans.
• Use find-animation-opportunities before adding new motion to a quiet interface.
• Use animation-vocabulary when the team cannot describe the desired motion precisely.
• Use emil-design-eng or apple-design for broader design-engineering judgment.

Example Inputs

improve the animations in this codebase

improve-animations quick

improve-animations performance

Expected Outputs

Expect review and planning outputs, not automatic code edits. review-animations requires a findings table with Before, After, and Why columns, followed by a verdict. improve-animations produces prioritized findings and implementation plans that another agent can execute with less context.

Use Cases

• Review a dropdown, drawer, popover, toast, or button animation before merge.
• Audit a frontend codebase for motion issues and generate implementation plans.
• Decide whether a quiet interface needs motion at all.
• Translate vague requests like “make it smoother” into specific motion vocabulary.

Common Mistakes & Fixes

• Mistake: asking the collection to make a whole product beautiful. Fix: provide a concrete surface, diff, or motion question.
• Mistake: treating review output as an automatic patch. Fix: review the findings, then hand selected plans to an executor.
• Mistake: adding motion everywhere. Fix: use the opportunity and review skills to reject high-frequency or decorative animation.

Limitations

• The collection is opinionated and reflects Emil Kowalski’s design-engineering philosophy.
• The documentation does not prove measured performance, conversion, or accessibility gains.
• review-animations is not a general code-review skill.
• improve-animations plans work but does not modify source code itself.

Related Tools / Prompts

This collection pairs best with code agents that can execute a reviewed plan, design-system QA, frontend implementation workflows, and human review loops. Its value is upstream judgment: deciding whether a motion change earns its place before more code is generated.

FAQ

• Q: What are design engineering skills?
  A: They are installable AI skills for UI craft, animation review, motion planning, vocabulary, and interface principles.
• Q: Do they automatically fix animations?
  A: No. The source separates review and planning from direct source-code changes.
• Q: Which skill should I try first?
  A: Use review-animations for an existing diff and improve-animations for a broader codebase audit.

Use this skill collection when your team wants practical AI skills for frontend craft, review, and planning.

Explore more in AI Skills and Coding & Development.

Follow @bigprompt for more practical AI skills and workflows.

Related Guides for Safer Agent Work

Social media approval workflow for pairing generated drafts with human review

Unused agent skills cleanup guide for deciding which local skills still deserve space

Product photo workflow showing how source assets become reviewed campaign creative

ChatGPT local folder guide for keeping project files available to a desktop agent

Restaurant flyer prompt for comparing visual prompt quality against a concrete deliverable

Big Prompt Hub Review

This collection adds a review layer to AI-assisted frontend work: restraint, motion vocabulary, and skill-specific boundaries. It is not a substitute for product judgment or implementation review. Its clearest use is a narrow motion decision where the team needs findings or a plan before any code change is approved.