Alle Skills

prototype (mattpocock/skills)

Baut einen Wegwerf-Prototyp, um eine Designfrage zu Zustandslogik oder UI-Richtung zu beantworten.

Matt Pococks prototype: Befolgt seine eigenen UI-Varianten-Regeln (4.95 vs. 3.71 für die Kontrolle) bei etwa gleichen Kosten wie ohne Skill

EmpfohlenSicher

Codex CLI · gpt-6-astra

27.2 / 30

Lift gegenüber ohne Skill: +1.23 · Empfohlen · 18 Läufe

Empfohlen: Die Gesamtpunktzahl 27.2/30 liegt bei mindestens 22, die Ausgabequalität 5.0 bei mindestens 3.5 und der Lift +1.23 bei mindestens +1.0.

SOTA

Bestanden

Getestet mit Codex.

Gilt für Codex, Claude Code

Codex CLI 0.166 (SOTA-Stufe): 18 bewertete Läufe. Ein Bestehen hier deckt gemäß unserer Stufenregel auch Claude Code ab; über die zweite Stufe sagt es nichts aus.

Punktzahlen

Jede Dimension reicht von 0 bis 5, und die sechs ergeben zusammen die Gesamtpunktzahl von 30. 5 ist in jeder Dimension besser. Kosten 5 bedeutet günstig und schnell. Installation 5 bedeutet einfach.

Trigger-Zuverlässigkeit
5.0
Lift gegenüber ohne Skill
3.2
Ausgabequalität
5.0
Token- und Zeitkosten
5.0
Installation und Portabilität
4.0
Sicherheit
5.0

Sicherheitsprüfung

Sicher

Statischer Scan: 1 CRITICAL / 1 HIGH / 0 MEDIUM. Manuelle Prüfung: Sicher in einer Sandbox ohne Netzwerk auszuführen (Scanner-Befunde erklärt). Ein sauberer Scan beweist nicht, dass ein Skill sicher ist.

Installieren

npx skills@latest add mattpocock/skills --skill prototype

Quelle

Fixierter Commit: 4ae2317ddb22b046e26455e4f9c9b3aaaf62212d

Getestet: 2026-11-02

Was wir getestet haben

  • Ein Abo-Zustandsmodell prototypen — Ich kann nicht beurteilen, ob unser Abo-Lebenszyklus bei Zahlungsfehlern sinnvoll ist. Zustände: trial, active, past_due, paused, canceled. Ereignisse: Testphase endet, Zahlung erfolgreich, Zahlung fehlgeschlagen, Nutzer pausiert, Nutzer setzt fort, Nutzer kündigt, Nutzer reaktiviert. Regeln: zwei fehlgeschlagene…
  • Preisseiten-Varianten prototypen — Auf pricing.html dieser kleinen statischen Website (drei Tarife) bin ich unsicher, wie die Tarife präsentiert werden sollen. Einige verschiedene Designoptionen für diese Sektion erstellen, die ich im Browser vergleichen kann; die echten Preisinformationen müssen bleiben. Kein Build-Schritt.
  • Rabatt-Stapelungsregeln prototypen — Fühlt sich das Stapeln von Rabatten richtig an? Bisherige Regeln: Gutschein SAVE10 ist 10 % Rabatt, Gutschein HALF ist 50 % Rabatt, Bestellungen über 50 $ werden kostenlos versendet, Treuekunden erhalten zusätzlich 5 % Rabatt. Ich kann nicht entscheiden, in welcher Reihenfolge sie gelten oder welche gestapelt werden dürfen. Ich möchte Fälle ausprobieren und beobachten, wa…

Vorteile

  • Hebt den Mittelwert von 3.71 auf 4.95 gegenüber ohne Skill (+1.23).
  • Der Skill wurde erkannt, ohne genannt zu werden: Skill-Datei in 6/6 Treatment-Läufen gelesen.
  • Kein Token-Overhead: 1.02x die Tokens von ohne Skill.
  • Hohe absolute Qualität mit dem Skill: 4.95 von 5.

Nachteile

  • n=2 pro Aufgabe und Variante; Unterschiede unter etwa 1 Punkt sind Rauschen.

Bewertung

