motion은(는) 무엇을 하나요?
Motion Vue (motion-v)를 사용하여 애니메이션을 추가할 때 사용합니다. Vue 3/Nuxt를 위한 motion 컴포넌트 API, 제스처 애니메이션, 스크롤 연동 효과, 레이아웃 전환 및 컴포저블을 제공합니다.
Motion Vue (motion-v)를 사용하여 애니메이션을 추가할 때 사용합니다. Vue 3/Nuxt를 위한 motion 컴포넌트 API, 제스처 애니메이션, 스크롤 연동 효과, 레이아웃 전환 및 컴포저블을 제공합니다.
이 스킬은 Vue 3 및 Nuxt 애플리케이션에서 Motion Vue(motion-v) 라이브러리를 사용하여 애니메이션을 손쉽게 구현할 수 있도록 도와줍니다. motion 컴포넌트 API를 통해 선언적인 방식으로 요소의 움직임을 제어할 수 있으며, hover, tap, drag와 같은 제스처 애니메이션도 지원합니다. 또한 스크롤 위치에 따라 요소를 애니메이션하는 scroll-linked effects, 요소의 추가/제거 시 부드러운 전환을 제공하는 layout transitions, 그리고 useMotion, useSpring, useMotionTransitions 등 다양한 컴포저블을 포함하고 있습니다. 따라서 복잡한 CSS 애니메이션을 직접 작성할 필요 없이 직관적인 Vue 컴포넌트와 컴포저블만으로 인터랙티브한 사용자 경험을 구현할 수 있습니다.
npx skills add https://github.com/onmax/nuxt-skills/tree/main/skills/motionMotion Vue (motion-v)를 사용하여 애니메이션을 추가할 때 사용합니다. Vue 3/Nuxt를 위한 motion 컴포넌트 API, 제스처 애니메이션, 스크롤 연동 효과, 레이아웃 전환 및 컴포저블을 제공합니다.
This repo contains 15 individual skills — each has its own dedicated page.
Use when writing blog posts or documentation markdown files - provides writing style guide (active voice, present tense), content structure patterns, and MDC component usage. Overrides brevity rules for proper grammar. Use nuxt-content for MDC syntax, nuxt-ui for component props.
Use when working on Nuxt 4+ projects - provides server routes, file-based routing, middleware patterns, Nuxt-specific composables, and configuration with latest docs. Covers h3 v1 helpers (validation, WebSocket, SSE) and nitropack v2 patterns. Updated for Nuxt 4.3+.
Use when implementing auth in Nuxt apps with @onmax/nuxt-better-auth - provides useUserSession composable, server auth helpers, route protection, and Better Auth plugins integration.
Use when working with Nuxt Content v3, markdown content, or CMS features in Nuxt - provides collections (local/remote/API sources), queryCollection API, MDC rendering, database configuration, NuxtStudio integration, hooks, i18n patterns, and LLMs integration
Use when building NuxtHub v0.10.6 applications - provides database (Drizzle ORM with sqlite/postgresql/mysql), KV storage, blob storage, and cache APIs. Covers configuration, schema definition, migrations, multi-cloud deployment (Cloudflare, Vercel), and the new hub:db, hub:kv, hub:blob virtual module imports.
Use when creating Nuxt modules: (1) Published npm modules (@nuxtjs/, nuxt-), (2) Local project modules (modules/ directory), (3) Runtime extensions (components, composables, plugins), (4) Server extensions (API routes, middleware), (5) Releasing/publishing modules to npm, (6) Setting up CI/CD workflows for modules. Provides defineNuxtModule patterns, Kit utilities, hooks, E2E testing, and release automation.
Nuxt SEO meta-module with robots, sitemap, og-image, schema-org. Use when configuring SEO, generating sitemaps, creating OG images, or adding structured data.
Use when building styled UI with @nuxt/ui v4 components - create forms with validation, implement data tables with sorting, build modal dialogs and overlays, configure Tailwind Variants theming. Use vue skill for raw component patterns, reka-ui for headless primitives.
Use when managing Node.js dependencies with pnpm - install packages, configure monorepo workspaces, set up pnpm catalogs, resolve dependency conflicts with overrides, patch third-party packages, and configure CI pipelines for pnpm projects
Use when building with Reka UI (headless Vue components) - provides component API, accessibility patterns, composition (asChild), controlled/uncontrolled state, virtualization, and styling integration. Formerly Radix Vue.
Use when authoring TypeScript libraries or npm packages - covers project setup, package.json exports, build tooling (tsdown/unbuild), API design patterns, type inference tricks, testing, and publishing to npm. Use when bundling, configuring dual CJS/ESM output, or setting up release workflows.
Vite build tool configuration, plugin API, SSR, and Vite 8 Rolldown migration. Use when working with Vite projects, vite.config.ts, Vite plugins, or building libraries/SSR apps with Vite.
Use when writing unit/integration tests for Vite projects - configure vitest.config.ts, write test suites with describe/it, create mock implementations with vi.fn and vi.mock, set up code coverage thresholds, and run tests in parallel
Use when editing .vue files, creating Vue 3 components, writing composables, or testing Vue code - provides Composition API patterns, props/emits best practices, VueUse integration, and reactive destructuring guidance
Use when working with VueUse composables - track mouse position with useMouse, manage localStorage with useStorage, detect network status with useNetwork, debounce values with refDebounced, and access browser APIs reactively. Check VueUse before writing custom composables - most patterns already implemented.
Extract frames or short clips from videos using ffmpeg.
Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.
Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.
Obra superpowers agent skills.
See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...
End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.