Communitygithub.com

Editor de Página de Inicio del Espacio de Trabajo

Úselo al editar, actualizar o iterar sobre el HTML de la página de inicio de un espacio de trabajo (la página estilo revista /w/:slug). Admite ediciones incrementales: obtenga el HTML actual, realice cambios específicos y luego escríbalo de nuevo. NO para la generación inicial; esa proviene del campo `brief` que ejecuta LANDING_PAGE_PROMPT en el servidor contra Gemini.

¿Qué es Editor de Página de Inicio del Espacio de Trabajo?

Esta habilidad permite modificar de forma incremental el HTML de la página de inicio de un espacio de trabajo (la página `/w/:slug` con estilo de revista), en lugar de regenerarla completamente desde cero. Es útil para ajustes como cambios tipográficos, ediciones de diseño, adición de secciones, modificación de textos, intercambio de imágenes o corrección de lemas, todo sin alterar el resto del contenido generado automáticamente. La habilidad interactúa con la CLI `astria` y conserva activamente las restricciones de la plantilla original (como el uso de clases Tailwind, la estructura del JSON de elencos y los enlaces a paquetes/referencias). El flujo de trabajo típico implica obtener el HTML actual, realizar la edición quirúrgica localmente y luego escribirlo de nuevo explícitamente, evitando el uso del campo `brief` a menos que se desee una regeneración completa. La habilidad también proporciona comandos para listar paquetes, elencos y avisos relacionados con el espacio de trabajo, y ayuda a verificar que el marcador de posición `__TUNES_JSON_PAYLOAD__` no se haya eliminado o renombrado accidentalmente.

Compatible con~Claude Code~Codex CLI~Cursor✓Gemini CLI
npx skills add https://github.com/astriaai/skills/tree/HEAD/landing-page-editor

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Vista previa

Del README del skill

Documentación

¿Qué hace Editor de Página de Inicio del Espacio de Trabajo?

La página de inicio del espacio de trabajo (representada en /w/:slug) es un único bloque HTML autocontenido almacenado en workspace.landing_page_html. Se genera desde cero por LANDING_PAGE_PROMPT del lado del servidor cada vez que se envía un brief; esa ruta sobrescribe el HTML por completo.

Para CUALQUIER cambio que no deba regenerar toda la página (ajustes tipográficos, ediciones de diseño, agregar una sección, cambiar texto, intercambiar una imagen, corregir un lema), edite el HTML directamente y escríbalo de nuevo. NO envíe un brief a menos que el usuario desee una regeneración completa.

Todos los comandos usan la CLI astria (consulte la habilidad astria-api). Pase -w <workspace_id> para apuntar al espacio de trabajo.

Restricciones heredadas de LANDING_PAGE_PROMPT

Al editar, conserve estas invariantes (la página /w/:slug en vivo depende de ellas):

  • La salida es HTML del cuerpo interno — sin etiquetas <html>, <head>, <body> o <!DOCTYPE>
  • El estilo usa clases de utilidad Tailwind (ya cargadas en la página). Use <style> solo para efectos de hover/animación que Tailwind no pueda expresar
  • Los enlaces a paquetes son exactamente /p/{slug}; los enlaces a modelos/referencias usan el campo link del JSON de tunes textualmente (NO reconvierta %5B/%5D)
  • Cada imagen / video está envuelto en una etiqueta <a>
  • Las URL de imágenes y videos deben ser las que ya existen — no invente URL
  • Los videos usan <video autoplay muted loop playsinline poster="POSTER_URL"><source src="VIDEO_URL" type="video/mp4"></video>
  • La cadena __TUNES_JSON_PAYLOAD__ dentro de <script type="application/json" id="tunes-data">…</script> es un marcador de posición del lado del servidor. El servidor lo sustituye en el momento de la representación con el JSON de tunes en vivo. Nunca lo reemplace con JSON literal — eso congela el elenco y las nuevas tunes no aparecerán
  • Estilo editorial: titulares con serifa, espacios generosos, reglas de línea fina, object-cover object-[center_top] en imágenes de retrato, max-h-[70vh] en pliegues hero, aspect-[4/5] o aspect-[3/4] en contenedores de retrato

Flujo de trabajo

1. Obtenga el HTML actual de la página de inicio

astria landing get -w <workspace_id> --html > /tmp/landing_page.html

astria landing get -w <workspace_id> (sin --html) devuelve el JSON completo del espacio de trabajo — title, slug, brief, url, public_at, unlisted_at — cuando los necesite. Vista previa de la página representada en /w/{slug}.

2. Obtenga datos del espacio de trabajo (cuando una edición necesite hacer referencia a paquetes / avisos / tunes reales)

astria packs list -w <workspace_id> --limit 100
astria tunes list -w <workspace_id> --limit 200            # el "elenco" representado en la página
astria prompts list -w <workspace_id> --limit 100 --offset 0   # página con --offset hasta que esté vacía
astria prompts list -w <workspace_id> --pack-id <pack_id>      # más barato, una sección a la vez

Los endpoints de lista paginan mediante --limit/--offset (orden predeterminado id desc). Itere con --offset hasta que una página se devuelva vacía.

3. Realice la edición incremental

Edite /tmp/landing_page.html localmente. Mantenga los cambios quirúrgicos — el generador produjo miles de bytes de diseño y la mayor parte debe permanecer textual. Vuelva a leer la sección de restricciones anterior antes de guardar.

4. Escriba la página de nuevo

astria landing set -w <workspace_id> --html-file /tmp/landing_page.html

NO pase --brief aquí — eso descarta sus ediciones y regenera desde cero mediante Gemini.

5. Verifique

Abra /w/{slug} y confirme visualmente el cambio. El marcador de posición __TUNES_JSON_PAYLOAD__ se reemplaza del lado del servidor en el momento de la representación — si una cadena con forma JSON todavía se muestra en la página renderizada, el marcador de posición se eliminó o renombró accidentalmente.

Regenerar desde cero

Solo cuando el usuario solicite explícitamente un rediseño completo — envíe un brief y el servidor ejecuta LANDING_PAGE_PROMPT contra Gemini, sobrescribiendo el HTML:

astria landing set -w <workspace_id> \
  --brief "Editorial fashion lookbook, AW26, dark moody palette, emphasize the womenswear packs"

Skills relacionados