# HTML Demo Pattern Mining

> Use al minar ideas de colecciones de demos HTML.

- Skill: `ntizar/html-demo-pattern-mining` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add ntizar/html-demo-pattern-mining`
- Raw SKILL.md: https://api.skillmd.com/api/skills/ntizar/html-demo-pattern-mining/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: MIT
- Author: ntizar (https://skillmd.com/u/ntizar)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/ntizar/html-demo-pattern-mining

---


# Html Demo Pattern Mining — Extraer ideas de colecciones de demos

Cuando David manda "pilla este GitHub para copiar ideas" / "graba este repo" y es una **colección de N piezas HTML autocontenidas** (cada una un único `.html` con CSS/JS inline), el objetivo no es clonar el repo sino **minar el catálogo y las técnicas reutilizables**.

## When to Use
- Repos/páginas GitHub Pages del estilo "GPT-6-Astra · 100 HTML Files", "54 design systems", "N one-page experiments".
- Cualquier colección de demos HTML single-file (arte generativo, layout editorial, juguetes de física, interfaces).

## Flujo (comprobado con 100 piezas)

1. **Fetch del index con curl** — `web_extract`/Firecrawl suele devolver **403 sin API key**; `curl -sL <url> -o index.html` funciona directo. El index es un catálogo HTML, no una app.

2. **Parsear las cards** con regex + `html.unescape`. Estructura de card (`<article class="card">`):
   - número: `<span class="num">NNN</span>`
   - título: `<div class="title"><a href="...">TITULO</a></div>`  ← **NO es h2/h3** (regex h2/h3 devuelve vacío)
   - descripción: `<p class="desc">...</p>`
   - prompt original: `<details class="prompt"><blockquote>...</blockquote></details>`
   - Limpiar: quitar tags, unescape, colapsar espacios. Guardar `catalog.json` (num/title/desc/prompt).

3. **Derivar base names** de los `href="NNN-slug.html"` (el index lista cada pieza 2 veces: thumb + botón Open → dedupe, preservar orden).

4. **Descarga masiva** de todos los `.html` + `.txt` (prompts) con `xargs -P 10`:
   ```bash
   cat bases.txt | xargs -P 10 -I{} sh -c 'curl -sL "BASE_URL/{}.html" -o "$0/{}.html" && curl -sL "BASE_URL/{}.txt" -o "$0/{}.txt"' "$DEST"
   ```
   Cada archivo suele ser ~5KB → todo el set son ~1-2MB.

5. **Contar técnicas** con un contador de regex sobre todos los `.html` descargados → tabla de frecuencia (qué patrones se repiten y en qué %). Ver `references/pattern-taxonomy.md` para la taxonomía resultante.

6. **Digerir por tema** (paisaje procedural, arte generativo/canvas, editorial, instrumento/dashboard, juguetes, objetos/museo, rituales, transporte/mapas) y destacar los alineados con los proyectos de David (mapas, tránsito, dashboards de datos → instrumento elegante).

## Pitfalls
- **Firecrawl/web_extract 403** sin API key → usar `curl` directamente sobre el index.
- **Título no está en h2/h3** → está en `<div class="title"><a>`. No perder tiempo con h2/h3.
- **Duplicados en hrefs** → cada pieza sale 2 veces en el index; dedupe con preservación de orden.
- **Windows**: pasar rutas nativas `C:/Users/...` a `curl`/xargs (no `/c/Users/...`); usar `$0` para el destino dentro del `sh -c`.
- **catalog.json**: si el parseo se reescribe sin `prompt_file`, re-derivar bases desde los hrefs del index.

## Referencia
- `references/pattern-taxonomy.md` — taxonomía de técnicas CSS/JS con % de frecuencia sobre un set de 100 piezas + piezas destacadas por categoría.