emil-design-eng
전문적인 디자인 가이드로 세련된 UI 구축
대부분의 인터페이스는 소프트웨어를 올바르게 느끼게 만드는 보이지 않는 디테일이 부족합니다. 이 스킬은 애니메이션, 전환 및 컴포넌트 다듬기에 입증된 디자인 엔지니어링 원칙을 적용하여 사용자가 사랑하는 인터페이스를 구축하도록 도와줍니다.
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「emil-design-eng」を使用しています。 Review this modal transition code: .modal { transition: all 300ms ease-in; transform: scale(0); transform-origin: center; }
期待される結果:
- GPU 가속을 위해 transition: all을 transition: transform 200ms ease-out으로 변경하세요
- 보다 자연스러운 진입을 위해 scale(0)을 scale(0.95) 및 opacity: 0으로 교체하세요
- ease-in을 ease-out 또는 cubic-bezier(0.23, 1, 0.32, 1)과 같은 사용자 정의 곡선으로 전환하세요
「emil-design-eng」を使用しています。 Should my sidebar navigation animate when expanding and collapsing?
期待される結果:
- 애니메이션 결정 프레임워크를 적용하세요: 사용자는 사이드바 탐색과 하루에 수십 번 상호작용합니다. 미묘한 높이 전환을 고려하거나 키보드 시작 토글에 대해서는 애니메이션을 완전히 건너뛰세요
- 애니메이션 적용 시: 최대 200ms의 ease-out, transform과 opacity만 애니메이션 적용, CSS 전환으로 애니메이션이 중단 가능하도록 하세요
セキュリティ監査
安全All 153 static analyzer findings are false positives. The skill is a single markdown file (SKILL.md) containing design engineering documentation with CSS and JavaScript code examples. The backtick characters flagged as 'external_commands' are markdown code fence delimiters, not shell execution. URLs flagged as 'network' are documentation hyperlinks (animations.dev, easing.dev, easings.co), not runtime network requests. Blocker findings for 'weak cryptographic algorithm' and 'system reconnaissance' have no basis in this file which contains only UI design guidelines. No prompt injection or malicious content detected.
品質スコア
作れるもの
프로덕션 UI 컴포넌트 다듬기
프론트엔드 개발자가 모달, 드로어 및 툴팁 컴포넌트를 애니메이션 결정 프레임워크에 따라 검토하여 적절한 이징, 타이밍 및 중단 가능성을 보장합니다.
디자인 시스템 애니메이션 표준 수립
디자인 엔지니어가 핵심 철학 및 CSS 변환 마스터리 섹션을 사용하여 컴포넌트 라이브러리의 일관된 애니메이션 토큰을 정의합니다.
애니메이션 성능 문제 해결
페이지 로드 중 프레임 드롭을 겪는 개발자가 하드웨어 가속 및 CSS 대 JavaScript 애니메이션 가이드를 적용하여 병목 현상을 해결합니다.
これらのプロンプトを試す
이 버튼 컴포넌트를 검토하고 더 세련되게 느끼게 하는 애니메이션 및 전환 개선 사항을 알려주세요.
사용자가 하루에 100회 이상 여는 명령 팔레트를 구축 중입니다. 열기 및 닫기 애니메이션을 추가해야 할까요? 결정하려면 애니메이션 결정 프레임워크를 적용하세요.
대시보드 애니메이션이 페이지 로드 중 프레임을 드롭합니다. x 및 y 단축 속성으로 Framer Motion을 사용하고 있습니다. 하드웨어 가속을 위해 이를 수정하는 방법을 보여주세요.
Sonner와 같은 토스트 컴포넌트를 구축하고 싶습니다. 전환 전략, translateY를 사용한 토스트 위치 지정, 모멘텀 기반 해제, 탭 가시성 및 스택 호버 상태의 엣지 케이스 처리를 안내해 주세요.
ベストプラクティス
- 항상 transition: all 대신 전환에서 정확한 CSS 속성을 지정하세요
- 신속하게 트리거될 수 있는 UI 요소에는 키프레임보다 CSS 전환을 사용하세요
- 출시 전에 실제 기기에서 최대 속도, 슬로 모션 및 프레임 단위로 애니메이션을 테스트하세요
回避
- 모든 속성 변경에 대해 비용이 많이 드는 레이아웃 및 페인트 계산을 트리거하는 transition: all 사용
- 현실 세계의 아무것도 완전히 사라졌다가 다시 나타나지 않기 때문에 불 naturel 보이는 scale(0)からの애니메이션 적용
- 느리게 시작되어 인터페이스가 느릿느릿한 느낌을 주는 UI 애니메이션에 ease-in 사용