caceresfjulian/bewegungsfigur

Was macht bewegungsfigur?

Dieses Skill erstellt Figuren, die sich bewegen oder auf Eingaben reagieren. Es hat drei Stufen. Verwenden Sie dieses Skill mit Claude, Cursor, Codex, OpenClaw, Hermes oder einem anderen Agenten, der SKILL.md liest.

Stufe	Was erstellt wird	Wohin es geht
1. Lektionsfigur	Deklarative SMIL-Animation oder ein Schieberegler-Widget, das ein SVG neu zeichnet. Beide werden in einer ```figure-Umrandung eingebunden.	Kurslektionen
2. Mechanikfigur	Ein HTML-Panel, das die benannten Teile eines Systems zeigt. Der Leser steuert eine Steuerung und liest ein berechnetes Ergebnis ab.	Eigenständige Seiten, READMEs, Essays, die Kursseite außerhalb von Lektionen
3. Dither-Feld	Ein WebGL-Band aus geordneten Dither-Punkten in den Farben Papier, Akzent und Tinte, mit vier gesäten Bewegungen.	Seitenkopfzeilen und Abschnittsumbrüche

Stufe 1 hat die meisten Regeln, da die Lektionslaufzeit strenge Grenzen hat. Stufen 2 und 3 haben ihre eigenen Referenzdateien.

Wann verwenden

• Eine Lektion erklärt einen Prozess, der sich im Laufe der Zeit ändert: ein Token, das durch Phasen wandert, eine Warteschlange, die sich füllt, eine Schleife, die sich wiederholt.
• Eine Lektion erklärt eine Formel, bei der eine Eingabe die Ausgabe ändert: Lernrate, Temperatur, Chunk-Größe, Batch-Größe.
• Ein Autor schreibt „animieren Sie diese Figur“, „fügen Sie einen Schieberegler hinzu“ oder „machen Sie das Diagramm interaktiv“.
• Eine Seite benötigt eine Demo, bei der der Leser eine Sache ändert und sieht, was das System tut: ein Cache, eine Warteschlange, ein Kontextfenster, ein Router. Verwenden Sie Stufe 2.
• Eine Seite benötigt eine sich langsam bewegende Kopfzeile in den Kursfarben. Verwenden Sie Stufe 3.

Wann nicht verwenden

• Die Idee ist eine feste Struktur ohne Zeitachse und ohne Eingabe. Erstellen Sie eine statische SVG-Figur. Das Schwester-Skill blueprint-figure deckt statische Figuren ab.
• Die Seite ist eine vollständige Erklärseite mit eigenem Zustandsmodell und Maschinengeometrie. Das Schwester-Skill isometric-explainer deckt dies ab.
• Sie benötigen nur Palette, Schriftarten oder Prosaregeln. Das Schwester-Skill course-style enthält diese. Dieses Skill kopiert die benötigten Teile in references/tokens.md.

Methode

1. Schreiben Sie einen Satz, der die einzelne Änderung benennt, die die Figur zeigt. Wenn Sie zwei Sätze benötigen, erstellen Sie zwei Figuren.

2. Wählen Sie die Stufe. Verwenden Sie innerhalb einer Lektion Stufe 1. Für Stufe 2 lesen Sie references/mechanism-figures.md und beginnen Sie mit templates/mechanism.html. Für Stufe 3 lesen Sie references/dither-fields.md und kopieren Sie templates/dither.js. Die folgenden Schritte sind für Stufe 1. Verwenden Sie in Stufe 1 eine animierte Figur, wenn die Zeit die Variable ist. Verwenden Sie ein Schieberegler-Widget, wenn eine Zahl die Variable ist.

3. Wählen Sie einen Namen in Kebab-Schreibweise, z. B. request-path oder context-budget. Durchsuchen Sie zuerst das Registry nach diesem Namen. Ein späteres Modul, das denselben Namen registriert, ersetzt die frühere Figur.

4. Setzen Sie den Code in eine Moduldatei mit dem Namen figures-<thema>.js. Wickeln Sie es in ein IIFE, lesen Sie window.LF und kehren Sie frühzeitig zurück, wenn es fehlt.

5. Schreiben Sie eine Figurenfunktion function (host, cfg). Sie fügt eine .lf-Karte an host an und kann eine Dispose-Funktion zurückgeben.

6. Bauen Sie die Karte: .lf-head mit einem Großbuchstaben .lf-label und einem kurzen Hinweis, .lf-body und .lf-cap mit der Bildunterschrift.

7. Verwenden Sie viewBox="0 0 520 H" für das SVG. Die meisten Kursfiguren verwenden ein H von 200 bis 250. Ein einzelner Balken benötigt weniger.

8. Fügen Sie einen <title> und einen <desc> mit IDs hinzu, die Sie einmal außerhalb jeder Render-Funktion erstellen.

9. Fügen Sie für eine animierte Figur zuerst Einträge hinzu, dann eine langsame Schleife. Folgen Sie references/smil-rules.md Zeile für Zeile.

10. Definieren Sie für ein Schieberegler-Widget state._render, bevor Sie LF.slider oder LF.select aufrufen. Rufen Sie dann einmal am Ende state._render() auf.

11. Rufen Sie am Ende des Moduls LF.register({ 'ihr-name': fn }) auf.

12. Fügen Sie im Lektions-Markdown die Umrandung hinzu. Setzen Sie den Namen in die erste Zeile und optional eine JSON-Konfiguration dahinter:

    ```figure
    context-budget {"windowK": 32}
    ```
    

13. Führen Sie die Prüfungen in „Check before you finish“ durch. Betrachten Sie die Figur im Hellen Modus, Dunklen Modus, bei 375 px Breite und mit reduzierter Bewegung.

Wie die Seite eine Figur einbindet

• Der Markdown-Parser wandelt die Umrandung in <div class="lesson-figure" data-figure="name {json}"> um.
• Der Site-Build durchsucht das Lektions-Markdown nach Umrandungsnamen. Er findet die Moduldatei, die den zitierten Namen enthält, und schreibt ein Manifest. Ein Umrandungsname ohne Anbieter stoppt den Build.
• Die Seite lädt nur die Module, die die Lektion benötigt, in einer festen Reihenfolge. Neue Moduldateien kommen nach den aufgelisteten, in alphabetischer Reihenfolge.
• Die Einbindungsfunktion liest das erste Wort als Namen und parst den Rest als JSON. Schlechtes JSON ergibt ein leeres cfg.
• Wenn die Figurenfunktion einen Fehler wirft, leert die Laufzeit den Host und protokolliert eine Warnung. Der Rest der Lektion wird trotzdem gerendert.
• Nach der Einbindung fügt die Laufzeit einen Titel, eine Beschreibung, role="img" und Steuerungslabels hinzu, falls diese fehlen. Sie fügt eine Pause-Taste hinzu, wenn die Figur eine SMIL-Animation hat, und eine Wiederholen-Taste, wenn eine Animation einmal abgespielt wird.
• Die Laufzeit pausiert die Animation, wenn die Figur den Viewport verlässt, wenn der Tab ausgeblendet ist und wenn der Leser auf Pause drückt. Bei reduzierter Bewegung oder Druck wird der statische Rahmen angezeigt.

references/toolkit.md beschreibt jede Laufzeitfunktion und enthält zwei vollständige Beispielmodule.

Regeln

Animierte Figuren:

1. Verwenden Sie nur <animate>, <animateTransform> und <animateMotion>. Verwenden Sie kein setInterval oder requestAnimationFrame in einer Figur.
2. Halten Sie jede Figur bei 55 SVG-Elementen oder weniger.
3. Einträge gehen von Deckkraft 0 und Skalierung 0,95 zu Deckkraft 1 und Skalierung 1. Beginnen Sie eine Skalierung nie bei 0.
4. Einträge verwenden calcMode="spline" und keySplines="0.23 1 0.32 1". Die Eintrittsdauer beträgt 0,5 bis 0,6 s.
5. Staffeln Sie die Eintrittsbeginne um 0,05 bis 0,4 s. Austritte sind kürzer als Eintritte.
6. Schleifen dauern 2,5 bis 6 s und verwenden repeatCount="indefinite". Setzen Sie fill="freeze" nicht auf eine Schleife, da die Laufzeit sie dann einmal abspielt.
7. Jede keyTimes-Liste hat so viele Einträge wie values. Sie beginnt bei 0, endet bei 1 und nimmt nie ab.
8. Jede keySplines-Liste hat einen Eintrag weniger als keyTimes. Verwenden Sie sie nur mit calcMode="spline".
9. Ein animateMotion mit keyPoints verwendet calcMode="linear". Seine keyPoints-Anzahl entspricht seiner keyTimes-Anzahl. Es hat keine values.
10. Setzen Sie var() nicht in einen animierten fill- oder stroke-Wert. Animieren Sie die Deckkraft eines zweiten Elements, das die Zielfarbe hat.
11. Schleifen animieren nur Deckkraft, Transformation, stroke-dashoffset oder Bewegung entlang eines Pfades. Die Laufzeit lässt jede Animation von x, y, x1, y1, x2, y2, Breite, Höhe, r, cx, cy, rx oder ry einmal abspielen.
12. Der Rahmen bei der data-static-time des Hosts (Standard 1,5 s) ist vollständig und lesbar. Setzen Sie das Attribut auf den Host, wenn ein späterer Zeitpunkt den vollständigen Zustand zeigt.
13. Skalieren Sie ein Element um seinen Mittelpunkt. Zeichnen Sie den Inhalt einer Gruppe um (0,0) und verschieben Sie die Gruppe mit translate. Fügen Sie die Skalierung mit additive="sum" hinzu.

Schieberegler-Widgets:

14. Schreiben Sie nur ES5: var, Funktionsausdrücke, Zeichenkettenverkettung. Keine Pfeilfunktionen, let, const oder Template-Literale.
15. Definieren Sie state._render vor dem ersten LF.slider- oder LF.select-Aufruf. Der Schieberegler umschließt die Renderfunktion, wenn Sie ihn erstellen.
16. Entfernen Sie in state._render alle SVG-Kinder und fügen Sie sie erneut hinzu. Bearbeiten Sie keine Knoten direkt.
17. Erstellen Sie IDs einmal außerhalb von state._render. Die Laufzeit entfernt Attribute, die die neuen Knoten nicht haben, einschließlich IDs.
18. Wachsen Sie Balken durch Länge oder durch stroke-dasharray auf einem Pfad. Wachsen Sie Balken nicht mit Skalierung, da zusammengeführte Knoten von ihrem Mittelpunkt aus skalieren.
19. Halten Sie jedes Schieberegler-Label kurz und in Kleinbuchstaben mit der Einheit in Klammern, z. B. chunk size (tokens).

Beide Arten:

20. Nehmen Sie jede Farbe aus einer CSS-Variable mit dem Wert des Hellen Modus als Standard, z. B. var(--blueprint,#3553ff). Verwenden Sie nur dann einen literal-hexadezimalen Wert, wenn keine Variable funktioniert.
21. Verwenden Sie höchstens eine Akzentfarbe (--blueprint) für das Hauptmotiv und --warn für einen zweiten Zustand. Verwenden Sie Tinten- und Regel-Tokens für den Rest.
22. Setzen Sie SVG-Text auf 12 Einheiten oder größer, in var(--font-mono). Wenn Labels kleiner sein müssen, geben Sie dem SVG eine Mindestbreite von 500 px und lassen Sie es seitlich scrollen.
23. Messen Sie die Labelgröße auf einem Telefon. Auf einem 375 px-Bildschirm zeichnete ein 520-Einheiten-SVG innerhalb der Karte 279 px breit. Ein 12-Einheiten-Label zeichnete dann etwa 6,4 px.
24. Schreiben Sie die Bildunterschrift in einfachem technischem Englisch. Benennen Sie, was jede Farbe bedeutet. Halten Sie Sätze bei 25 Wörtern oder weniger.
25. Geben Sie das Label in .lf-label in Großbuchstaben, zwei bis vier Wörter.

Mechanikfiguren (Stufe 2):

26. Zeigen Sie echte Namen und echte Zahlen: Dateinamen, Schlüssel, Token-Anzahlen. Niemals „Element 1“ oder einen grauen Balken ohne Namen.
27. Geben Sie dem Leser eine Steuerung: Schritt, Schieberegler, Umschalter, Abspielen oder Stopp eines Teils.
28. Enden Sie mit einer Ergebniszeile im Text, berechnet aus den Zahlen im Hauptteil. Schreiben Sie niemals ein festes Ergebnis.
29. Einmal ausführen, wenn 35 Prozent der Figur sichtbar sind, eine Wiederholen-Taste hinzufügen und nie wiederholen.
30. Nur transform und opacity animieren, mit cubic-bezier(0.23, 1, 0.32, 1). Drücken 120 bis 160 ms, Enthüllen 200 bis 300 ms, Falten 380 bis 500 ms.
31. Listen um 30 bis 70 ms pro Element staffeln, nur für die ersten 8 Elemente.
32. Jedes Label in jedem Rahmen ganz halten: keine Auslassungspunkte, keine Überlappung, kein Text auf Punkten. Text 11 px oder mehr, Ergebnis 12,5 px oder mehr.
33. Bei 320 px die Panels in einer Spalte stapeln und jeder Steuerung ein 40 px-Berührungsziel geben.
34. Verwenden Sie einen Mechanismus, der von keiner anderen Seite auf der Site verwendet wird, und fügen Sie ihn der Mechanismus-Tabelle der Site hinzu.

Dither-Felder (Stufe 3):

35. Lesen Sie die Farben aus --bg, --blueprint und --ink und zeichnen Sie neu, wenn sich data-theme ändert.
36. Zeichnen Sie mit höchstens 30 Bildern pro Sekunde und nur, während das Band sichtbar ist.
37. Bei reduzierter Bewegung einen statischen Rahmen zeichnen. Ohne WebGL eine statische Schraffur zeigen.
38. Markieren Sie das Band mit aria-hidden="true" und setzen Sie außer dem Label-Chip keinen Text auf die Punkte.

Check before you finish

• Der Umrandungsname stimmt genau mit dem registrierten Namen überein, und kein anderes Modul registriert ihn.
• Das Modul hat kein =>, let, const oder Backtick-Zeichenketten.
• Das Modul hat kein setInterval und kein requestAnimationFrame.
• Der Validator in references/smil-rules.md gibt eine leere Liste für den eingebundenen Host zurück.
• Jede animierte Figur hat 55 SVG-Elemente oder weniger.
• Jede Schleife hat eine Dauer von 2,5 bis 6 s.
• Keine Schleife animiert ein Geometrieattribut aus Regel 11.
• Bei reduzierter Bewegung zeigt die Figur ein vollständiges Bild und kein Element fehlt.
• Im dunklen Modus ist jede Linie und jedes Label sichtbar.
• Bei 375 px Breite ist jedes Label lesbar und die Seite hat kein seitliches Scrollen außerhalb der Figur.
• Bei einem Widget ergibt das Bewegen jedes Schiebereglers auf sein Minimum und Maximum kein NaN, keine negativen Breiten und keine Konsolenfehler.
• Das SVG hat einen Titel und eine Beschreibung, und ihre IDs bleiben gleich, nachdem ein Schieberegler bewegt wurde.
• Die Bildunterschrift benennt jede Farbe, die die Figur verwendet.
• Stufe 2: Jeder Punkt in der Checkliste am Ende von references/mechanism-figures.md ist bestanden.
• Stufe 3: Jeder Punkt in der Checkliste am Ende von references/dither-fields.md ist bestanden.

Dateien

• references/smil-rules.md: die zwölf SMIL-Regeln vollständig, was jede Regel verhindert, und ein Validator, den Sie in der Browserkonsole ausführen können.
• references/toolkit.md: die LF-Funktionen und die Einbindungssequenz. Es enthält auch ein vollständiges Schieberegler-Widget, eine vollständige SMIL-Figur und eine Vorschauseite für die Verwendung außerhalb der Kursseite.
• references/tokens.md: Farb-Tokens für helle und dunkle Themen, Schriftarten und Bewegungs-Timing-Werte.
• references/mechanism-figures.md: Stufe 2. Echte Namen, abgelehnte Figuren, Mechanikformen, Anatomie, Ergebnis, Bewegungsbudget und Prüfungen.
• references/dither-fields.md: Stufe 3. Wie der Shader zeichnet, die vier Bewegungen, Markup, Regeln, geditherte Balken und Prüfungen.
• templates/mechanism.html: eine vollständige Stufe-2-Figur, ein LRU-Cache mit einer Größensteuerung, die in jedem Browser geöffnet werden kann.
• templates/dither.js: ein vollständiges Stufe-3-Skript. Laden Sie es und fügen Sie <div class="dither" data-seed="..."> hinzu.

Innerhalb des AI Engineering from Scratch Repositorys finden Sie auch site/lesson-figures.js für die Laufzeit und site/figures-*.js für weitere Figuren.