site-signature

Firma del sitio

Ayudas a alguien a rediseñar su sitio personal. El resultado buscado: una primera pantalla que no se ve en ningún otro lugar, y una página que se vea bien tanto en un teléfono pequeño, un portátil, una pantalla 21:9 y un televisor.

Este skill describe una forma de decidir. No proporciona ni plantilla, ni paleta, ni escena prefabricada: todo eso sale de la persona y de su contenido.

Cómo se decide

Cuatro decisiones, tomadas en este orden, cada una validada por la persona antes de pasar a la siguiente.

1. El contenido primero. Se lee lo que el sitio ya dice y se identifica lo que es singular: una frase, un número, un recorrido, una sección que otros sitios no tienen. El rediseño le da más espacio.
2. Una escena, sacada de su vida. Un lugar, un objeto o un fenómeno que la persona conoce de cerca, convertido en una atmósfera (una hora, una luz, profundidad) dentro de un solo material gráfico.
3. Un dato real en la escena. Algo calculado o medido, exacto en el momento en que se mira. Ese detalle es lo que hace volver.
4. Rangos, nunca valores fijos. Cada tamaño tiene un mínimo y un máximo, y la página reacciona a su forma (estrecha, ancha, baja).

Los números ordenan los problemas. Las capturas de pantalla, revisadas por la persona, deciden.

Archivos

• references/decouverte.md: identificar la pila técnica, medir el sitio existente, registrar lo que se conserva. Hacerlo primero.
• references/scene.md: encontrar la escena con la persona y construirla.
• references/responsive.md: las reglas de maquetación y renderizado en todas las pantallas.
• scripts/check-viewports.mjs: pasa una URL por diez tamaños de pantalla, muestra los defectos medibles y una captura por tamaño.

Si el skill ai-patterns-audit está instalado, lee sus references/regles.md antes de escribir front-end y ejecuta su auditoría al final.

Desarrollo

1. Descubrir: pila técnica, organización del repositorio, comandos de desarrollo y despliegue, funciones existentes que preservar (references/decouverte.md).
2. Medir antes de tocar: ejecuta el script sobre el sitio en línea o en el servidor local y guarda las capturas como punto de partida. Resume a la persona lo que ya está bien y lo que frena el sitio, con medidas.
3. Encontrar la escena: haz las preguntas de references/scene.md, una por mensaje. Luego propón tres ideas de dos frases cada una. Nada de código antes de su elección. Si el sitio ya tiene una escena propia, se mantiene: pásala por el filtro de las cuatro condiciones y las reglas de dibujo del mismo archivo, y corrige solo lo que falta (recorte en vertical, dato real, pausa fuera de pantalla).
4. Construir la portada: la escena a pantalla completa, el nombre, dos frases, los enlaces. El resto del contenido comienza debajo de la primera pantalla.
5. Revisar el resto de la página, sección por sección, con references/responsive.md.
6. Verificar: script en el servidor local, lectura de las capturas una por una, luego navegación solo con teclado, y luego movimiento reducido. Muestra las capturas, la persona decide a ojo.

Lo que no se mueve sin acuerdo

• Los textos de la persona. Se desplazan y jerarquizan; una reescritura se pide.
• Los números: exactos, nunca redondeados ni inflados.
• Lo que ya funciona: idiomas, modo claro y oscuro, formulario, medición de audiencia y su consentimiento, flujo RSS, rutas de API, posicionamiento en buscadores.
• La pila técnica actual. Solo se cambia si la persona lo pide.

Lo que está prohibido

• Copiar la escena de otro sitio, incluso si es admirada. Una idea que se parezca a una referencia conocida se descarta.
• Una cuadrícula de tarjetas idénticas para una lista de proyectos o artículos. Cada entrada se lee como texto compuesto: el número o año en grande, el título, una línea de consecuencia.
• Una etiqueta en mayúsculas espaciadas encima de cada bloque. Una por pantalla como máximo, cuando aporta información.
• El mismo fundido de entrada en cada sección, un hover que levanta, un halo que pulsa.
• Un degradado o brillo decorativo fuera de la escena.
• Una dependencia pesada para la escena. Un canvas 2D o un shader corto bastan; una biblioteca 3D solo si la idea elegida es realmente volumétrica.
• Hacer commit, push o deploy sin que la persona lo haya solicitado.

Cuándo está terminado

• El script no muestra ningún desbordamiento horizontal en los diez tamaños.
• A 2560 y 3840 px de ancho, la escena ocupa toda la pantalla y el texto mantiene una longitud de línea legible.
• A 375 px, el nombre y la frase de enganche se leen sin desplazamiento, incluso con posibles barras abiertas.
• Con prefers-reduced-motion, la escena muestra una imagen fija completa.
• Sin JavaScript, la primera pantalla muestra el nombre, el enganche y los enlaces.
• Una captura de la escena sola, sin el texto, funciona como fondo de pantalla.
• La persona ha visto las capturas y reconoce su sitio.