jpoindexter/theft-kit

Habilidad de Página de Aterrizaje SaaS

Genera una página de aterrizaje SaaS de una sola página. Agente, sigue este flujo de trabajo exactamente.

1. Leer el contexto

Antes de escribir nada:

• Lee DESIGN.md en el directorio de trabajo actual. Si falta, detente y solicita uno.
• Identifica la paleta de colores, los tokens de tipografía y los principios de diseño.
• Toma nota de la sección "Guía de Instrucciones del Agente" — si hay conflicto, esta prevalece sobre cualquier instrucción aquí.

2. Planificar las secciones

Secciones requeridas, en orden:

1. Héroe — logotipo o marca de palabra, titular (entrada de eslogan), subtítulo (1–2 oraciones), CTA principal, CTA secundaria. Usa el parámetro hero_density como relleno vertical en px.
2. Características — 3–6 tarjetas de características. Cada una: ícono, título breve, cuerpo de 1–2 oraciones.
3. Prueba social — proof_count logotipos o testimonios. Si es 0, omite esta sección.
4. Precios — 2–3 niveles. Incluir solo si has_pricing es verdadero.
5. CTA del pie de página — banda grande de color de acento con un botón de llamada a la acción.
6. Pie de página — mínimo: enlaces + derechos de autor.

3. Aplicar el sistema de diseño

• Todos los colores deben provenir de los tokens de DESIGN.md. No inventes valores hexadecimales.
• Tipografía: usa la fuente de visualización declarada para titulares, la fuente del cuerpo para todo lo demás.
• Diseño: respeta la cuadrícula, el ancho máximo y las reglas de espaciado entre secciones.
• Componentes: usa los patrones declarados de botones/tarjetas/entradas. No agregues sombras si la sección "Profundidad y Elevación" de DESIGN.md dice mínimo.
• Acento: usa el color de acento solo una vez en el héroe, una vez en el CTA del pie de página y para todos los enlaces. No satures la página.

4. Escribir el archivo

Genera un único archivo index.html autónomo con:

• Todo el CSS en línea dentro de un bloque <style> en <head>.
• Fuentes de respaldo del sistema si las fuentes de DESIGN.md no se pueden cargar desde Google Fonts, etc.
• Sin JavaScript externo.
• HTML semántico (<header>, <main>, <section>, <footer>).
• Cada elemento editable etiquetado con data-od-id="<slug-único>" para que el modo de comentarios de la aplicación anfitriona pueda apuntarlo.

5. Autoverificación

Antes de finalizar, verifica:

• Todo el texto tiene significado de contenido, no es lorem ipsum (usa las entradas product_name y tagline; genera texto plausible y específico para el resto).
• No hay referencias de color rotas (cada valor de color CSS está en la paleta de DESIGN.md o en una variante alfa/de respaldo válida).
• Los puntos de interrupción responsivos coinciden con la sección "Comportamiento Responsivo" de DESIGN.md.
• La página se ve bien a 1440 píxeles de ancho, 768 píxeles de ancho y 375 píxeles de ancho (simulación mental).
• El acento se usa como máximo dos veces en total.

6. Finalización

Escribe solo index.html. No generes un archivo CSS, JS o README separado.

---

Para los autores de habilidades que lean esto como referencia

Esta es una habilidad mínima pero completa. Estructura:

saas-landing-skill/
├── SKILL.md    ← estás aquí
└── assets/
    └── base.html    (plantilla inicial opcional; esta habilidad no la usa)

Cosas a tener en cuenta:

• El bloque de metadatos od: es opcional para compatibilidad solo con Claude-Code, pero agregarlo activa las entradas tipadas, los controles deslizantes, los metadatos de vista previa y el control de capacidades de OD.
• El flujo de trabajo debajo de los metadatos es Markdown simple que el agente lee como su instrucción del sistema.
• DESIGN.md se trata como un colaborador, no como una anulación. La habilidad le da al agente autoridad para anular cuando el resumen entra en conflicto, pero nunca para inventar nuevos tokens.
• El etiquetado data-od-id es cómo conectamos los elementos al modo de comentarios. Las habilidades que quieran compatibilidad con el modo de comentarios deben anotar su salida.

Mantén esas cuatro reglas dentro del contrato del paquete; no dependas de un archivo de protocolo a nivel de repositorio que pueda no viajar con esta habilidad.