byrobertocumbane-glitch/lottie-marketplace

Was macht lottie-marketplace?

Durchsuche, rufe Lottie-Animationen ab und integriere sie mit zwei Claude Code-Befehlen in React, Vue, Flutter und andere Frameworks.

Übersicht

Mit dieser Fähigkeit kannst du direkt über Claude Code nach Lottie-Animationen suchen, ihre Details anzeigen, sie herunterladen und in dein Projekt integrieren.

Befehle

/search-lottie

Suche nach Lottie-Animationen anhand von Stichwörtern.

Syntax:

/search-lottie <suchbegriff>

Beispiel:

/search-lottie loading animation

Antwort:

Eine Liste mit Animationen, jeweils mit:

• Name
• ID
• Beschreibung
• Vorschau-URL (LottieFiles)

/fetch-lottie

Rufe eine Lottie-Animation anhand ihrer ID ab und integriere sie in dein Projekt.

Syntax:

/fetch-lottie <animations-id>

Beispiel:

/fetch-lottie LF12345

Antwort:

• Lade die lottie-player-Komponente herunter oder konfiguriere sie.
• Zeige Code-Snippets zur Integration in React, Vue oder Flutter.
• Lege die JSON-Animationsdatei im assets-Verzeichnis deines Projekts ab (optional).

Integration in Frameworks

React

import Lottie from 'react-lottie-player';
import animationData from './assets/animation.json';

function App() {
  return (
    <Lottie
      loop
      animationData={animationData}
      play
      style={{ width: 150, height: 150 }}
    />
  );
}

Vue

<template>
  <div>
    <lottie-player
      src="/assets/animation.json"
      background="transparent"
      speed="1"
      style="width: 300px; height: 300px;"
      loop
      controls
      autoplay
    ></lottie-player>
  </div>
</template>

<script>
import '@lottiefiles/lottie-player';
export default {
  name: 'LottieAnimation'
};
</script>

Flutter

import 'package:lottie/lottie.dart';

Lottie.asset('assets/animation.json', width: 200, height: 200),

Abhängigkeiten

• React: react-lottie-player
• Vue: @lottiefiles/lottie-player
• Flutter: lottie-Paket (in pubspec.yaml hinzufügen)

Hinweise

• Die Vorschau-URLs der Animationen stammen von LottieFiles. Du benötigst möglicherweise einen API-Key, um die Dateien programmatisch herunterzuladen.
• Standardmäßig wird die Animation als animation.json im Ordner assets/ deines Projekts gespeichert.
• Die Fähigkeit geht davon aus, dass du zur Nutzung mit Claude Code die entsprechenden Abhängigkeiten bereits installiert hast.