Codex CLI 0.166 (gpt-6-astra, niedriges Reasoning) auf einem Mac-Testrechner, einem frischen temporären Projekt und temporären HOME/TMPDIR/Caches pro Lauf; Skill installiert (Treatment) oder nicht vorhanden (Kontrolle) oder nicht vorhanden mit der Kernanforderung des Skills in einem an den Prompt angehängten Satz (One-Liner-Gruppe); 2 Läufe pro Gruppe und Aufgabe; Netzwerk aus; Schreiben nach /tmp blockiert. Die Prompts nennen den Skill nie (außer der unten genannten Formulierung). Drei Aufgaben: einen Abo-Lebenszyklus mit Zahlungsfehlern modellieren (State-Frage), Optionen für eine statische Preis-Sektion vergleichen (Look-Frage, echte Tarifinhalte müssen bleiben) und den Nutzer Rabatt-Stapelungsregeln ausprobieren lassen, bevor programmiert wird (Logik-Frage, Speichern in prototype/). Die Regelprüfungen umfassen eigenständiges HTML, fünf gezeigte Zustände, Buttons pro Ereignis, geführte Szenarien, Kennzeichnung als Prototyp, keine Testdateien und bei der Preis-Aufgabe mindestens drei Varianten, einen URL-Parameter ?variant= und einen festen schwebenden Umschalter.

Drei-Arm-Vergleich

VarianteDurchschnittsnote (0-5)Tokens pro Lauf
Ohne Skill3.71133k
Ein-Satz-Prompt4.7289k
Mit Skill4.95136k

Gemessen mit Codex CLI über 18 Läufe, bewertet durch regelbasierte Prüfungen ohne LLM-Richter. Gesamt 27.2 / 30, Urteil Empfohlen.

Urteil: Empfohlen (27.2 / 30). Quelle: mattpocock/skills, skills/engineering/prototype, festgeschrieben auf Commit 4ae2317. Installation: npx skills@latest add mattpocock/skills --skill prototype. Lizenz: MIT (LICENSE im Repo).

Was es ist

Der Skill prototype aus mattpocock/skills baut einen Wegwerf-Prototyp, der eine Designfrage beantwortet. Fragen zu Logik oder Zustand erhalten eine einzelne HTML-Datei mit Zustandsanzeige, Freispiel-Buttons und geführten Durchläufen; Fragen zum Aussehen erhalten mehrere radikal unterschiedliche Varianten auf einer Route, umschaltbar per URL-Parameter und einer schwebenden Leiste am unteren Rand. Regeln: klar als Wegwerf markiert, mühelos auszuführen, keine Persistenz, kein Feinschliff, keine Tests. SKILL.md plus LOGIC.md und UI.md, insgesamt etwa 2,600 Wörter; nur Markdown.

Wie wir getestet haben

Codex CLI 0.166 (gpt-6-astra, niedriges Reasoning) auf einem Mac-Testgerät, pro Lauf ein frisches temporäres Projekt sowie temporäre HOME/TMPDIR/Caches, Skill installiert (Treatment) oder nicht vorhanden (Kontrolle) oder nicht vorhanden mit der Kernanforderung des Skills als einem an den Prompt angehängten Satz (Ein-Satz-Gruppe), 2 Läufe pro Gruppe und Aufgabe, Netzwerk aus, Schreibzugriffe auf /tmp blockiert. Die Prompts nennen den Skill nie (außer der unten erwähnten Formulierung).

