跳到正文
cccskills
免费在 GitHub 公开

text-to-lottie

Load when creating, editing, or debugging Lottie/Bodymovin JSON for the local Skia Skottie player: logo/type/SVG animation, loaders, icons, UI microinteractions, lower thirds, charts, diagrams, scene motion, effects, slots, or controls; not for static raster/SVG, CSS-only motion, or video editing.

中文简介正在准备中。当前显示原文说明。

实测评分 未实测

查看安装方法

包含的文件(23)

  • SKILL.md3.6 KB
  • evals/output-rubric.md10.8 KB
  • evals/reference-loading-prompts.json5.4 KB
  • evals/routing-prompts.json9.1 KB
  • evals/trigger-prompts.json3.0 KB
  • references/chapterization-transition-grammar.md8.7 KB
  • references/design-taste.md14.8 KB
  • references/lottie-spec-map.md3.2 KB
  • references/motion-taste.md12.9 KB
  • references/player-contract.md10.9 KB
  • references/recipe-camera-scene-motion.md2.6 KB
  • references/recipe-data-stats.md5.0 KB
  • references/recipe-diagram-technical.md4.8 KB
  • references/recipe-loaders-icons.md2.7 KB
  • references/recipe-logo.md2.8 KB
  • references/recipe-lower-thirds.md2.1 KB
  • references/recipe-product-promo.md4.3 KB
  • references/recipe-starter-projects.md2.5 KB
  • references/recipe-svg-animation.md2.6 KB
  • references/recipe-typography.md7.3 KB
  • references/recipe-ui-microinteractions.md2.6 KB
  • references/recipe-visual-effects.md4.8 KB
  • references/svg-compatibility.md3.6 KB

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

<!-- ABOUTME: Thin control plane for authoring and verifying Lottie scenes in Skia Skottie. --> <!-- ABOUTME: Routes each animation type to one recipe plus only necessary supporting references. -->

Text To Lottie

Rules

  • Read player contract for every create/edit/fix task and verify with the official Skia Skottie player.
  • Resolve the target by explicit file path, then route, then known task scene; never overwrite a non-placeholder default scene.
  • Scene output lives at public/projects/<project>/<scene-N>/lottie.json; re-read it immediately before overwrite because the UI can persist slot edits.
  • Include valid top-level Lottie metadata and treat op as exclusive.
  • Default logos, icons, loaders, overlays, lower thirds, and SVG-derived assets to transparent; full-frame scenes get one deliberate background.
  • Prefer native text with a shipped matching font; use vector text only for path-specific effects.
  • Use purposeful staging/easing and verify real frames; JSON validity alone is insufficient.
  • Premium/minimal means restraint: whitespace, scale, weight, brightness, and timing before cards, borders, glow, dividers, or stacked tints.

Reference routing

DeliverableLoad in addition to player contract
JSON/keyframes/shapes/assets/slotsspec map
Logologo recipe + motion
Typography or lower thirdtypography or lower thirds + design
Loader/icon/state feedbackloaders/icons + motion
UI microinteractionUI recipe + motion
SVG sourcePrimary recipe + SVG compatibility
Camera/scene motioncamera recipe
Diagram or data/chartdiagram or data
Promo or visual effectpromo or effects + design
Multi-beat/long-form scenechapterization

Choose one primary recipe, then add only source-format or treatment references required by the prompt.

Workflow

  1. Resolve the scene and read its current JSON plus the player contract.
  2. Choose background policy and the smallest matching reference set.
  3. Edit lottie.json; add controls.json only for useful editable slots.
  4. Validate JSON and load the scene in the official player.
  5. Inspect frame 0, a representative midpoint, and op - 1; fix missing assets, crop, text overflow, layer order, timing, easing, or SVG artifacts.

Verification

node -e "JSON.parse(require('fs').readFileSync('public/projects/<project>/<scene-N>/lottie.json','utf8'))"

Confirm the scene appears in GET /__context, inspect pinned browser frames, and verify the intended background policy.

Use evals/* only when changing this skill's routing or quality behavior, never during normal animation work.

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

Load for Blazor/MudBlazor UI changes involving forms, dialogs, focus, keyboard navigation, landmarks, ARIA, color contrast, RTL-safe styling, or WCAG 2.2 AA tests; not for backend-only changes.

中文简介正在准备中。当前显示原文说明。

islamu-ngo/Event82026年10月24日 更新

Load when a task asks to research, verify, compare, or look up framework/package behavior, release notes, standards, RFCs, CVEs, or unfamiliar APIs; use repository evidence first, then official docs, and not for codebase navigation alone.

中文简介正在准备中。当前显示原文说明。

islamu-ngo/Event82026年10月24日 更新

aspire

免费

Load for Aspire AppHost work: start/stop/wait resources, inspect dashboard/logs/traces, add integrations/resources, rebuild a service, run isolated worktrees, or diagnose Aspire orchestration; not for plain dotnet apps, container-only deployments, or cloud deployment.

中文简介正在准备中。当前显示原文说明。

islamu-ngo/Event82026年10月24日 更新

Load for authentication or authorization changes involving BFF cookies/tokens, JWT validation, claims/user ID extraction, policies, handler access checks, impersonation, or 401/403 bugs; not for UI affordance gating alone.

中文简介正在准备中。当前显示原文说明。

islamu-ngo/Event82026年10月24日 更新

Load for Blazor BFF server work involving YARP proxy routes, cookie sessions, access-token forwarding/refresh, downstream API calls, BFF handlers, or browser-to-API auth failures; not for client component rendering or API JWT validation alone.

中文简介正在准备中。当前显示原文说明。

islamu-ngo/Event82026年10月24日 更新

Load when editing Blazor `.razor.css`, scoped selectors, `::deep`, BEM class names, RTL/logical CSS properties, or styling nested MudBlazor components; not for global design tokens or non-Blazor CSS.

中文简介正在准备中。当前显示原文说明。

islamu-ngo/Event82026年10月24日 更新

查看 islamu-ngo 的全部技能

报告此技能的问题