css-animation-creator
CSS Animation Creator
Instructions
When creating animations:
- Understand the purpose - Feedback, delight, guidance, or storytelling
- Choose the right technique - CSS transitions, keyframes, or JS libraries
- Optimize for performance - GPU-accelerated properties only
- Respect accessibility - Honor prefers-reduced-motion
- Keep timing natural - Use appropriate easing and duration
Animation Principles
The 12 Principles (Disney) Applied to UI
| Principle | UI Application |
|---|---|
| Squash & Stretch | Button press, elastic effects |
More from onewave-ai/claude-skills
landing-page-copywriter
Write high-converting landing page copy using proven frameworks like PAS (Problem-Agitate-Solution), AIDA, and StoryBrand. Creates headlines, value propositions, CTAs, and full page sections optimized for conversion. Use when users need landing page copy, sales page content, or marketing website text.
3.2Kcode-review-pro
Comprehensive code review covering security vulnerabilities, performance bottlenecks, best practices, and refactoring opportunities. Use when user requests code review, security audit, or performance analysis.
2.1Kcsv-excel-merger
Merge multiple CSV/Excel files with intelligent column matching, data deduplication, and conflict resolution. Handles different schemas, formats, and combines data sources. Use when users need to merge spreadsheets, combine data exports, or consolidate multiple files into one.
661technical-writer
Write comprehensive technical documentation including user guides, how-to articles, system architecture docs, onboarding materials, and knowledge base articles. Creates clear, structured documentation for technical and non-technical audiences. Use when users need technical writing, documentation, tutorials, or knowledge base content.
583screenshot-to-code
Convert UI screenshots into working HTML/CSS/React/Vue code. Detects design patterns, components, and generates responsive layouts. Use this when users provide screenshots of websites, apps, or UI designs and want code implementation.
504knowledge-base-builder
FAQ identification from support tickets, step-by-step tutorial creation, screenshot/video script guidance, search optimization, and self-service deflection tracking.
459