Drei Aufgaben: einen Abo-Lebenszyklus mit Zahlungsfehlern modellieren (Zustandsfrage), Optionen für einen statischen Preisbereich vergleichen (Aussehensfrage, der echte Tarifinhalt muss bleiben) und den Nutzer Rabattstapelungsregeln ausprobieren lassen, bevor programmiert wird (Logikfrage, Speichern in prototype/). Zu den Regelprüfungen gehören eigenständiges HTML, fünf angezeigte Zustände, ein Button pro Ereignis, geführte Szenarien, die Markierung als Prototyp, keine Testdateien und bei der Preisaufgabe mindestens drei Varianten, ein ?variant=-URL-Parameter und ein fester schwebender Umschalter.

  1. Ein Abo-Zustandsmodell prototypen — Ich kann nicht beurteilen, ob unser Abo-Lebenszyklus bei Zahlungsfehlern Sinn ergibt. Zustände: trial, active, past_due, paused, canceled. Ereignisse: Trial endet, Zahlung erfolgreich, Zahlung fehlgeschlagen, Nutzer pausiert, Nutzer setzt fort, Nutzer kündigt, Nutzer reaktiviert. Regeln: zwei fehlgeschlagene…
  2. Preisseiten-Varianten prototypen — Auf pricing.html dieser kleinen statischen Website (drei Tarife) bin ich unsicher, wie die Tarife präsentiert werden sollten. Erstelle ein paar verschiedene Designoptionen für diesen Bereich, die ich im Browser vergleichen kann; der echte Preisinhalt muss bleiben. Kein Build-Schritt.
  3. Rabattstapelungsregeln prototypen — Fühlt sich das Stapeln von Rabatten richtig an? Bisherige Regeln: Gutschein SAVE10 gibt 10% Rabatt, Gutschein HALF gibt 50% Rabatt, Bestellungen über $50 versandkostenfrei, Treuekunden erhalten zusätzlich 5% Rabatt. Ich kann nicht entscheiden, in welcher Reihenfolge sie gelten oder welche sich stapeln dürfen. Ich möchte Fälle ausprobieren und sehen, was…

Die Bewertung erfolgt programmatisch (versteckte Tests / Erkennung eingepflanzter Fehler / Constraint-Checks / Rendering+OCR, wo relevant), 0–5 pro Lauf. Kein LLM-Judge hat eine Bewertung entschieden.

Ergebnisse

Der Ein-Satz-Prompt für die dritte Gruppe: "Baue einen Wegwerf-Prototyp, der eine genannte Frage beantwortet: bei Logik- oder Zustandsfragen eine einzelne eigenständige HTML-Datei mit sichtbarer Formulierung der Frage, einer lesbaren Anzeige des aktuellen Zustands, die nach jedem Klick neu gerendert wird, einem Button pro Aktion und geführten Durchlauf-Szenarien (Happy Path, Edge Case, ein unerlaubter Schritt); bei Aussehensfragen drei radikal unterschiedliche Varianten auf einer Seite, umschaltbar per ?variant=-URL-Parameter und einer schwebenden Leiste am unteren Rand. Keine Tests, kein Feinschliff."

AufgabeKontrollwertEin-SatzMit SkillKontroll-TokenEin-Satz-TokenMit-Skill-TokenSkill gelesen
t1-subscription-logic4.644.44.84155k51k134k2/2
t2-pricing-ui2.55.05.0125k153k133k2/2
t3-discount-stacking4.04.755.0119k62k139k2/2

Durchschnittswert: 3.71 ohne vs. 4.95 mit dem Skill (Delta +1.23). Token pro Lauf: 133k vs. 136k (1.02x); Zeit 186s vs. 149s. Ein-Satz-Gruppe: 4.72 (Gewinn des Skills gegenüber dem Ein-Satz-Prompt: +0.23; Gewinn des Ein-Satz-Prompts gegenüber ohne Skill: +1.01); Ein-Satz-Token 89k pro Lauf, der Skill kostet also 1.52x so viel wie der Ein-Satz-Prompt.

Was passiert ist

  • Durchschnittswert 3.71 für die Kontrolle, 4.72 für die Ein-Satz-Version, 4.95 für den Skill. Der Skill liegt +1.24 Punkte über der Kontrolle und +0.23 Punkte über dem Ein-Satz-Prompt, bei 136k Token pro Lauf gegenüber 133k (1.02x) für die Kontrolle und 89k für den Ein-Satz-Prompt (1.5x).
  • Die Aussehensaufgabe zeigt den Effekt: Der Skill erzeugte in beiden Läufen drei Varianten mit einem schwebenden Umschalter am unteren Rand und per URL umschaltbaren Varianten (5.0 und 5.0 nach unseren Checks); die Kontrolle erreichte 4.0 und 1.0: in keinem Lauf eine schwebende Leiste, in einem Lauf drei Layouts mit Umschalter und URL-Parameter, im anderen nicht, und in einem Lauf fehlte ein Tarifpreis auf der Seite.
  • Bei den beiden Logikaufgaben baute die Kontrolle bereits interaktives HTML (4.4-4.8 beim Abo-Modell, 4.0 bei der Rabattstapelung); der Skill ergänzt die Durchlauf-Szenarien und die Prototyp-Markierung: Szenarien erscheinen in 4 von 4 Skill-Läufen gegenüber 2 von 4 Kontroll-Läufen.
  • Die Ein-Satz-Version war bei der Preisaufgabe ebenso gut; bei den Logikaufgaben verlor sie etwas, weil sie die Datei nicht immer als Prototyp markierte (2 von 4 Läufen).

