스킬 animate

📦

animate

Name: animate
Author: emilkowalski

콘텐츠 리비전 r1 안전 ⚙️ 외부 명령어🌐 네트워크 접근

Build Purposeful Interface Animations

Interface motion often feels slow, distracting, or inaccessible when timing and tools are chosen without a clear process. This skill produces focused implementations with proven animation recipes.

지원: Claude Codex Code(CC)

🥉 77 브론즈

Maintain this Skill? Claim it 🥉 77 브론즈

내 에이전트로 설치

이 요청을 에이전트에 복사하세요. 공식 Skill 페이지와 매니페스트가 포함되어 있습니다.

에이전트 요청

Review the Skillstore skill "animate" from https://skillstore.io/skills/emilkowalski-animate.md and its manifest at https://skillstore.io/api/skills/emilkowalski-animate/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

에이전트는 계속해서 계획을 표시하고 보안 정책에서 요구하는 확인을 요청해야 합니다.

에이전트가 읽기 쉬운 리소스

AI 에이전트, 크롤러, 스크립트가 전체 페이지 대신 정리된 컨텍스트만 필요할 때 이 링크를 사용하세요.

Markdown 상세 GET /skills/emilkowalski-animate.md 서명된 manifest GET /api/skills/emilkowalski-animate/manifest 서명된 lockfile GET /api/skills/emilkowalski-animate/lockfile

테스트해 보기

"animate" 사용 중입니다. Add animation when a settings popover opens and closes.

예상 결과:

A 200 millisecond opacity and scale transition uses the existing ease-out token, trigger-based origin, symmetric exit, and reduced-motion fallback.

"animate" 사용 중입니다. Animate a command palette opened hundreds of times each day.

예상 결과:

No animation is added because the interaction is frequent and keyboard initiated. The palette changes state immediately.

"animate" 사용 중입니다. Create drag-to-dismiss motion for a mobile sheet.

예상 결과:

The sheet tracks direct transforms, uses velocity and distance thresholds, captures the pointer, resists over-drag, and settles with a spring.

보안 감사

안전

v1 • 2026. 8. 8. 버전별 보고서 열기

All 47 static findings are false positives caused by Markdown backticks, code fences, animation syntax, ordinary prose, and documentation links. The reviewed files contain no command execution, reconnaissance, network requests, data exfiltration, or prompt-injection attempt.

스캔된 파일

525

분석된 줄 수

검토 항목

오탐 무시됨

가장 최근에 완료된 정적·의미론적 감사에서 확인된 보안 발견 사항이 감지되지 않았습니다. 이는 스킬에 부작용이 없음을 증명하지 않습니다.

감사자: codex

이 보고서 공유 및 인용

버전이 지정된 평가 보고서, 중립 배지, 임베드 카드 및 인용을 공유하세요. Skillstore는 근거를 보고하지만 이 Skill의 안전 여부를 판단하지 않습니다.

버전별 보고서 열기

보고서 링크 복사

https://skillstore.io/skills/emilkowalski-animate/audits/1?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown 배지

