mukulmunda41-create/new-section

Nueva sección

Una rutina breve para una sección de un sitio que ya tiene sus reglas. Es el paso de sección del skill futuristic-web-design, empaquetado para que pueda ejecutarse solo.

Si ../futuristic-web-design/ está junto a este skill, sus archivos de referencia contienen los detalles. Lee el que la tarea necesite: references/design-system.md para el vocabulario de diseño y la auditoría del sitio genérico, references/ship.md para el formulario de contacto y el pase telefónico.

Si el proyecto no tiene un archivo de reglas ni un sistema de diseño todavía, detente y usa futuristic-web-design desde su primera fase. Una sección construida sin un sistema de diseño es de donde viene el aspecto genérico.

La rutina

1. Lee las reglas. Abre el archivo de reglas del proyecto (AGENTS.md, CLAUDE.md o GEMINI.md) y los tokens del tema. Usa únicamente las tipografías y la paleta definidas allí, y el stack que el proyecto ya utiliza.
2. Confirma el contenido. Cuando los datos importen (precios, afirmaciones, nombres, citas), pregunta. Nunca inventes clientes, reseñas o estadísticas para un negocio real. En otros casos, escribe texto genuino y marca las líneas que hayas inventado. Sin texto de relleno.
3. Elige un diseño con intención. Dividido, centrado, a sangre completa, rejilla, bento o asimétrico. Di cuál y por qué en una línea. Evita el diseño por defecto de un encabezado centrado sobre tres tarjetas idénticas: destaca un elemento y desplaza los otros.
4. Construye un componente en su propio archivo bajo components/, o el equivalente del proyecto.
5. Compruébalo en 390px, 768px y 1440px en un navegador y repara lo que veas. Un diseño puede cumplir todas las reglas y aun así verse mal.
6. Iguala el espaciado superior e inferior con las secciones vecinas.
7. Informa en tres líneas: qué se construyó, la ruta del archivo y qué necesita la revisión del usuario (texto inventado, botones sin conectar, cualquier cosa que no hayas podido verificar).

Cambia solo la sección que se pidió. Un diff más amplio que la solicitud oculta qué edición ayudó.

Opciones de diseño

Cuando el usuario pida opciones, o no pueda describir lo que quiere, construye dos o tres variantes a partir del mismo contenido. Pon cada una en su propia ruta de previsualización (/preview-1, /preview-2, o /before y /after para un rediseño) con una descripción de una línea. Las personas eligen más fácilmente de lo que especifican.

Deja la página real intacta hasta que elijan. Luego elimina las otras variantes y sus rutas, porque las rutas de previsualización sobrantes se envían con el sitio.

Qué hace que una sección parezca diseñada

• Tipografía. La tipografía del titular grande con espaciado ajustado, la tipografía de lectura para todo lo demás. Solo dos tipografías; los valores por defecto del marco como font-mono en una etiqueta cuentan como una tercera. Un titular de héroe tiene como máximo unas ocho palabras.
• Un botón principal. Relleno, con el color de botón de la paleta, vinculado a la acción del resumen. Una segunda acción es un enlace de texto con una flecha o un contorno discreto. Dos botones de igual peso indican que no se tomó ninguna decisión.
• Cada botón lleva a algún lugar real. Si se desconoce el destino, usa el destino honesto más cercano y enumera el botón como sin conectar en el informe.
• Superficie y espacio. Amplio espacio en blanco, rellenos planos, bordes finos, opcionalmente granulado o vidrio. Sin degradados que sustituyan a una paleta. Sombra solo al pasar el ratón.
• Imágenes. Servidas a tamaño de visualización, con carga diferida por debajo de la primera pantalla, con texto alternativo que describe la imagen ("frasco de suero ámbar sobre piedra pálida", nunca "imagen 1").
• Movimiento. Un fundido corto y unos pocos píxeles de desplazamiento hacia arriba, de menos de 500 ms, una vez. Bajo prefers-reduced-motion nada se mueve, incluido el desplazamiento suave y las transiciones al pasar el ratón.

La comprobación a 390px

Los teléfonos representan la mayoría de las visitas, por lo que este es el ancho que determina si la sección está terminada.

• El texto del cuerpo es legible y ningún titular se extiende a lo largo de cinco o más líneas.
• No hay nada presionado contra el borde de la pantalla.
• Los objetivos táctiles miden aproximadamente 44px o más.
• No hay desplazamiento horizontal.
• La navegación se contrae detrás de un conmutador de menú que se abre y cierra.
• Las tarjetas en fila mantienen precios y botones en la misma línea, independientemente de la longitud del texto sobre ellos. Compruébalo en los tres anchos.

Sección de contacto

Un formulario sin destino hace daño, porque la gente asume que su mensaje llegó. El modelo es un buzón: abierto para que todos envíen, cerrado para que solo el propietario lea.

• Campos name, email, message, guardados en una tabla leads en Supabase, o en el backend que el proyecto ya usa.
• Seguridad a nivel de fila activada: inserción anónima permitida, sin lectura pública. No encadenes .select() a la inserción; sin acceso de lectura, hace que la llamada falle.
• El código del sitio usa solo la clave pública, cargada desde .env.local, que permanece en .gitignore.
• Valida antes de enviar (formato de email plausible, mensaje no vacío) y explica cualquier rechazo. Da mensajes distintos para éxito y para fallo.
• Defensa contra spam: un campo honeypot oculto que debe permanecer en blanco, más rechazar envíos que lleguen más rápido de lo que una persona podría escribir.
• Prueba como lo haría un visitante: un mensaje en blanco, un email mal formado, un envío válido. Solo una nueva fila en la tabla demuestra que funciona; una confirmación en pantalla no.
• Cuando falla un guardado, lee el error y corrige la política. Nunca desactives la seguridad a nivel de fila, porque esta tabla contiene nombres y direcciones de personas.