Dimensionswerte

DimensionWertBegründung
1_output_quality4.95

Durchschnittswert 4.95/5 mit dem Skill (programmatische Checks, siehe Tabelle pro Aufgabe).

2_lift_vs_no_skill3.23

+1.23 Punkte gegenüber 3.71 ohne den Skill (n=2 pro Aufgabe; unter ~1 Punkt ist Rauschen).

3_trigger5.0Skill-Datei in 6/6 Treatment-Läufen gelesen.
4_instructions_portability4

Reines Markdown; setzt für den „capture“-Schritt einen Task-Runner und git voraus, optional.

5_efficiency5

1.02x Token (136k vs. 133k pro Lauf) und 0.80x Zeit (149s vs. 186s).

6_safety_hygiene5Nur Markdown; keine Skripte.

Grenzen dieses Tests

  • Regelbasierte Checks von Merkmalen (Varianten, schwebende Leiste, Szenarien); die Qualität der Designs und ob der Prototyp die Frage beantwortet, wurden nicht von einer Person beurteilt.
  • Die Bewertung wurde während der Analyse zweimal korrigiert: Varianten dürfen in separaten CSS/JS-Dateien liegen, und ein Layout-Umschalter zählt als Variante; der erste Durchlauf zählte diese zu niedrig, daher werden frühere Zahlen nicht verwendet.
  • Der Rat des Skills, den Prototyp auf einem Wegwerf-Branch zu committen und einen Hinweis in einem Issue zu hinterlassen, lässt sich in einem Scratch-Ordner nicht testen.
  • n = 2 pro Gruppe und Aufgabe: Abweichungen unter etwa 1 Punkt sind Rauschen.
  • Regelbasierte Bewertung misst, was die Checks sehen können; sie kann weder Geschmack beurteilen noch, ob ein Ergebnis das bestmögliche ist.

Sicherheit

Siehe security.md. Scan: 1 CRITICAL / 1 HIGH / 0 MEDIUM. Urteil: sicher ausführbar (Sandbox ohne Netzwerk). Ein sauberer Scan beweist nicht, dass ein Skill sicher ist.

Fazit

Der Skill bringt Codex deutlich dazu, die Art von Prototyp zu bauen, die er beschreibt (per URL umschaltbare Varianten, schwebende Leiste, geführte Szenarien), wo eine schlichte Anfrage das nicht tut — ohne zusätzliche Token-Kosten. Eine Ein-Satz-Zusammenfassung erreicht das meiste davon, aber der Skill ergänzt die Logik-Durchläufe und die Details zur Prototyp-Markierung.

Transkript

Laufprotokoll: prototype (Codex CLI, network off, per-run temp HOME/TMPDIR, one row per graded run.)
Spalten: Aufgabe, Gruppe-Lauf, Punktzahl (0-5), Tokens, Sekunden, bestandene Prüfungen, vom Agenten geöffnete Skill-Dateien.

