mithulpranav24012008/3d-studio

3D Studio

Führt eine Reihe von 3D-Web-Skills als einen einzigen Workflow aus. Die Anfrage befindet sich in $ARGUMENTS. Falls dein Agent diesen Platzhalter nicht ausgefüllt hat, ist die Anfrage das, was der Benutzer zusammen mit diesem Skill geschrieben hat.

1. Wähle die Skills aus

Jeder davon ist ein separater Skill. Lade ihn so, wie dein Agent Skills lädt, unter genau dem gezeigten Namen: mit dem Skill-Tool in Claude Code, oder indem du seine SKILL.md in Codex und Antigravity liest. Seine Anweisungen gelten dann zusammen mit diesem Workflow. Abschnitt 4 listet, wo die Ordner zu finden sind.

Lade immer diese drei: taste-skill (Art Direction; kann auch als design-taste-frontend installiert sein), apple-design (flüssige physikalische Bewegung, Materialien und Tiefe), threejs-fundamentals (Szene, Kamera, Renderer, Schleife).

Füge eine Zeile hinzu, wenn die Anfrage es erfordert:

Die Anfrage beinhaltet	Lade
Alles, was sich bewegt	animate, threejs-animation
Im Code erstellte Formen, Instancing, viele Objekte	threejs-geometry
Oberflächen, Holz, Metall, Glanz	threejs-materials, threejs-textures
Beleuchtung, Schatten, Reflexionen	threejs-lighting
Klicken, Ziehen, Orbitieren, Teile auswählen	threejs-interaction
Benutzerdefinierte visuelle Effekte	threejs-shaders, threejs-postprocessing
Laden oder Komprimieren von 3D-Modelldateien	threejs-loaders, threejs-asset-pipeline
Modellieren oder Exportieren aus Blender	blender-mcp (überprüfe zuerst, ob Blender installiert ist)
Ein React-Projekt	threejs-react-three-fiber, r3f-fundamentals
Langsamkeit, Ruckeln, eine leere Leinwand, Speicher	threejs-performance, threejs-debug-profiler
Isometrische Figuren, Diagramme oder Erklärungen, die zeigen, wie etwas funktioniert, oder ein gedrucktes A4-Poster davon	anatomy
Einen gerenderten Film oder ein Video	Remotion, siehe Abschnitt 3

Zusammen umfassen diese Skills tausende von Zeilen, und das Laden aller verbraucht Arbeitsspeicher, den der Build benötigt. Deshalb ist die Tabelle die Standardeinstellung.

• Mit --all lade jeden Skill aus der Tabelle, unabhängig von der Anfrage.
• Mit --plan liste die Skills auf, die du laden würdest, und warum, lade nichts weiter und stoppe dann.

Sag in einem Satz, welche Skills du lädst. Falls ein Skill nicht lädt, nenne ihn und fahre mit den anderen fort, anstatt anzuhalten.

Lade jeden Skill an dem Punkt, an dem dieser Workflow ihn benötigt. Falls ein Skill mit einem Einrichtungsschritt beginnt oder nach einer Begrüßung fragt, die die Arbeit unterbrechen würde, überspringe diesen Teil.

2. Arbeite in dieser Reihenfolge

1. Entscheide die Idee. Folge taste-skill für die Art Direction: lies das Briefing, skizziere eine Richtung, schreibe den Text. Die Idee sollte vom Thema kommen.
2. Halte die Logik aus der 3D-Welt heraus. Alles mit echten Regeln (Arithmetik, eine Simulation, Preisgestaltung) kommt in normale Module ohne Three.js, die durch Tests abgedeckt sind, damit sie ohne Rendering vertrauenswürdig sind.
3. Baue die 3D-Welt als Funktion des Zustands. Geometriecode platziert Teile basierend auf einer Pose und kennt keine Regeln. Eine Bewegung sollte eine reine Funktion ihres Fortschritts sein, damit sie rückwärts laufen, auf halbem Weg umgekehrt oder für reduzierte Bewegung direkt zum Ende springen kann.
4. Rendere nur bei Bedarf. Zeichne nur, wenn sich etwas bewegt hat, und gar nicht, wenn es nicht sichtbar ist, damit eine inaktive Seite nichts kostet und ein Telefon kühl bleibt.
5. Mache es vollständig nutzbar. Es braucht echte Schaltflächen neben der Leinwand, Tastaturbedienung, reduzierte Bewegung, einen Fallback ohne WebGL und ein Layout, das auf Telefonbreite funktioniert.

3. Remotion

Es gehört kein Remotion-Skill zu diesem Set, daher verwende das remotion-Paket direkt im Projekt.

• Rendere, indem du denselben szenenerstellenden Code importierst, den die Website verwendet, damit Film und Website nicht auseinanderdriften können.
• Jeder Frame muss eine reine Funktion der Framenummer sein. Verwende keine Timer oder Federn, die von früheren Frames abhängen.
• Rendere mit remotion render <entry> <composition> <out.mp4> --gl=angle --codec=h264 --crf=24.
• Eine geänderte Szene ändert keinen bereits gerenderten Film. Rendere ihn neu oder teile dem Benutzer mit, dass er veraltet ist.

4. Überprüfe es, bevor du es als erledigt erklärst

Die Überprüfungen verwenden Skripte in zwei der Skills. Finde den Ordner jedes Skills, indem du nach seinem Namen suchst, in dieser Reihenfolge: in .claude/skills/ und .agents/skills/ im Projekt, dann in ~/.claude/skills/, ~/.agents/skills/ und ~/.gemini/config/skills/. Unten stehen <anatomy> und <taste> für diese Ordner. <taste> heißt entweder taste-skill oder design-taste-frontend.

Verwende node <anatomy>/scripts/drive.mjs <url> --actions steps.json, um einen echten Browser mit echten Klicks und Ziehbewegungen zu steuern. Beide Skripte benötigen Node 22 oder neuer und einen installierten Chrome, Edge oder Chromium.

• Standbilder und Abläufe sind separate Durchläufe. Eine shot-Aktion kann die Animation bis zur nächsten Aufnahme einfrieren. Mache Standbilder mit --reduced, das zum endgültigen Zustand springt, und teste animierte Abläufe mit eval-Prüfungen und ohne Screenshots mitten im Durchlauf. Falls ein Frame leer oder veraltet erscheint, nimm ihn erneut auf, bevor du ihn als Fehler behandelst.
• Teste die echten Steuerelemente. Bevorzuge das Klicken der tatsächlichen Schaltflächen gegenüber dem direkten Setzen des Zustands, und schließe das Umkehren und Unterbrechen mitten in der Animation ein.
• Überprüfe das Design. Führe node <taste>/scripts/inspect.mjs <url> --widths 1440,390 aus und sieh dir dann die Screenshots selbst an. Das Bestehen des Inspektors ist das Minimum, nicht die Note.
• Führe die Tests aus und lies die Konsole. Wiederhole dann den Hauptablauf mit dem Produktions-Build, nicht nur mit dem Dev-Server.

Berichte, was überprüft wurde und, ehrlich, was nicht: echte Geräte, Ton und Bewegung bei voller Geschwindigkeit sind hier normalerweise außer Reichweite.

5. Installieren von etwas Neuem

Falls ein Skill aus der Tabelle fehlt, kann der Benutzer das gesamte Set mit npx github:mithulpranav24012008/3d-studio installieren. Gib dem Benutzer für jeden anderen Skill oder jedes andere Tool, das die Aufgabe benötigt, den Befehl und lass ihn ihn ausführen, damit er seine Sicherheitsübersicht sieht. Verwende nicht -y, um die Bestätigung zu überspringen.