Communitygithub.com

pproenca/emilkowal-animations

Emil Kowalski 的 Web 界面动画最佳实践。适用于在 React、CSS 或 Framer Motion 中编写、审查或实现动画时使用。触发于涉及过渡、缓动、手势、提示框、抽屉或动效的任务。

emilkowal-animations 是什么?

该技能封装了 Emil Kowalski 关于 Web 界面动画的最佳实践,专门为在 React、CSS 和 Framer Motion 中编写、审查或实现动画的开发者设计。它涵盖了过渡、缓动、手势、提示框、抽屉和动效等关键任务,帮助开发者创建流畅、直观且性能优异的用户交互体验。技能基于详细的 SKILL.md 文档,提供了实用的指导原则和代码示例。它适用于多种 AI 代理平台(如 Claude Code、Cursor、Codex),并能在开发者处理相关动画任务时自动触发建议或审查。通过整合行业领先的动画模式,该技能提升了代码质量和用户体验,减少了重复研究和试错的成本。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/pproenca/dot-skills/tree/main/skills/emilkowal-animations

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

emilkowal-animations 是做什么的?

Emil Kowalski 的 Web 界面动画最佳实践。适用于在 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).

相关技能