parthkapoor15/skill-library

Hairline: crear una figura

Estás creando una figura en el estilo Hairline: un dibujo isométrico de línea, construido a partir de sólidos redondeados en un solo trazo, que responde al puntero. Se entrega como un archivo HTML sin necesidad de instalación. Las seis figuras de @lucasmarkes/hairline son la referencia; examples/terrain.js y examples/riffle.js son dos de ellas, en el formato que escribirás.

Escribes una sola cosa: la figura. El motor (kernel.js) y la página (bench.html) son fijos. Nunca los edites, nunca pegues una copia modificada de ellos, y nunca escribas de nuevo lo que el kernel ya te proporciona.

Cada archivo mencionado a continuación está en la carpeta de esta skill. La figura y la página se escriben en el directorio de trabajo de la persona: ejecuta build.mjs, validate.mjs y look.mjs desde allí, usando su ruta en esta carpeta.

0. Fuente

Solo cuando la solicitud vino con un archivo .svg. Ejecuta node read.mjs <archivo.svg>: escribe el SVG como una imagen y una tarjeta de lo que midió, ambos en el directorio de trabajo. Luego lee source.md y responde sus preguntas. El objeto y sus partes ahora están fijos: cada concepto en el paso 1 los mantiene.

1. Concepto

Lee concepts.md. Tiene una sección para un estado vacío y una para una figura dibujada a partir de una marca. Luego ofrece dos o tres conceptos, una línea cada uno:

Nombre. El objeto. Lo que el puntero le hace. Lo que dice la lectura. Dónde se detiene el tour.

Espera a que la persona elija. Omite este paso solo si llegaron con el objeto y el gesto ya elegidos. Si no hay a quién preguntar, toma el concepto con la pose de reposo más fuerte y di cuál elegiste.

Con una fuente (paso 0), cada concepto mantiene el objeto y sus partes: se diferencian en el gesto, o, cuando el gesto vino con la solicitud, en la forma y la lectura.

Una figura, una idea. Un concepto que necesita una etiqueta para ser entendido aún no es un concepto.

2. Construcción

1. Lee rules.md. Las diez reglas no son consejo: una figura que rompe una no está terminada.
2. Lee el índice al principio de kernel.js: el comentario debajo de la línea de hash, hasta var HL. Enumera todo lo que puedes llamar. No leas el código debajo.
3. Lee el ejemplo más cercano a tu concepto: examples/terrain.js para un campo continuo, examples/riffle.js para elementos discretos.
4. Escribe la figura como <nombre>.js en el directorio de trabajo de la persona, con la forma de los ejemplos: toma lo que necesites de HL, define mount({ stage, svg, read }, value) que devuelve { set, destroy }, y termina el archivo con hairline({ name, means, rules, range, tour, mount }).
   • name: minúsculas, una palabra o con guiones.
   • means: una oración, máximo 140 caracteres, que diga lo que muestra la figura. Es la línea debajo del escenario.
   • rules: los números de las reglas en las que más se apoya esta figura.
   • range: el único número que controla el deslizador, en intensidad 0, 0.5 y 1. El del medio es el predeterminado, y los tres se mueven en una dirección. El value de mount, y el value que recibe set(value) cuando se mueve el deslizador, es este número: el propio de la figura, leído en range, no de 0 a 1.
   • tour: los tres a seis puntos viewBox que visita el puntero invisible cuando la página se reproduce, o null para omitir; la vuelta que ve un extraño sin manos en la página. Números literales [x, y], al menos uno de ellos un punto. La figura nunca se reproduce sola: el botón de reproducción de la página y el paquete lo hacen.
5. Ensámblalo: node build.mjs <nombre>.js escribe hairline-<nombre>.html, y lo mismo hace cada ejecución de look.mjs en el paso 3. Sin Node, copia bench.html y coloca el contenido de kernel.js donde está /*KERNEL*/ y tu figura donde está /*FIGURE*/, mediante operación de archivos, sin cambiar nada más.

3. Verificación

1. node look.mjs <nombre>.js --answer x,y,z --edge x,y,z, y --source <archivo.svg> cuando lo haya, siendo los puntos puntos del mundo de tu figura, como dice look.md. Construye la página, la valida, toma las ocho imágenes en una hoja, hairline-<nombre>-look.png, y verifica el marco, la lectura y la consola. Corrige cada línea que imprima como fallida, y ejecútalo de nuevo hasta que salga con código 0.
2. Lee look.md, luego la hoja, y responde sus preguntas. Corrige lo que falle, luego vuelve al paso 1.

look.mjs necesita un navegador e instala playwright-core una vez, fuera de esta carpeta. Sin uno, verifica con node validate.mjs hairline-<nombre>.html después de cada construcción y haz la verificación visual como dice look.md en "Sin un navegador". Sin Node, lee la lista de comprobaciones al principio de validate.mjs y responde cada una desde tu código.

No entregues una página que el validador rechace. No digas que la verificación visual está hecha si no miraste.

4. Entrega

Publica hairline-<nombre>.html como un artefacto si puedes. Si no puedes, deja el archivo donde la persona pueda abrirlo y di dónde está. Luego di, una línea cada una:

• la metáfora: qué es el objeto, y qué hace el puntero con él;
• las reglas en las que se apoya;
• el tour: dónde se detiene, en orden;
• cualquier cosa que no pudiste verificar (sin Node, sin navegador), claramente.

Luego pídele a la persona que presione reproducir en la página, o que la abra con ?play=1, y que diga si la vuelta cuenta la historia de la figura. Si no hay a quién preguntar, di que el tour no fue juzgado.

5. Ajuste

Cuando la persona pida un cambio, edita solo <nombre>.js, luego ejecuta look.mjs de nuevo y lee la nueva hoja. La décima versión se mantiene con el mismo estándar que la primera. Un cambio en la vuelta es un cambio solo en tour.

Lo que sale mal

Si te encuentras haciendo	Haz esto en su lugar
agregar una etiqueta, un número o una letra al dibujo	dilo con geometría (regla 10); los nombres van a read.textContent
usar un color, un relleno o un brillo	mueve un trazo de sil a hi (regla 04)
escribir un temporizador, un requestAnimationFrame o una animación CSS	register(stage, tick), con resortes o interpolaciones (reglas 07 y 08)
probar el puntero contra lo que está dibujado ahora	pruébalo contra la pose de reposo o la pose objetivo (regla 01)
dibujar una caja con doce bordes	prism de dos anillos redondeados: una silueta y un pliegue (regla 09)
dibujar una parte como un bloque redondeado simple	dale las características que la hacen ser lo que es, las que nombrabas en el concepto (concepts.md)
dejar el reposo plano, vacío o simétrico porque era fácil	compónlo: el reposo es la miniatura (regla 05)
estampar una marca en una caja para decir de quién es	construye la marca como el objeto, o déjala fuera (concepts.md, "Desde una marca")
editar el kernel o el banco de pruebas para que algo funcione	la figura está mal; cambia la figura
hacer que el tour visite cada parte por turno	tres paradas que cada una muestre una respuesta diferente, luego una salida: una vuelta es una oración, no un inventario
dejar entrar una segunda idea	córtala: una figura, una idea
trazar un camino desde el SVG, o copiar sus coordenadas	construye la parte como un sólido con las proporciones que da la tarjeta (source.md)
mantener una parte del SVG que es decoración	suéltala: dos o tres partes hacen el objeto