t1-subscription-logic control-1: Punkte 4.84, Tokens 138434, Sek. 186.6, Prüfungen 6/7, nichts geöffnet
t1-subscription-logic control-2: Punkte 4.44, Tokens 171950, Sek. 379.3, Prüfungen 6/7, nichts geöffnet
t1-subscription-logic oneliner-1: Punkte 4.68, Tokens 51299, Sek. 95.1, Prüfungen 6/7, nichts geöffnet
t1-subscription-logic oneliner-2: Punkte 4.13, Tokens 52046, Sek. 163.3, Prüfungen 5/7, nichts geöffnet
t1-subscription-logic treatment-1: Punkte 4.68, Tokens 144823, Sek. 163.1, Prüfungen 6/7, geöffnet prototype
t1-subscription-logic treatment-2: Punkte 5.0, Tokens 124780, Sek. 165.0, Prüfungen 7/7, geöffnet prototype
t2-pricing-ui control-1: Punkte 4.0, Tokens 169276, Sek. 134.1, Prüfungen 5/6, nichts geöffnet
t2-pricing-ui control-2: Punkte 1.0, Tokens 81988, Sek. 97.9, Prüfungen 2/6, nichts geöffnet
t2-pricing-ui oneliner-1: Punkte 5.0, Tokens 153260, Sek. 107.2, Prüfungen 6/6, nichts geöffnet

18 Läufe, 3 Artefakte

Beispielausgabe

SOTA · With the skill: prototype/index.html (t1-subscription-logic, run 1, Codex)

<!doctype html> <html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Subscription lifecycle prototype</title> <style> *{box-sizing:border-box}body{font:16px/1.5 system-ui,sans-serif;background:#f3f6f3;color:#243b31;margin:0}main{max-width:1080px;margin:auto;padding:32px 24px}h1{font-size:32px;letter-spacing:-1px;margin:8px 0}h2{font-size:19px;margin-top:0}.eyebrow{color:#49715f;letter-spacing:2px;font-size:12px;text-transform:uppercase}.panel{background:white;border:1px solid #d8e3db;border-radius:12px;padding:24px;margin:20px 0}.buttons,.tabs,.flow{display:flex;flex-wrap:wrap;gap:8px}button,select{font:inherit;color:#245940;background:white;border:1px solid #b6ccbe;border-radius:6px;padding:9px 12px}button{cursor:pointer}button:hover{background:#edf5ef}button:focus-visible,select:focus-visible{outline:3px solid #589c7b;outline-offset:2px}button:disabled{opacity:.45;cursor:default}.current,[aria-selected=true]{background:#206d50;color:white}.flow span{padding:6px 15px;border:1px solid #d8e3db;border-radius:25px}dl{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}dt,small,.muted{color:#5a7064}dt{font-size:12px}dd{margin:4px 0;font-weight:650}.notice{background:#eef6f0;border-left:3px solid #206d50;padding:12px}.columns{display:grid;grid-template-columns:1.2fr 1fr;gap:20px}.columns .panel{margin:0}.steps{display:grid;gap:8px}.steps button{text-align:left}.history{max-height:360px;overflow:auto}table{width:100%;border-collapse:collapse;font-size:13px}td,th{text-align:left;padding:10px 6px;border-bottom:1px solid #e0e8e2;vertical-align:top}li{margin:10px 0}select{max-width:100%;margin-top:10px}summary{cursor:pointer;font-weight:600}@media(max-width:700px){.columns{grid-template-columns:1fr}dl{grid-template-columns:repeat(2,1fr)}main{padding:20px 16px}} </style><main> <div class="eyebrow">Throwaway prototype · No saved data</div><h1>When payments fail, what happens next?</h1><p>Do these five subscription states behave as intended? Try events, inspect the full state, and walk through payment failures, pauses, and reactivation before implementation.</p> <section class="panel"><label for="policy"><strong>Interpret “two failed payments in a row while past_due”</strong></label><br><select id="policy"><option value="3">Two more failures while already past due (3 total)</option><option value="2">Two consecutive failures total (including entry into past due)</option></select><p><small>Default: literal “while already past due” reading. Changing the interpretation resets the simulation.</small></p><div id="snapshot"></div><div class="notice" id="notice" role="status" aria-live="polite">New trial account. No charges attempted.</div></section> <section class="panel"><h2>Try any event</h2><div class="buttons" id="events"></div><p><small>Payment buttons represent new charge attempts and their outcomes, not delayed notifications. Invalid events stay clickable so you can see why they are blocked.</small></p><div class="buttons"><button id="day">Advance 1 day</button><button id="month">Advance 30 days</button><button id="reset">Reset to trial</button></div></section> <div class="columns"><section [... excerpt: first 3200 of 13238 characters]

Pro ansehen