[![Skillstore security assessment](https://skillstore.io/badges/skills/emilkowalski-animate/security.svg)](https://skillstore.io/skills/emilkowalski-animate?utm_source=security_passport_badge)

HTML 배지

<a href="https://skillstore.io/skills/emilkowalski-animate?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/emilkowalski-animate/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

임베드 카드

<iframe src="https://skillstore.io/embed/skills/emilkowalski-animate.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>

학술 인용 (APA · BibTeX · CFF)

APA 인용

emilkowalski. (2026). animate security audit report (audit version 1) [Author version unspecified]. Skillstore. https://skillstore.io/skills/emilkowalski-animate/audits/1

BibTeX 인용

@techreport{emilkowalski-emilkowalski-animate-2026,
  author = {emilkowalski},
  title = {animate security audit report (audit version 1)},
  institution = {Skillstore},
  year = {2026},
  number = {1},
  url = {https://skillstore.io/skills/emilkowalski-animate/audits/1},
  note = {Author version unspecified}
}

CITATION.cff

cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "animate security audit report (audit version 1)"
version: "unspecified"
type: report
authors:
  - name: "emilkowalski"
date-released: "2026-08-08"
url: "https://skillstore.io/skills/emilkowalski-animate/audits/1"
identifiers:
  - type: other
    value: "skillstore:emilkowalski-animate:audit:1"
    description: "Skillstore immutable audit report identifier"

변형 비교

설치 가능한 변형 2개

각 작성자의 스킬은 별도의 설치 항목으로 유지됩니다. 추천 변형은 Skillstore 근거로 순위가 정해집니다.

이 변형이 1위인 이유

Skillstore 점수가 가장 높음

작성자 / 소스 Skillstore 점수 증거 신뢰도 Skillstore 사용량 업데이트됨

pbakaus 권장

pbakaus-animate

Skillstore 점수 78

증거 신뢰도 높음

Skillstore 사용량 26

업데이트됨

2026-09-09

emilkowalski 현재

emilkowalski-animate

Skillstore 점수 77

증거 신뢰도 중간

Skillstore 사용량 8

업데이트됨

2026-09-09

Skillstore 점수

이 점수의 이유 증거 신뢰도: 중간

아키텍처

유지보수성

콘텐츠

커뮤니티

사양 준수

만들 수 있는 것

Add Responsive Product Motion

Create subtle feedback, entrances, and state transitions that keep daily workflows responsive.

Translate Motion Specs

Convert interaction intent into implementation choices with explicit properties, curves, durations, and accessibility behavior.

Prototype Gesture Interactions

Build interruptible drag, dismissal, drawer, and spring behavior from practical recipes.

이 프롬프트를 사용해 보세요

Animate a Simple State Change

Add appropriate motion to this button state change. Choose the tool, properties, easing, duration, and reduced-motion behavior.

Build a Component Entrance

Implement the entrance and exit motion for this popover. Preserve accessibility and existing design tokens. Explain the animation gate result briefly.

Create an Interruptible Gesture

Build drag-to-dismiss behavior for this panel. Include velocity handling, pointer capture, boundary damping, multi-touch protection, and reduced motion.

Design a Motion System Extension

Add motion to this workflow without creating parallel tokens. Select the cheapest suitable tools and implement every accepted transition with accessibility variants.

모범 사례

State the animation purpose before selecting tools, timing, or visual properties.
Reuse existing motion tokens and prefer transform and opacity for smooth rendering.
Test interruption, reduced motion, touch behavior, and perceived timing on real devices.

피하기

Do not animate frequent keyboard actions or functional data without a clear user benefit.
Do not install a motion library when a CSS transition meets the requirements.
Do not ship broad transition declarations, ungated hover motion, or missing reduced-motion behavior.

자주 묻는 질문

Does this skill decide when motion is unnecessary?

Yes. It can reject animation for frequent actions, keyboard workflows, or motion without a clear purpose.

Which animation tools can it use?

It can choose CSS transitions, CSS animations, the Web Animations API, or Motion.

Does it support reduced-motion preferences?

Yes. Each implementation should include a gentler variant that removes unnecessary movement while preserving useful state feedback.

Can it build accessible dropdowns or dialogs from scratch?

No. It recommends an appropriate component library when focus management and interaction semantics are required.

Can it review existing animations?

This skill focuses on construction. A dedicated review or codebase audit skill is more suitable for existing motion.

Will every animation be fully tuned from code alone?

No. Crossfades, spring response, and gesture feel may require playback, device testing, and human evaluation.

개발자 세부 정보

작성자

emilkowalski

라이선스

MIT

Skillstore 리비전

버전 안내

작성자가 버전을 선언하지 않았습니다.

리포지토리

https://github.com/emilkowalski/skills/tree/de33dbed000212b54400a33767d1e4d03654db2a/skills/animate

참조

17e49992c9f55842f934ecec5719e4745ba7b95a

유지보수 최신성

2026. 8. 9.

사용량

0 다운로드 · 0 조회

파일 구조

📄 RECIPES.md

📄 SKILL.md

animate

내 에이전트로 설치

에이전트가 읽기 쉬운 리소스

테스트해 보기

보안 감사

위험 요인

보고서 링크 복사

Markdown 배지

HTML 배지

임베드 카드

APA 인용

BibTeX 인용

CITATION.cff

변형 비교

Skillstore 점수

만들 수 있는 것

Add Responsive Product Motion

Translate Motion Specs

Prototype Gesture Interactions

이 프롬프트를 사용해 보세요

모범 사례

피하기

자주 묻는 질문

개발자 세부 정보