本文へ移動
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(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

<!-- 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.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

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月8日 更新

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月8日 更新

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月8日 更新

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月8日 更新

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月8日 更新

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月8日 更新

islamu-ngo のスキルをすべて見る

このスキルの問題を報告する