agy-superpowers 5.0.8 → 5.0.9

package/template/agent/skills/frontend-developer/references/vue-nuxt.md

@@ -0,0 +1,289 @@
+# Vue 3 + Nuxt Reference
+
+> **Philosophy:** Progressive framework. Reactivity-first. Convention over configuration.
+> Vue makes the simple things simple and the complex things manageable.
+
+---
+
+## Project Setup & Detection
+
+**Stack indicators:** `nuxt.config.ts` / `vue.config.js`, `package.json` with `vue` or `nuxt` dependency.
+
+**Key config files:**
+
+| File | Purpose |
+|------|---------|
+| `nuxt.config.ts` | Nuxt configuration (modules, plugins, runtime config) |
+| `app.config.ts` | App-level configuration (reactive, client-side) |
+| `tsconfig.json` | TypeScript configuration |
+| `.env` | Environment variables |
+
+**Recommended project structure (Nuxt 3):**
+
+```
+app/
+  pages/
+    index.vue                   # Home (/), file-based routing
+    about.vue                   # /about
+    users/
+      [id].vue                  # /users/:id (dynamic route)
+  layouts/
+    default.vue                 # Default layout
+    dashboard.vue               # Dashboard layout
+  components/
+    ui/                         # Reusable UI components
+    forms/                      # Form components
+  composables/                  # Auto-imported composables (useAuth, etc.)
+  stores/                       # Pinia stores
+  server/
+    api/                        # Server API routes
+    middleware/                  # Server middleware
+  plugins/                      # Vue plugins
+  middleware/                    # Route middleware (auth guards)
+  utils/                        # Auto-imported utility functions
+  assets/                       # Styles, images (processed by Vite)
+  public/                       # Static files (served as-is)
+```
+
+---
+
+## Architecture Patterns
+
+### Composition API (Default)
+
+```vue
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+
+const count = ref(0)
+const doubled = computed(() => count.value * 2)
+
+function increment() {
+  count.value++
+}
+
+onMounted(() => {
+  console.log('Component mounted')
+})
+</script>
+
+<template>
+  <button @click="increment">{{ count }} ({{ doubled }})</button>
+</template>
+```
+
+### State Management
+
+| Approach | Use When |
+|----------|----------|
+| **Pinia** (recommended) | Global/shared state — devtools, SSR, TypeScript |
+| **Composables** (`useState` in Nuxt) | SSR-safe state shared across components |
+| **`ref`/`reactive`** | Component-local state |
+| **URL state** (`useRoute().query`) | Filters, pagination, shareable state |
+
+**Pinia store:**
+
+```ts
+// stores/auth.ts
+export const useAuthStore = defineStore('auth', () => {
+  const user = ref<User | null>(null)
+  const isLoggedIn = computed(() => !!user.value)
+
+  async function login(credentials: Credentials) {
+    user.value = await $fetch('/api/auth/login', { method: 'POST', body: credentials })
+  }
+
+  return { user, isLoggedIn, login }
+})
+```
+
+### Data Fetching (Nuxt)
+
+| Composable | Use When |
+|------------|----------|
+| **`useFetch`** | SSR + client — auto-deduplication, caching |
+| **`useAsyncData`** | Custom async logic, multiple sources |
+| **`$fetch`** | Client-only calls, server API routes, event handlers |
+| **`useLazyFetch`** | Non-blocking fetch (shows page immediately) |
+
+```vue
+<script setup>
+const { data: posts, pending, error } = await useFetch('/api/posts')
+</script>
+```
+
+---
+
+## Performance Optimization
+
+### Key Optimizations
+
+1. **Auto-imports** — Nuxt auto-imports composables, components, and utils. No manual imports needed.
+
+2. **`<Suspense>` and `<NuxtLoadingIndicator>`** — built-in loading states.
+
+3. **`defineAsyncComponent`** — lazy load heavy components.
+
+```ts
+const HeavyChart = defineAsyncComponent(() => import('~/components/Chart.vue'))
+```
+
+4. **`v-once`** — render static content once, skip future updates.
+
+5. **`v-memo`** — memoize template sub-trees (Vue 3.2+).
+
+6. **`shallowRef`** — avoid deep reactivity for large objects.
+
+7. **Route-based code splitting** — Nuxt splits by page automatically.
+
+8. **Image optimization** — use `nuxt/image` module for `<NuxtImg>` and `<NuxtPicture>`.
+
+---
+
+## Common Libraries Ecosystem
+
+| Category | Recommended | Alternative |
+|----------|-------------|-------------|
+| **UI** | `nuxt-ui` / `primevue` | `vuetify`, `quasar` |
+| **Styling** | `tailwindcss` (via `@nuxtjs/tailwindcss`) | `unocss` |
+| **State** | `pinia` (built-in Nuxt module) | `vuex` (legacy) |
+| **Forms** | `vee-validate` + `zod` | `formkit` |
+| **Auth** | `sidebase/nuxt-auth` | `nuxt-auth-utils` |
+| **Database** | `prisma` / `drizzle` | `nuxt-mongoose` |
+| **i18n** | `@nuxtjs/i18n` | — |
+| **Testing** | `vitest` + `@vue/test-utils` | — |
+| **E2E** | `playwright` | `cypress` |
+| **Icons** | `nuxt-icon` | `unplugin-icons` |
+| **SEO** | `nuxt-seo` module suite | manual `useHead()` |
+
+---
+
+## Anti-Patterns & Gotchas
+
+| ❌ Don't | Why | ✅ Do Instead |
+|----------|-----|---------------|
+| Options API for new code | Less composable, worse TypeScript | `<script setup>` Composition API |
+| `this.$store` (Vuex) | Legacy, replaced by Pinia | Use Pinia stores |
+| Mutating props | One-way data flow violation, bugs | Emit events or use `v-model` |
+| `watch` for derived state | Extra re-render cycle | Use `computed` |
+| `$fetch` in `setup` for SSR data | Runs on both server AND client (duplicate) | `useFetch` or `useAsyncData` |
+| `ref.value` in template | `.value` is auto-unwrapped in templates | Just `{{ count }}`, not `{{ count.value }}` |
+| Missing `key` on `v-for` | Re-render bugs, broken state | Always `:key="item.id"` |
+| Barrel exports in composables | Nuxt auto-imports from `composables/` | One composable per file |
+| `process.env` in client | Only works in Node.js | `useRuntimeConfig()` |
+
+---
+
+## Testing
+
+| Layer | Tool | Purpose |
+|-------|------|---------|
+| **Unit** | Vitest + `@vue/test-utils` | Components, composables |
+| **Component** | `@nuxt/test-utils` | Full Nuxt component context |
+| **E2E** | Playwright | Full user flows |
+
+```ts
+import { mount } from '@vue/test-utils'
+import Counter from '~/components/Counter.vue'
+
+test('increments', async () => {
+  const wrapper = mount(Counter)
+  await wrapper.find('button').trigger('click')
+  expect(wrapper.text()).toContain('1')
+})
+```
+
+---
+
+## Deployment & Distribution
+
+### Nitro Server (Nuxt 3)
+
+Nuxt 3 uses Nitro — deploy anywhere:
+
+```bash
+# Build
+nuxt build            # Server (SSR)
+nuxt generate         # Static (SSG)
+
+# Preview
+nuxt preview
+```
+
+| Platform | Preset |
+|----------|--------|
+| **Vercel** | `vercel` (auto-detected) |
+| **Netlify** | `netlify` |
+| **Cloudflare** | `cloudflare-pages` |
+| **Node.js** | `node-server` |
+| **Docker** | `node-server` + Dockerfile |
+| **Static** | `nuxt generate` → any CDN |
+
+---
+
+## Quick Reference — Granular Rules
+
+Individual rule files in `vue-rules/` with detailed code examples and best
+practices from the Vue ecosystem. Read the specific rule when working in that area.
+
+> Source: [antfu/skills](https://github.com/antfu/skills) (from [vuejs-ai/skills](https://github.com/vuejs-ai/skills))
+
+### Best Practices — Components
+
+- [sfc.md](vue-rules/best-practices/sfc.md) — Single File Component patterns
+- [component-data-flow.md](vue-rules/best-practices/component-data-flow.md) — Props, events, v-model
+- [component-slots.md](vue-rules/best-practices/component-slots.md) — Slot patterns
+- [component-fallthrough-attrs.md](vue-rules/best-practices/component-fallthrough-attrs.md) — Fallthrough attributes
+- [component-async.md](vue-rules/best-practices/component-async.md) — Async components
+- [component-keep-alive.md](vue-rules/best-practices/component-keep-alive.md) — KeepAlive caching
+- [component-suspense.md](vue-rules/best-practices/component-suspense.md) — Suspense for async
+- [component-teleport.md](vue-rules/best-practices/component-teleport.md) — Teleport for portals
+- [component-transition.md](vue-rules/best-practices/component-transition.md) — Transition animations
+- [component-transition-group.md](vue-rules/best-practices/component-transition-group.md) — TransitionGroup for lists
+
+### Best Practices — Core
+
+- [reactivity.md](vue-rules/best-practices/reactivity.md) — Reactivity system deep dive
+- [composables.md](vue-rules/best-practices/composables.md) — Composable patterns
+- [state-management.md](vue-rules/best-practices/state-management.md) — State management approaches
+- [directives.md](vue-rules/best-practices/directives.md) — Custom directives
+- [plugins.md](vue-rules/best-practices/plugins.md) — Plugin architecture
+- [render-functions.md](vue-rules/best-practices/render-functions.md) — Render functions & JSX
+
+### Best Practices — Performance
+
+- [perf-virtualize-large-lists.md](vue-rules/best-practices/perf-virtualize-large-lists.md) — Virtualize large lists
+- [perf-avoid-component-abstraction-in-lists.md](vue-rules/best-practices/perf-avoid-component-abstraction-in-lists.md) — Avoid abstraction in lists
+- [perf-v-once-v-memo-directives.md](vue-rules/best-practices/perf-v-once-v-memo-directives.md) — v-once and v-memo
+- [updated-hook-performance.md](vue-rules/best-practices/updated-hook-performance.md) — Updated hook pitfalls
+
+### Best Practices — Animation
+
+- [animation-class-based-technique.md](vue-rules/best-practices/animation-class-based-technique.md) — CSS class-based animations
+- [animation-state-driven-technique.md](vue-rules/best-practices/animation-state-driven-technique.md) — State-driven animations
+
+### Router
+
+- [router-guard-async-await-pattern.md](vue-rules/router/router-guard-async-await-pattern.md) — Async guard pattern
+- [router-navigation-guard-next-deprecated.md](vue-rules/router/router-navigation-guard-next-deprecated.md) — next() is deprecated
+- [router-navigation-guard-infinite-loop.md](vue-rules/router/router-navigation-guard-infinite-loop.md) — Avoid guard infinite loops
+- [router-param-change-no-lifecycle.md](vue-rules/router/router-param-change-no-lifecycle.md) — Param changes skip lifecycle
+- [router-beforerouteenter-no-this.md](vue-rules/router/router-beforerouteenter-no-this.md) — No `this` in beforeRouteEnter
+- [router-beforeenter-no-param-trigger.md](vue-rules/router/router-beforeenter-no-param-trigger.md) — beforeEnter vs param changes
+- [router-simple-routing-cleanup.md](vue-rules/router/router-simple-routing-cleanup.md) — Simple routing cleanup
+- [router-use-vue-router-for-production.md](vue-rules/router/router-use-vue-router-for-production.md) — Use Vue Router in production
+
+### Testing
+
+- [testing-vitest-recommended-for-vue.md](vue-rules/testing/testing-vitest-recommended-for-vue.md) — Vitest is recommended
+- [testing-component-blackbox-approach.md](vue-rules/testing/testing-component-blackbox-approach.md) — Black-box testing
+- [testing-composables-helper-wrapper.md](vue-rules/testing/testing-composables-helper-wrapper.md) — Test composables with wrapper
+- [testing-pinia-store-setup.md](vue-rules/testing/testing-pinia-store-setup.md) — Pinia store testing setup
+- [testing-async-await-flushpromises.md](vue-rules/testing/testing-async-await-flushpromises.md) — Async testing patterns
+- [testing-suspense-async-components.md](vue-rules/testing/testing-suspense-async-components.md) — Suspense testing
+- [async-component-testing.md](vue-rules/testing/async-component-testing.md) — Async component testing
+- [teleport-testing-complexity.md](vue-rules/testing/teleport-testing-complexity.md) — Teleport testing
+- [testing-no-snapshot-only.md](vue-rules/testing/testing-no-snapshot-only.md) — Don't rely on snapshots only
+- [testing-browser-vs-node-runners.md](vue-rules/testing/testing-browser-vs-node-runners.md) — Browser vs Node runners
+- [testing-e2e-playwright-recommended.md](vue-rules/testing/testing-e2e-playwright-recommended.md) — Playwright for E2E
+

package/template/agent/skills/frontend-developer/references/vue-rules/best-practices/_index.md

@@ -0,0 +1,154 @@
+---
+name: vue-best-practices
+description: MUST be used for Vue.js tasks. Strongly recommends Composition API with `<script setup>` and TypeScript as the standard approach. Covers Vue 3, SSR, Volar, vue-tsc. Load for any Vue, .vue files, Vue Router, Pinia, or Vite with Vue work. ALWAYS use Composition API unless the project explicitly requires Options API.
+license: MIT
+metadata:
+  author: github.com/vuejs-ai
+  version: "18.0.0"
+---
+
+# Vue Best Practices Workflow
+
+Use this skill as an instruction set. Follow the workflow in order unless the user explicitly asks for a different order.
+
+## Core Principles
+- **Keep state predictable:** one source of truth, derive everything else.
+- **Make data flow explicit:** Props down, Events up for most cases.
+- **Favor small, focused components:** easier to test, reuse, and maintain.
+- **Avoid unnecessary re-renders:** use computed properties and watchers wisely.
+- **Readability counts:** write clear, self-documenting code.
+
+## 1) Confirm architecture before coding (required)
+
+- Default stack: Vue 3 + Composition API + `<script setup lang="ts">`.
+- If the project explicitly uses Options API, load `vue-options-api-best-practices` skill if available.
+- If the project explicitly uses JSX, load `vue-jsx-best-practices` skill if available.
+
+### 1.1 Must-read core references (required)
+
+- Before implementing any Vue task, make sure to read and apply these core references:
+  - `references/reactivity.md`
+  - `references/sfc.md`
+  - `references/component-data-flow.md`
+  - `references/composables.md`
+- Keep these references in active working context for the entire task, not only when a specific issue appears.
+
+### 1.2 Plan component boundaries before coding (required)
+
+Create a brief component map before implementation for any non-trivial feature.
+
+- Define each component's single responsibility in one sentence.
+- Keep entry/root and route-level view components as composition surfaces by default.
+- Move feature UI and feature logic out of entry/root/view components unless the task is intentionally a tiny single-file demo.
+- Define props/emits contracts for each child component in the map.
+- Prefer a feature folder layout (`components/<feature>/...`, `composables/use<Feature>.ts`) when adding more than one component.
+
+## 2) Apply essential Vue foundations (required)
+
+These are essential, must-know foundations. Apply all of them in every Vue task using the core references already loaded in section `1.1`.
+
+### Reactivity
+
+- Must-read reference from `1.1`: [reactivity](references/reactivity.md)
+- Keep source state minimal (`ref`/`reactive`), derive everything possible with `computed`.
+- Use watchers for side effects if needed.
+- Avoid recomputing expensive logic in templates.
+
+### SFC structure and template safety
+
+- Must-read reference from `1.1`: [sfc](references/sfc.md)
+- Keep SFC sections in this order: `<script>` → `<template>` → `<style>`.
+- Keep SFC responsibilities focused; split large components.
+- Keep templates declarative; move branching/derivation to script.
+- Apply Vue template safety rules (`v-html`, list rendering, conditional rendering choices).
+
+### Keep components focused
+
+Split a component when it has **more than one clear responsibility** (e.g. data orchestration + UI, or multiple independent UI sections).
+
+- Prefer **smaller components + composables** over one “mega component”
+- Move **UI sections** into child components (props in, events out).
+- Move **state/side effects** into composables (`useXxx()`).
+
+Apply objective split triggers. Split the component if **any** condition is true:
+
+- It owns both orchestration/state and substantial presentational markup for multiple sections.
+- It has 3+ distinct UI sections (for example: form, filters, list, footer/status).
+- A template block is repeated or could become reusable (item rows, cards, list entries).
+
+Entry/root and route view rule:
+
+- Keep entry/root and route view components thin: app shell/layout, provider wiring, and feature composition.
+- Do not place full feature implementations in entry/root/view components when those features contain independent parts.
+- For CRUD/list features (todo, table, catalog, inbox), split at least into:
+  - feature container component
+  - input/form component
+  - list (and/or item) component
+  - footer/actions or filter/status component
+- Allow a single-file implementation only for very small throwaway demos; if chosen, explicitly justify why splitting is unnecessary.
+
+### Component data flow
+
+- Must-read reference from `1.1`: [component-data-flow](references/component-data-flow.md)
+- Use props down, events up as the primary model.
+- Use `v-model` only for true two-way component contracts.
+- Use provide/inject only for deep-tree dependencies or shared context.
+- Keep contracts explicit and typed with `defineProps`, `defineEmits`, and `InjectionKey` as needed.
+
+### Composables
+
+- Must-read reference from `1.1`: [composables](references/composables.md)
+- Extract logic into composables when it is reused, stateful, or side-effect heavy.
+- Keep composable APIs small, typed, and predictable.
+- Separate feature logic from presentational components.
+
+## 3) Consider optional features only when requirements call for them
+
+### 3.1 Standard optional features
+
+Do not add these by default. Load the matching reference only when the requirement exists.
+
+- Slots: parent needs to control child content/layout -> [component-slots](references/component-slots.md)
+- Fallthrough attributes: wrapper/base components must forward attrs/events safely -> [component-fallthrough-attrs](references/component-fallthrough-attrs.md)
+- Built-in component `<KeepAlive>` for stateful view caching -> [component-keep-alive](references/component-keep-alive.md)
+- Built-in component `<Teleport>` for overlays/portals -> [component-teleport](references/component-teleport.md)
+- Built-in component `<Suspense>` for async subtree fallback boundaries -> [component-suspense](references/component-suspense.md)
+- Animation-related features: pick the simplest approach that matches the required motion behavior.
+  - Built-in component `<Transition>` for enter/leave effects -> [transition](references/component-transition.md)
+  - Built-in component `<TransitionGroup>` for animated list mutations -> [transition-group](references/component-transition-group.md)
+  - Class-based animation for non-enter/leave effects -> [animation-class-based-technique](references/animation-class-based-technique.md)
+  - State-driven animation for user-input-driven animation -> [animation-state-driven-technique](references/animation-state-driven-technique.md)
+
+### 3.2 Less-common optional features
+
+Use these only when there is explicit product or technical need.
+
+- Directives: behavior is DOM-specific and not a good composable/component fit -> [directives](references/directives.md)
+- Async components: heavy/rarely-used UI should be lazy loaded -> [component-async](references/component-async.md)
+- Render functions only when templates cannot express the requirement -> [render-functions](references/render-functions.md)
+- Plugins when behavior must be installed app-wide -> [plugins](references/plugins.md)
+- State management patterns: app-wide shared state crosses feature boundaries -> [state-management](references/state-management.md)
+
+## 4) Run performance optimization after behavior is correct
+
+Performance work is a post-functionality pass. Do not optimize before core behavior is implemented and verified.
+
+- Large list rendering bottlenecks -> [perf-virtualize-large-lists](references/perf-virtualize-large-lists.md)
+- Static subtrees re-rendering unnecessarily -> [perf-v-once-v-memo-directives](references/perf-v-once-v-memo-directives.md)
+- Over-abstraction in hot list paths -> [perf-avoid-component-abstraction-in-lists](references/perf-avoid-component-abstraction-in-lists.md)
+- Expensive updates triggered too often -> [updated-hook-performance](references/updated-hook-performance.md)
+
+## 5) Final self-check before finishing
+
+- Core behavior works and matches requirements.
+- All must-read references were read and applied.
+- Reactivity model is minimal and predictable.
+- SFC structure and template rules are followed.
+- Components are focused and well-factored, splitting when needed.
+- Entry/root and route view components remain composition surfaces unless there is an explicit small-demo exception.
+- Component split decisions are explicit and defensible (responsibility boundaries are clear).
+- Data flow contracts are explicit and typed.
+- Composables are used where reuse/complexity justifies them.
+- Moved state/side effects into composables if applicable
+- Optional features are used only when requirements demand them.
+- Performance changes were applied only after functionality was complete.

package/template/agent/skills/frontend-developer/references/vue-rules/best-practices/animation-class-based-technique.md

@@ -0,0 +1,254 @@
+---
+title: Use Class-based Animations for Non-Enter/Leave Effects
+impact: LOW
+impactDescription: Class-based animations are simpler and more performant for elements that remain in the DOM
+type: best-practice
+tags: [vue3, animation, css, class-binding, state]
+---
+
+# Use Class-based Animations for Non-Enter/Leave Effects
+
+**Impact: LOW** - For animations on elements that are not entering or leaving the DOM, use CSS class-based animations triggered by Vue's reactive state. This is simpler than `<Transition>` and more appropriate for feedback animations like shake, pulse, or highlight effects.
+
+## Task List
+
+- Use class-based animations for elements staying in the DOM
+- Use `<Transition>` only for enter/leave animations
+- Combine CSS animations with Vue's class bindings (`:class`)
+- Consider using `setTimeout` to auto-remove animation classes
+
+**When to Use Class-based Animations:**
+- User feedback (shake on error, pulse on success)
+- Attention-grabbing effects (highlight changes)
+- Hover/focus states that need more than CSS transitions
+- Any animation where the element stays mounted
+
+**When to Use Transition Component:**
+- Elements entering/leaving the DOM (v-if/v-show)
+- Route transitions
+- List item additions/removals
+
+## Basic Pattern
+
+```vue
+<template>
+  <div :class="{ shake: showError }">
+    <button @click="submitForm">Submit</button>
+    <span v-if="showError">This feature is disabled!</span>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const showError = ref(false)
+
+function submitForm() {
+  if (!isValid()) {
+    // Trigger shake animation
+    showError.value = true
+
+    // Auto-remove class after animation completes
+    setTimeout(() => {
+      showError.value = false
+    }, 820)  // Match animation duration
+  }
+}
+</script>
+
+<style>
+.shake {
+  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+  transform: translate3d(0, 0, 0);  /* Enable GPU acceleration */
+}
+
+@keyframes shake {
+  10%, 90% { transform: translate3d(-1px, 0, 0); }
+  20%, 80% { transform: translate3d(2px, 0, 0); }
+  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
+  40%, 60% { transform: translate3d(4px, 0, 0); }
+}
+</style>
+```
+
+## Common Animation Patterns
+
+### Pulse on Success
+
+```vue
+<template>
+  <button
+    @click="save"
+    :class="{ pulse: saved }"
+  >
+    {{ saved ? 'Saved!' : 'Save' }}
+  </button>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const saved = ref(false)
+
+async function save() {
+  await saveData()
+  saved.value = true
+  setTimeout(() => saved.value = false, 1000)
+}
+</script>
+
+<style>
+.pulse {
+  animation: pulse 0.5s ease-in-out;
+}
+
+@keyframes pulse {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.05); }
+}
+</style>
+```
+
+### Highlight on Change
+
+```vue
+<template>
+  <div
+    :class="{ highlight: justUpdated }"
+  >
+    Value: {{ value }}
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+
+const value = ref(0)
+const justUpdated = ref(false)
+
+watch(value, () => {
+  justUpdated.value = true
+  setTimeout(() => justUpdated.value = false, 1000)
+})
+</script>
+
+<style>
+.highlight {
+  animation: highlight 1s ease-out;
+}
+
+@keyframes highlight {
+  0% { background-color: yellow; }
+  100% { background-color: transparent; }
+}
+</style>
+```
+
+### Bounce Attention
+
+```vue
+<template>
+  <div
+    :class="{ bounce: needsAttention }"
+    @animationend="needsAttention = false"
+  >
+    <BellIcon />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const needsAttention = ref(false)
+
+function notifyUser() {
+  needsAttention.value = true
+  // No setTimeout needed - using animationend event
+}
+</script>
+
+<style>
+.bounce {
+  animation: bounce 0.5s ease;
+}
+
+@keyframes bounce {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-10px); }
+}
+</style>
+```
+
+## Using animationend Event
+
+Instead of `setTimeout`, use the `animationend` event for cleaner code:
+
+```vue
+<template>
+  <div
+    :class="{ animate: isAnimating }"
+    @animationend="isAnimating = false"
+  >
+    Content
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const isAnimating = ref(false)
+
+function triggerAnimation() {
+  isAnimating.value = true
+  // Class is automatically removed when animation ends
+}
+</script>
+```
+
+## Composable for Reusable Animations
+
+```javascript
+// composables/useAnimation.js
+import { ref } from 'vue'
+
+export function useAnimation(duration = 500) {
+  const isAnimating = ref(false)
+
+  function trigger() {
+    isAnimating.value = true
+    setTimeout(() => {
+      isAnimating.value = false
+    }, duration)
+  }
+
+  return {
+    isAnimating,
+    trigger
+  }
+}
+```
+
+```vue
+<script setup>
+import { useAnimation } from '@/composables/useAnimation'
+
+const shake = useAnimation(820)
+const pulse = useAnimation(500)
+</script>
+
+<template>
+  <button
+    :class="{ shake: shake.isAnimating.value }"
+    @click="shake.trigger()"
+  >
+    Shake me
+  </button>
+
+  <button
+    :class="{ pulse: pulse.isAnimating.value }"
+    @click="pulse.trigger()"
+  >
+    Pulse me
+  </button>
+</template>
+```