pellicule

Agent Skills › sailscastshq/pellicule › pellicule

pellicule

GitHub

基于 Vue 的视频渲染技能，支持使用 Pellicule 库创建视频、动画和动态图形。提供从安装配置到动画工具、序列管理及渲染输出的完整开发指南。

skills/SKILL.md sailscastshq/pellicule

Trigger Scenarios

需要生成视频内容需要制作网页动画或动态图形在 Vue 项目中集成视频渲染功能

Install

npx skills add sailscastshq/pellicule --skill pellicule -g -y

More Options

Non-standard path

npx skills add https://github.com/sailscastshq/pellicule/tree/main/skills -g -y

Use without installing

npx skills use sailscastshq/pellicule@pellicule

指定 Agent (Claude Code)

npx skills add sailscastshq/pellicule --skill pellicule -a claude-code -g -y

安装 repo 全部 skill

npx skills add sailscastshq/pellicule --all -g -y

预览 repo 内 skill

npx skills add sailscastshq/pellicule --list

SKILL.md

Frontmatter

{
    "name": "pellicule",
    "metadata": {
        "tags": "pellicule, video, vue, animation, composition"
    },
    "description": "Create videos with Vue using Pellicule - a Vue-native video rendering library"
}

When to use

Use this skill whenever you need to create videos, animations, or motion graphics using Vue. Pellicule is like Remotion but for Vue.

How to use

Read individual rule files for detailed explanations and code examples:

rules/getting-started.md - Installation, setup, and framework integration (Nuxt, Quasar, Laravel, etc.)
rules/macros.md - defineVideoConfig macro for zero-config rendering
rules/animations.md - Animation utilities: interpolate, sequence, easing
rules/composables.md - useFrame and useVideoConfig composables
rules/sequences.md - Sequence component and useSequence for scene management
rules/patterns.md - Common patterns: typewriter, staggered, scenes, loops
rules/rendering.md - CLI options, BYOS mode, auto-detection, and rendering
rules/styling.md - CSS, fonts, and visual styling