Communitygithub.com

pproenca/emilkowal-animations

Emil Kowalski의 웹 인터페이스 애니메이션 모범 사례. React, CSS 또는 Framer Motion에서 애니메이션을 작성, 검토 또는 구현할 때 사용합니다. 전환, 이징, 제스처, 토스트, 드로어 또는 모션과 관련된 작업에서 트리거됩니다.

emilkowal-animations란 무엇인가요?

이 스킬은 웹 인터페이스에서 애니메이션을 구현할 때 Emil Kowalski의 권장 모범 사례를 따를 수 있도록 돕습니다. React, CSS, Framer Motion을 주 대상으로 하며, 전환(transitions), 이징(easing), 제스처(gestures), 토스트(toasts), 드로어(drawers), 모션(motion) 관련 작업에서 자동으로 활성화됩니다. 애니메이션 코드를 작성하거나 기존 코드를 검토할 때 일관된 품질과 성능을 유지하도록 가이드라인을 제공합니다. Cursor, Claude Code, Codex 등 다양한 AI 에이전트 플랫폼에서 사용 가능하며, Skil Hub를 통해 설치하여 개발 워크플로우에 통합할 수 있습니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/pproenca/dot-skills/tree/main/skills/emilkowal-animations

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

emilkowal-animations은(는) 무엇을 하나요?

Emil Kowalski의 웹 인터페이스 애니메이션 모범 사례. React, CSS 또는 Framer Motion에서 애니메이션을 작성, 검토 또는 구현할 때 사용합니다. 전환, 이징, 제스처, 토스트, 드로어 또는 모션과 관련된 작업에서 트리거됩니다.

Individual skills in this repo

This repo contains 7 individual skills — each has its own dedicated page.

pproenca/clean-architecture

Clean Architecture principles and best practices from Robert C. Martin's book. This skill should be used when designing software systems, reviewing code structure, or refactoring applications to achieve better separation of concerns. Triggers on tasks involving layers, boundaries, dependency direction, entities, use cases, or system architecture.

pproenca/code-simplifier

Code simplification skill for improving clarity, consistency, and maintainability while preserving exact behavior. Use when simplifying code, reducing complexity, cleaning up recent changes, applying refactoring patterns, or improving readability. Triggers on tasks involving code cleanup, simplification, refactoring, or readability improvements.

pproenca/nuqs

nuqs (type-safe URL query state) best practices for Next.js and other React frameworks. This skill should be used when writing, reviewing, or refactoring code that uses nuqs for URL state management. Triggers on tasks involving useQueryState, useQueryStates, search params, URL state, query parameters, nuqs parsers, limitUrlUpdates, Standard Schema, NuqsAdapter, or Next.js routing with state.

pproenca/react-hook-form

React Hook Form performance optimization for client-side form validation using useForm, useWatch, useController, useFieldArray, and the v7.55+ subscribe() API. This skill should be used when building client-side controlled forms with React Hook Form library. This skill does NOT cover React 19 Server Actions, useActionState, or server-side form handling (use react-19 skill for those).

pproenca/typescript

TypeScript performance, tsconfig, type errors, async patterns — triggered when the user asks to "optimize TypeScript performance", "speed up tsc compilation", "configure tsconfig.json", "fix type errors", "improve async patterns", or encounters TS errors (TS2322, TS2339, "is not assignable to"). Also triggers on .ts, .tsx, .d.ts file work involving type definitions, module organization, or memory management. Does NOT cover TypeScript basics, framework-specific patterns, or testing.

pproenca/vitest

Vitest testing framework patterns for test setup, async testing, mocking with vi.*, snapshots, and test performance (formerly test-vitest). This skill should be used when writing or debugging Vitest tests. This skill does NOT cover TDD methodology (use test-tdd skill), API mocking with MSW (use test-msw skill), or Jest-specific APIs.

pproenca/zod

Zod schema validation best practices for type safety, parsing, and error handling. This skill should be used when defining z.object schemas, using z.string validations, safeParse, or z.infer. This skill does NOT cover React Hook Form integration patterns (use react-hook-form skill) or OpenAPI client generation (use orval skill).

관련 스킬