analyze-reference
Extrahiere Muster, klone nicht. Dieses Skill liest EINE öffentliche Seite (plus maximal zwei vom Benutzer benannte interne Links), beschreibt abstrakt, wie sie aufgebaut ist und wie sie sich bewegt, und schreibt patterns/<slug>.md. Nichts von der Seite wird gespeichert: keine Bilder, Videos, 3D, Logos, Texte, Code, Markenschriftnamen oder Farbcodes. Screenshots sind temporäre Arbeitsmaterialien unter .cache/analyze/ (git-ignoriert) und werden am Ende immer gelöscht.
Dies ist eine Anleitung für den eigenen Workflow des Repos, keine Rechtsberatung. Konsultiere vor der Produktivsetzung einen IP-Anwalt (siehe docs/roadmap.md).
Eingaben
url(erforderlich): eine öffentliche http(s)-Seite. Alles hinter einem Login, einer Paywall oder einem Bot-Check ist nicht abgedeckt.--focus "..."(optional): was dem Benutzer an der Seite gefällt, in seinen eigenen Worten. Lenkt die Tiefe der Abschnitte im Sheet. Wird im Frontmatter festgehalten (none, wenn nicht angegeben).- Bis zu 2 interne Links (optional, gleiche Domain): Analysiere jeden mit denselben Schritten und führe sie in einem Sheet zusammen. Nie weiter crawlern.
Slug: Abgeleitet vom Host (www. entfernt, Punkte zu Bindestrichen, z.B. example-com). Übergib --slug an recon.mjs, falls der Benutzer einen benennt. Falls patterns/<slug>.md bereits existiert, frage vor dem Ersetzen nach.
Alle Befehle werden vom Repository-Stammverzeichnis aus ausgeführt. Skripte liegen in .claude/skills/analyze-reference/scripts/; jedes beantwortet --help.
Schritte
Führe diese in dieser Reihenfolge aus. Schritt 6 (Bereinigung) wird unabhängig davon ausgeführt, wie die Schritte 1 bis 5 enden: Erfolg, Abbruch oder Fehler. Behandle es als finally.
1. Berechtigungen prüfen (bevor die Seite mit einem Browser berührt wird)
node .claude/skills/analyze-reference/scripts/check-robots.mjs <url>
Es wertet robots.txt für *, ClaudeBot, anthropic-ai und GPTBot aus, den X-Robots-Tag-Header, <meta name="robots"> und Text-and-Data-Mining-Reservierungen (TDMRep: /.well-known/tdmrep.json, tdm-reservation-Header und Meta). Exit-Codes: 0 erlaubt, 1 blockiert, 2 nicht überprüfbar.
- Exit
1oder2: STOPP. Erstelle kein Sheet, führe keine Erkundung durch. Sage dem Benutzer die genauen Gründe, die das Skript ausgegeben hat. Exit2(5xx, Timeout, unlesbare Dateien) ist ein konservativer Abbruch: Sage, dass die Berechtigungen nicht überprüft werden konnten; wiederhole nicht in einer Schleife und suche nicht nach einem anderen Weg. - Führe es auch für jeden zusätzlichen internen Link aus.
- Ein 404 für
robots.txtgilt als erlaubt; ein 401/403 gilt als nicht erlaubt.
2. Erkundung
node .claude/skills/analyze-reference/scripts/recon.mjs <url> [--slug <slug>]
Playwright (headless Chromium; setze QA_CHROME_PATH oder CHROME_PATH, falls Playwrights eigener Browser nicht installiert ist) lädt die Seite, scrollt sie und schreibt .cache/analyze/<slug>/recon.json und screens/{375,768,1440}-<n>.png. Das JSON enthält nur Struktur und Statistiken: Sektionen in Reihenfolge mit Höhen und Überschriften-/Wortzahlen (niemals Text), aggregierte Schriftgrößen, Zeilenhöhen, Abstände, Grid/Flex-Nutzung, Schriftarten klassifiziert als Serif/Sans/Mono/Display (niemals benannt), Farben als Rollenbeschreibungen (niemals Codes), erkannte Bibliotheken mit Belegen und Konfidenz, Netzwerk-Domains, Canvas/WebGL-Präsenz und Bewegungsbeobachtungen (Reveal, Pin, Parallax, Scrub, Sticky-Header, erleichterter Scroll).
Scroll-Container. Einige Seiten halten das Dokument eine Viewport-Höhe hoch und scrollen einen inneren Wrapper. recon.mjs erkennt dies (das sichtbare overflow-y: auto|scroll|overlay-Element, das mindestens 60% des Viewports abdeckt und den größten Scrollbereich hat) und verwendet es für Screenshots, Bewegungsabtastung und die Rad-Sonde. recon.json zeichnet scroller: { kind: "document" | "container", scrollHeightPx, clientHeightPx } auf, und viewports[w].docHeightPx ist die tatsächlich verwendete scrollbare Höhe. Überprüfe scroller.kind beim Lesen der Belege. Die Heuristik ist aufgezeichnet, nicht garantiert: Wenn die Screenshots ein Seitenpanel oder ein Modal anstelle der Seite zeigen, sage dies im Sheet. Nicht abgedeckt: verschachtelte oder horizontale Scroller und Szenen, die durch Rad-Ereignisse ohne scrollbares Element gesteuert werden. Eine Seite kann auch bei einer Breite aufhören zu scrollen (z.B. ein Tablet-Breakpoint); dann ist ein Screenshot bei dieser Breite korrekt.
Hinter einem Proxy. Wenn HTTPS_PROXY oder HTTP_PROXY gesetzt ist (Cloud-Sitzungen), führen sich check-robots.mjs und recon.mjs einmal selbst mit NODE_USE_ENV_PROXY=1 neu aus, damit Node's fetch den Proxy verwendet, und recon.mjs übergibt den Proxy an Chromium (Loopback bleibt direkt). Keine Flags erforderlich; die experimentelle Warnzeile von Node wird ausgeblendet. Zertifikate stammen wie gewohnt aus NODE_EXTRA_CA_CERTS; die Skripte lesen oder betten sie niemals ein. Ohne Proxy ändert sich nichts.
Exit 3 bedeutet, dass die Seite nicht analysierbar ist (Login-Formular, Bot-Check, HTTP 401/403/429, nicht erreichbar). STOPP: kein Sheet, sage dem Benutzer warum (bei einer Login-Seite: "Die Seite ist nicht öffentlich"). Versuche niemals, eine Blockade zu umgehen, einen Bot-Check zu lösen, dich anzumelden oder den User-Agent zu ändern.
3. Belege lesen
- Lese
.cache/analyze/<slug>/recon.jsonvollständig. - Betrachte die Screenshots mit dem Lesewerkzeug, mindestens einige pro Breite, um zu beurteilen, was die Zahlen nicht zeigen: Hero-Komposition, Rhythmus, Dichte, wo ein Layout das Grid durchbricht, was sich bewegt. Sie sind nur für deine Augen; kopiere, bette oder referenziere sie niemals.
- Konfidenz: Eine globale oder eine DOM-Klasse plus ein passender Skriptname ist
high; eines davon allein istmedium; eine Netzwerk-Domain allein istlow. Bibliotheken, die in App-Code gebündelt sind, werden nur als Skriptnamen-Übereinstimmungen angezeigt; sage daher "wahrscheinlich" und behalte die von recon gemeldete Konfidenz bei.
4. Das Sheet schreiben
Kopiere die Struktur von patterns/_template.md in patterns/<slug>.md. Fülle das Frontmatter (url, slug, heutiges Datum als YYYY-MM-DD, focus, libraries als Liste von Namen) und jeden Abschnitt in deinen eigenen Worten:
| Abschnitt | Inhalt |
|---|---|
| Zusammenfassung | Um welche Art von Seite es sich handelt und warum es sich lohnt, von ihr zu lernen |
| Sektionsübersicht | Geordnete Sektionen: Rolle, ungefähre Höhe in Viewports, Layout-Idee |
| Hero | Hero-Typ, Zusammensetzung des ersten Bildschirms, was beim Laden passiert |
| Grid und Abstände | Spaltensystem, Inhaltsbreite-Klasse, Abstands-Skala (Grundeinheit), vertikaler Rhythmus |
| Typografie | Generische Klassen ("große groteske Display + Serif Body"), Skalenverhältnis, Schriftstärken, Zeilenhöhen- und Laufweiten-Gewohnheiten, Schreibstil |
| Palette | Rollen und Töne ("fast-schwarzer Hintergrund, warmer gesättigter Akzent"), Kontrastcharakter, Thema |
| Dichte | Inhalt pro Bildschirm, Weißraum, Ideen pro Sektion, Text-zu-Medien-Gleichgewicht |
| Bewegung | Tabelle: Moment, Auslöser (Laden, Scrollen, Hover), Typ (Reveal, Pin, Parallax, Scrub, Seitenübergang, Shader/3D), Technik und Bibliothek, Konfidenz |
| Bibliotheken | Erkannte Bibliotheken mit der Belegklasse und Konfidenz |
| Was mitnehmen / was vermeiden | Was als Muster in einer originellen Landing Page wiederverwendet werden sollte und was zu spezifisch oder riskant zum Nachahmen ist |
Bewegungseinträge: eine Zeile pro relevantem Effekt. Eine Sektion, die pinned wird, während ihr Inhalt mit Scroll animiert, ist Auslöser scroll, Typ pin+scrub, mit der Bibliothek und ihrer Konfidenz. Hover-Verhalten wird von Recon nicht gemessen; betrachte die Screenshots oder die hoverTransitionElements-Zahl und gib deine Konfidenz als niedrig an, wenn du es ableitest.
5. Validieren
npm run validate:patterns
Es muss bestehen. Wenn es file:line-Verstöße meldet, schreibe diese Zeilen abstrakter um und führe es erneut aus. Schwäche niemals den Validator und verwende niemals eine > note:-Zeile, um Kopien einzuschmuggeln: Dieses Präfix befreit nur deine eigenen kurzen Bemerkungen von der Zitatregel.
Optional, nur wenn ein als interessant markierter Effekt nach Schritt 3 unerklärt bleibt: npx rea-agents analyze-javascript-application <url> (schwer, niemals erforderlich). Zeichne nur eine schriftliche Schlussfolgerung auf ("scroll-verbundener Kamerapfad gesteuert durch eine Timeline-Bibliothek, mittlere Konfidenz"), niemals ihre Ausgabe, ihren Code oder Dumps. Überspringe es, wenn es Netzwerkzugriff benötigt, den du nicht hast.
6. Bereinigung (immer)
node .claude/skills/analyze-reference/scripts/recon.mjs --cleanup <slug>
Führe es nach einem Erfolg, nach einem Abbruch in einem beliebigen Schritt und nach einem Fehler aus. Bestätige dann, dass .cache/analyze/<slug> verschwunden ist und dass git status nichts von der Seite zeigt (nur patterns/<slug>.md bei Erfolg). recon.mjs entfernt auch seinen eigenen Ordner, wenn es fehlschlägt, aber du führst dennoch die Bereinigung durch.
7. Dem Benutzer melden
Sage, was analysiert wurde, den Pfad des Sheets, die Bibliotheken mit Konfidenz, alles, was du nicht bestimmen konntest, und dass ein Mensch das Sheet im PR überprüfen muss. Bei einem Abbruch: den Grund und dass kein Sheet geschrieben wurde.
Abstraktionsregeln (streng)
Setze niemals Folgendes in das Sheet, die Chat-Zusammenfassung des Sheets, einen Commit oder eine versionierte Datei:
- Text von der Seite: Überschriften, Fließtext, Mikrokopien, Alt-Texte, Meta-Beschreibungen (nur Seitentitel und URL sind erlaubt).
- Bild-, Video-, Schrift-, 3D-Modell- oder Icon-URLs sowie jegliche Asset-Datei.
- Quellcode, Markup, CSS, JS oder Shader-Fragmente, selbst kurz, minifiziert oder bearbeitet.
- Hex-,
rgb(),hsl()- oder andere Farbcodes. Beschreibe nach Rolle und Ton. - Marken- oder proprietäre Schriftnamen. Verwende generische Klassen.
- Logos, Markenzeichen, Illustrationen.
Schreibe über Muster, wie ein Designer einen Kollegen einweisen würde: "Gepinnte Statement-Sektion, Inhalt über etwa einen extra Viewport geschrubbt", nicht eine Transkription des Markups. Wenn du dir unsicher bist, ob ein Detail Inhalt oder Muster ist, lasse es weg.
Abbruchfälle
| Situation | Aktion |
|---|---|
robots.txt verbietet den Pfad für *, ClaudeBot, anthropic-ai oder GPTBot | Stopp bei Schritt 1, melde die passende Regel, kein Sheet |
TDM-Reservierung (TDMRep-Datei, Header oder Meta, oder robots.txt-Direktive) | Stopp bei Schritt 1, melde es, kein Sheet |
noai, noindex oder none in X-Robots-Tag oder Meta-Robots | Stopp bei Schritt 1, melde es, kein Sheet |
| Berechtigungen können nicht überprüft werden (5xx, Timeout, unlesbare Datei) | Stopp bei Schritt 1, sage "Berechtigungen konnten nicht überprüft werden", kein Sheet |
| Login-Formular, Paywall, HTTP 401/403/429, Bot-Check | Stopp bei Schritt 2, sage, die Seite ist nicht öffentlich oder blockiert automatisierte Browser, kein Sheet; umgehe nicht |
| Nicht erreichbare URL oder Nicht-2xx-Antwort | Stopp bei Schritt 2, melde den Fehler, kein Sheet |
| Validierung schlägt ständig fehl | Behebe es durch weitere Abstraktion; wenn es nicht ohne Verlust des Punktes bestehen kann, sage dies und schreibe kein Sheet |
Führe in jedem Abbruchfall Schritt 6 aus.
Namensnennung
Der Erkundungsansatz (Screenshots in mehreren Breiten, DOM-Struktur, berechnete Stile, Interaktions- und Scroll-Beobachtung) ist angepasst aus den Recon-Phasen des clone-website-Skills in JCodesMore/ai-website-cloner-template, MIT-Lizenz. Nur die Idee der Recon-Phasen wurde wiederverwendet und für abstrakte Beschreibung neu geschrieben; kein Code und keine der Asset-Download- oder Wiederaufbau-Phasen ist enthalten.