prototype (mattpocock/skills)
Construye un prototipo desechable para resolver una duda de diseño sobre lógica de estado o dirección de interfaz.
el prototype de Matt Pocock: cumple sus propias reglas de variantes de interfaz (4.95 frente a 3.71 del control) con un coste similar al de sin skill
Codex CLI · gpt-6-astra
27.2 / 30
Mejora frente a sin skill: +1.23 · Recomendada · 18 ejecuciones
Recomendada: el total 27.2/30 es al menos 22, la calidad de salida 5.0 es al menos 3.5 y la mejora +1.23 es al menos +1.0.
SOTA
AprobadaProbada con Codex.
Cubre Codex, Claude Code
Codex CLI 0.166 (nivel SOTA): 18 ejecuciones puntuadas. Una pasada aquí también cubre Claude Code según nuestra regla de niveles; no dice nada sobre el segundo nivel.
Puntuaciones
Cada dimensión va de 0 a 5 y las seis suman el total sobre 30. 5 es mejor en todas las dimensiones. Coste 5 significa barato y rápido. Instalación 5 significa fácil.
- Fiabilidad de activación
- 5.0
- Mejora frente a sin skill
- 3.2
- Calidad de salida
- 5.0
- Coste en tokens y tiempo
- 5.0
- Instalación y portabilidad
- 4.0
- Seguridad
- 5.0
Revisión de seguridad
SeguraEscaneo estático: 1 CRITICAL / 1 HIGH / 0 MEDIUM. Revisión manual: Segura para ejecutar en un sandbox sin red (hallazgos del escáner explicados). Un escaneo limpio no demuestra que una skill sea segura.
Instalar
npx skills@latest add mattpocock/skills --skill prototype
Commit fijado: 4ae2317ddb22b046e26455e4f9c9b3aaaf62212d
Probada: 2026-11-02
Qué probamos
- Prototipar un modelo de estados de suscripción — No sé si nuestro ciclo de vida de suscripción tiene sentido cuando fallan los pagos. Estados: trial, active, past_due, paused, canceled. Eventos: termina la prueba, el pago se completa, el pago falla, el usuario pausa, el usuario reanuda, el usuario cancela, el usuario reactiva. Reglas: dos fallos…
- Prototipar variantes de la página de precios — En pricing.html de este sitio estático pequeño (tres planes) no tengo claro cómo deberían presentarse los planes. Crea varias opciones de diseño distintas de esa sección que pueda comparar en el navegador; el contenido real de los precios debe mantenerse. Sin paso de compilación.
- Prototipar reglas de acumulación de descuentos — ¿Tiene sentido acumular descuentos? Reglas actuales: el cupón SAVE10 es un 10% de descuento, el cupón HALF es un 50% de descuento, los pedidos de más de $50 tienen envío gratis y los miembros del programa de fidelidad obtienen un 5% adicional. No consigo decidir en qué orden se aplican ni cuáles pueden acumularse. Quiero probar casos y ver qué…
Ventajas
- Eleva la puntuación media de 3.71 a 4.95 frente a sin skill (+1.23).
- La skill se activó sin nombrarla: se leyó el archivo de la skill en 6/6 ejecuciones con skill.
- Sin sobrecoste de tokens: 1.02x los tokens de sin skill.
- Calidad absoluta alta con la skill: 4.95 sobre 5.
Inconvenientes
- n=2 por tarea y rama; las diferencias de menos de aproximadamente 1 punto son ruido.
Reseña
Codex CLI 0.166 (gpt-6-astra, razonamiento bajo) en una máquina de prueba Mac, con un proyecto temporal nuevo y HOME/TMPDIR/cachés temporales en cada ejecución, la skill instalada (grupo con skill), sin ella (control) o sin ella pero con el requisito central de la skill comprimido en una frase añadida al prompt (grupo del prompt de una frase), 2 ejecuciones por grupo y tarea, red desactivada y escrituras en /tmp bloqueadas. Los prompts nunca mencionan la skill (salvo la formulación indicada más abajo). Tres tareas: modelar un ciclo de vida de suscripción con fallos de pago (cuestión de estados), comparar opciones para una sección de precios estática (cuestión de aspecto; el contenido real de los planes debe mantenerse) y dejar que el usuario pruebe reglas de acumulación de descuentos antes de programar (cuestión de lógica; guardar en prototype/). Las comprobaciones de reglas incluyen HTML autocontenido, cinco estados mostrados, botones por evento, escenarios guiados, marcado como prototipo, ningún archivo de test y, para la tarea de precios, al menos tres variantes, un parámetro de URL ?variant= y un conmutador flotante fijo.
Comparación de tres ramas
| Rama | Puntuación media (0-5) | Tokens por ejecución |
|---|---|---|
| Sin la skill | 3.71 | 133k |
| Prompt de una frase | 4.72 | 89k |
| Con la skill | 4.95 | 136k |
Medido con Codex CLI en 18 ejecuciones, puntuado con comprobaciones basadas en reglas y sin juez LLM. Total 27.2 / 30, veredicto Recomendada.
Veredicto: Recomendada (27.2 / 30). Fuente: mattpocock/skills, skills/engineering/prototype, fijada en el commit 4ae2317. Instalación: npx skills@latest add mattpocock/skills --skill prototype. Licencia: MIT (LICENSE del repositorio).
Qué es
La skill prototype de mattpocock/skills: crea un prototipo desechable que responde a una pregunta de diseño. Las preguntas de lógica o estado reciben un único archivo HTML con un panel de estado, botones de juego libre y recorridos guiados; las preguntas de aspecto reciben varias variantes radicalmente distintas en una misma ruta, conmutadas con un parámetro de URL y una barra flotante inferior. Reglas: marcado claramente como desechable, trivial de ejecutar, sin persistencia, sin pulido, sin tests. SKILL.md más LOGIC.md y UI.md, unas 2,600 palabras en total; solo Markdown.
Cómo lo probamos
Codex CLI 0.166 (gpt-6-astra, razonamiento bajo) en un Mac de pruebas, un proyecto temporal nuevo y HOME/TMPDIR/cachés temporales por ejecución, skill instalada (tratamiento) o ausente (control) o ausente con el requisito central de la skill comprimido en una frase añadida al final del prompt (grupo de una frase), 2 ejecuciones por grupo y tarea, red desactivada, escrituras en /tmp bloqueadas. Los prompts nunca mencionan la skill (salvo la formulación indicada abajo).
Tres tareas: modelar un ciclo de vida de suscripción con fallos de pago (pregunta de estado), comparar opciones para una sección de precios estática (pregunta de aspecto, el contenido real de los planes debe mantenerse) y dejar que el usuario pruebe reglas de acumulación de descuentos antes de programar (pregunta de lógica, guardar en prototype/). Las comprobaciones de reglas incluyen HTML autocontenido, cinco estados mostrados, botones por evento, escenarios guiados, marcado como prototipo, sin archivos de test y, para la tarea de precios, al menos tres variantes, un parámetro de URL ?variant= y un conmutador flotante fijo.
- Prototipar un modelo de estados de suscripción — No sé si nuestro ciclo de vida de suscripción tiene sentido cuando fallan los pagos. Estados: trial, active, past_due, paused, canceled. Eventos: termina el trial, el pago se realiza, el pago falla, el usuario pausa, el usuario reanuda, el usuario cancela, el usuario reactiva. Reglas: dos fallos…
- Prototipar variantes de la página de precios — En pricing.html de este pequeño sitio estático (tres planes) no tengo claro cómo presentar los planes. Haz varias opciones de diseño distintas de esa sección que pueda comparar en el navegador; el contenido real de precios debe mantenerse. Sin paso de build.
- Prototipar reglas de acumulación de descuentos — ¿La acumulación de descuentos se siente bien? Reglas hasta ahora: el cupón SAVE10 es un 10% de descuento, el cupón HALF es un 50%, los pedidos de más de $50 envían gratis, los miembros del programa de fidelidad tienen un 5% extra. No consigo decidir en qué orden se aplican ni cuáles pueden acumularse. Quiero probar casos y ver qué…
La puntuación es programática (tests ocultos / detección de problemas sembrados / comprobaciones de restricciones / renderizado + OCR cuando corresponde), 0–5 por ejecución. Ningún juez LLM decidió ninguna puntuación.
Resultados
La frase única que recibió el tercer grupo: "Crea un prototipo desechable que responda a una pregunta concreta: para preguntas de lógica o estado, un único archivo HTML autocontenido con un enunciado visible de la pregunta, un panel legible del estado actual que se vuelva a renderizar tras cada clic, un botón por acción y escenarios de recorrido guiado (camino feliz, caso límite, una acción ilegal); para preguntas de aspecto, tres variantes radicalmente distintas en una página, conmutadas por un parámetro de URL ?variant= y una barra flotante inferior. Sin tests, sin pulido."
| Tarea | Puntuación control | Una frase | Con la skill | Tokens control | Tokens de una frase | Tokens con la skill | Skill leída |
|---|---|---|---|---|---|---|---|
| t1-subscription-logic | 4.64 | 4.4 | 4.84 | 155k | 51k | 134k | 2/2 |
| t2-pricing-ui | 2.5 | 5.0 | 5.0 | 125k | 153k | 133k | 2/2 |
| t3-discount-stacking | 4.0 | 4.75 | 5.0 | 119k | 62k | 139k | 2/2 |
Puntuación media: 3.71 sin vs 4.95 con la skill (delta +1.23). Tokens por ejecución: 133k vs 136k (1.02x); tiempo 186s vs 149s. Grupo de una frase: 4.72 (la ganancia de la skill sobre la frase única: +0.23; la ganancia de la frase única sobre sin skill: +1.01); tokens de la frase única 89k por ejecución, así que la skill cuesta 1.52x la frase única.
Qué ocurrió
- Puntuación media 3.71 para el control, 4.72 para la versión de una frase, 4.95 para la skill. La skill está +1.24 sobre el control y +0.23 sobre la frase única con 136k tokens por ejecución frente a 133k (1.02x) del control y 89k de la frase única (1.5x).
- La tarea de aspecto muestra el efecto: la skill produjo tres variantes con un conmutador flotante inferior y variantes conmutables por URL en ambas ejecuciones (5.0 y 5.0 según nuestras comprobaciones); el control puntuó 4.0 y 1.0: sin barra flotante en ninguna ejecución, tres diseños con un conmutador y un parámetro de URL en una ejecución y no en la otra, y en una ejecución faltaba el precio de un plan en la página.
- En las dos tareas de lógica, el control ya construyó HTML interactivo (4.4-4.8 en el modelo de suscripción, 4.0 en la acumulación de descuentos); la skill añade los escenarios de recorrido y la etiqueta de prototipo: los escenarios aparecen en 4 de 4 ejecuciones con skill frente a 2 de 4 del control.
- La versión de una frase rindió igual en la tarea de precios; perdió un poco en las tareas de lógica por no marcar siempre el archivo como prototipo (2 de 4 ejecuciones).
Puntuaciones por dimensión
| Dimensión | Puntuación | Motivo |
|---|---|---|
| 1_output_quality | 4.95 | Puntuación media 4.95/5 con la skill (comprobaciones programáticas, véase la tabla por tarea). |
| 2_lift_vs_no_skill | 3.23 | +1.23 puntos frente a 3.71 sin la skill (n=2 por tarea; menos de ~1 punto es ruido). |
| 3_trigger | 5.0 | Archivo de la skill leído en 6/6 ejecuciones de tratamiento. |
| 4_instructions_portability | 4 | Markdown simple; da por hecho un task runner y git para el paso de 'capture', opcional. |
| 5_efficiency | 5 | 1.02x tokens (136k vs 133k por ejecución) y 0.80x tiempo (149s vs 186s). |
| 6_safety_hygiene | 5 | Solo Markdown; sin scripts. |
Límites de esta prueba
- Comprobaciones basadas en reglas de características (variantes, barra flotante, escenarios); la calidad de los diseños y si el prototipo responde a la pregunta no fueron juzgadas por una persona.
- La puntuación se corrigió dos veces durante el análisis: las variantes pueden vivir en archivos CSS/JS separados, y un conmutador de diseño cuenta como variante; la primera pasada los subcontó, así que no se usan los números anteriores.
- El consejo de la skill de hacer commit del prototipo en una rama desechable y dejar un puntero en un issue no puede probarse en una carpeta temporal.
- n = 2 por grupo y tarea: las diferencias de menos de ~1 punto son ruido.
- La puntuación basada en reglas mide lo que las comprobaciones pueden ver; no puede juzgar el gusto ni si el resultado es el mejor posible.
Seguridad
Consulta security.md. Escaneo: 1 CRITICAL / 1 HIGH / 0 MEDIUM. Veredicto: segura de ejecutar (sandbox sin red). Un escaneo limpio no demuestra que una skill sea segura.
Conclusión
La skill hace claramente que Codex construya el tipo de prototipo que describe (variantes conmutables por URL, barra flotante, escenarios guiados) donde una petición simple no lo consigue, sin coste extra de tokens. Un resumen de una frase consigue la mayor parte del mismo comportamiento, pero la skill añade los detalles del recorrido de lógica y del etiquetado como prototipo.
Transcripción
Registro de ejecuciones: prototype (Codex CLI, network off, per-run temp HOME/TMPDIR, one row per graded run.) Columnas: tarea, grupo-ejecución, puntuación (0-5), tokens, segundos, comprobaciones superadas, archivos de la skill que abrió el agente. t1-subscription-logic control-1: puntuación 4.84, tokens 138434, s 186.6, comprobaciones 6/7, no abrió nada t1-subscription-logic control-2: puntuación 4.44, tokens 171950, s 379.3, comprobaciones 6/7, no abrió nada t1-subscription-logic oneliner-1: puntuación 4.68, tokens 51299, s 95.1, comprobaciones 6/7, no abrió nada t1-subscription-logic oneliner-2: puntuación 4.13, tokens 52046, s 163.3, comprobaciones 5/7, no abrió nada t1-subscription-logic treatment-1: puntuación 4.68, tokens 144823, s 163.1, comprobaciones 6/7, abrió prototype t1-subscription-logic treatment-2: puntuación 5.0, tokens 124780, s 165.0, comprobaciones 7/7, abrió prototype t2-pricing-ui control-1: puntuación 4.0, tokens 169276, s 134.1, comprobaciones 5/6, no abrió nada t2-pricing-ui control-2: puntuación 1.0, tokens 81988, s 97.9, comprobaciones 2/6, no abrió nada t2-pricing-ui oneliner-1: puntuación 5.0, tokens 153260, s 107.2, comprobaciones 6/6, no abrió nada
18 ejecuciones, 3 artefactos
Resultado de ejemplo
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]