Agent Skills

kylezantos/design-engineer-auditor-package

A Claude Code skill for motion design audits, trained on Emil Kowalski, Jakub Krehel, and Jhey Tompkins. Context-aware, per-designer feedback on your animations.

License:MITLanguage:N/A190
design-engineer-auditor-package - A Claude Code skill for motion design audits, trai preview

Deep Analysis

基于 Emil Kowalski、Jakub Krehel 和 Jhey Tompkins 三位设计大师理念的动效设计审计技能，为 CSS 动画、Framer Motion、GSAP 等提供多视角反馈

Core Features

Technical Implementation

Highlights
  • 融合三位业界顶尖动效设计师的设计哲学
  • 智能侦察机制：先分析项目再给出定制化权重建议
  • 输出格式清晰：分 Critical/Important 两级，包含文件位置和具体修复建议
  • 支持全局和项目级两种安装方式
Use Cases
  • 生产力工具的高频交互动效优化
  • 消费级应用的动效抛光和专业化
  • 儿童应用/作品集/趣味场景的创意动效设计
  • 现有项目动效质量审计和改进
Limitations
  • 仅提供审计和建议，不自动修复代码
  • 依赖对三位设计师风格的理解，可能存在主观性
  • 需要手动确认权重后才进行完整审计
Tech Stack
Claude Code SkillMarkdown 文档CSS AnimationsFramer MotionGSAP
README
View on GitHub

Design Motion Principles

A Claude Code skill for motion and interaction design audits, trained on Emil Kowalski, Jakub Krehel, and Jhey Tompkins. Get context-aware, per-designer feedback on your animations.

What It Does

This skill audits your codebase's motion design (CSS animations, transitions, Framer Motion, GSAP, etc.) through the lens of three distinct design philosophies:

Designer Philosophy Best For
Emil Kowalski Restraint & Speed Productivity tools, high-frequency interactions
Jakub Krehel Production Polish Shipped consumer apps, professional refinement
Jhey Tompkins Creative Experimentation Kids apps, portfolios, playful contexts

Key Feature: Context-Aware Weighting

The skill doesn't blindly apply rules. It first does reconnaissance to understand your project, then proposes a weighting:

## Reconnaissance Complete

**Project type**: Kids educational app, mobile-first PWA
**Existing animation style**: Spring animations (500-600ms), framer-motion
**Likely intent**: Delight and engagement for young children

**Proposed perspective weighting**:
- **Primary**: Jakub Krehel — Production polish for a shipped consumer app
- **Secondary**: Jhey Tompkins — Playful experimentation for kids
- **Selective**: Emil Kowalski — Only for high-frequency game interactions

Does this approach sound right? Should I adjust before proceeding?

You confirm or adjust, then get the full audit with per-designer perspectives.

Example Output

After confirmation, you get detailed feedback from each designer:

### Emil's Perspective (Restraint & Speed)
[Observations specific to high-frequency interactions...]

### Jakub's Perspective (Production Polish)
[Missing exit animations, icon transitions, shadow refinements...]

### Jhey's Perspective (Experimentation & Delight)
[Opportunities for @property, scroll-driven animations, celebrations...]

### Combined Recommendations

**Critical (Must Fix)**:
| Issue | File | Action |
|-------|------|--------|
| No prefers-reduced-motion | Multiple | Add global CSS + hook |

**Important (Should Fix)**:
| Issue | File | Action |
|-------|------|--------|
| Score counter no animation | game-header.tsx | Add scale pop |

Installation

Quick Install

  1. Download design-motion-principles.zip from this repo
  2. Open Claude Code in any project
  3. Paste the prompt from INSTALL.md
  4. Choose global (all projects) or project-level installation

Manual Install

Global (all projects):

unzip design-motion-principles.zip -d /tmp/dmp
cp -r /tmp/dmp/skills/design-motion-principles ~/.claude/skills/
rm -rf /tmp/dmp

Project-level:

unzip design-motion-principles.zip -d /tmp/dmp
mkdir -p .claude/skills
cp -r /tmp/dmp/skills/design-motion-principles .claude/skills/
rm -rf /tmp/dmp

Usage

Once installed, just ask Claude Code:

Audit the motion design in this codebase

Or with specific scope:

Audit animations in src/components/

The skill will automatically:

  1. Do reconnaissance on your project
  2. Propose a weighting based on context
  3. Wait for your confirmation
  4. Provide the full per-designer audit

Requirements

What's Included

skills/
  └── design-motion-principles/
      ├── SKILL.md                  # Main skill with workflow
      ├── emil-kowalski.md          # Emil's philosophy & techniques
      ├── jakub-krehel.md           # Jakub's philosophy & techniques
      ├── jhey-tompkins.md          # Jhey's philosophy & techniques
      ├── philosophy.md             # Synthesized design philosophy
      ├── technical-principles.md   # Implementation patterns
      ├── accessibility.md          # Motion accessibility guidelines
      ├── performance.md            # Performance best practices
      ├── audit-checklist.md        # Structured audit criteria
      └── common-mistakes.md        # Anti-patterns to flag

Credits

This skill synthesizes motion design principles from:

License

MIT