prompt-front — worldx3.com

prompt-front — worldx3.com

Invocar al empezar cada sesión: @prompt-front.md

Guía de calidad para mantener homogeneidad en diseño, SEO, rendimiento y deploy del sitio.

A. Arquitectura del sitio

  • Stack: Jekyll 4 + Tailwind CSS 3
  • CSS: editar assets/css/main.css → compilar con npm run build:css → assets/css/site.css
  • Layouts: default, post, page, work, home
  • Clases: prefijo jano-* (nunca halli)
  • Grid:
    • jano-container — 12 columnas, max-width 90rem
    • jano-span-header — 8 cols (desktop)
    • jano-span-body — 6 cols (desktop)
    • jano-span-full — 12 cols
  • Tipografías:
    • Geist — UI, navegación, cuerpo, h1 de posts
    • Playfair Display — subtítulos de página, descripciones en work
  • Paletas: _data/palettes.yml — asignar con theme: <id> en front matter
  • Assets en desarrollo: _includes/asset-url.html genera URLs absolutas en local

B. SEO — checklist por página/post

Cada página o post en markdown debe incluir en front matter:

meta_title: Título corto para <title> y Open Graph
description: Descripción única para meta description y OG
  • Un solo h1 por página (layout o contenido, nunca dos)
  • Posts: layout: post, date, meta_title, description; título visible puede llevar subtítulo tras coma
  • Plugin _plugins/seo_meta_title.rb: meta_title → <title>; título visible conservado en display_title
  • Automático: jekyll-seo-tag (canonical, OG, Twitter) + _includes/json-ld.html (Person, WebSite, BlogPosting)
  • Imágenes: siempre alt; figuras con _includes/post-figure.html
  • Idioma: lang: es en _config.yml
  • noindex: solo en páginas que lo requieran (404, aviso-legal)

C. Asociación blog ↔ work

Para vincular un artículo a una ficha de proyecto:

# En _posts/mi-articulo.md
work: sarebus   # slug = page.slug de la ficha en _work/ (nombre del fichero sin .md)

D. Rendimiento (Lighthouse)

Antes de merge a main:

npm run build:css
JEKYLL_ENV=production bundle exec jekyll build
  • Commitear assets/css/site.css si cambió main.css
  • JS solo menu.js, con defer
  • Fuentes Google con display=swap (ya en head.html)
  • Imágenes con loading="lazy" salvo above-the-fold
  • No añadir frameworks JS/CSS ni dependencias innecesarias
  • CSS minificado en producción

E. Deploy GitHub Pages

Workflow: .github/workflows/deploy.yml

Paso Acción
Trigger Push a main
Build npm ci → npm run build:css → bundle exec jekyll build
Verificación index.html, site.css, CNAME, feed.xml, sitemap.xml, URLs HTTPS
Deploy actions/deploy-pages

Errores de runner / internal server error: problema de infraestructura GitHub → reintentar workflow.

Local antes de push:

npm run build:css && JEKYLL_ENV=production bundle exec jekyll build

F. Metadatos al publicar

Recurso Mantenimiento
RSS /feed.xml Automático (jekyll-feed)
Sitemap /sitemap.xml Automático (jekyll-sitemap)
llms.txt Manual — actualizar al añadir posts, páginas o fichas work
robots.txt Revisar si hay nuevas páginas noindex

G. Checklist de publicación

  • Front matter completo (meta_title, description, date si post)
  • work: <slug> si el post pertenece a un proyecto
  • theme: <id> si la página usa paleta distinta
  • npm run build:css ejecutado y site.css commiteado
  • Build de producción local sin errores
  • llms.txt actualizado
  • Ortografía revisada en contenido
  • Imágenes optimizadas con alt
  • Probar en desktop y mobile (menú, tipografía, paleta)

H. Estructura de ficheros clave

_config.yml              # Config global, plugins, colecciones
_config_development.yml  # url local http://127.0.0.1:4000
_data/palettes.yml       # Paletas de color
_posts/                  # Artículos del blog
_work/                   # Fichas de proyectos
_layouts/                # Plantillas
_includes/               # Fragmentos reutilizables
assets/css/main.css      # Fuente Tailwind (editar aquí)
assets/css/site.css      # CSS compilado (commitear)
prompt-front.md          # Este archivo
llms.txt                 # Índice para LLMs (manual)

I. Servidor local

npm run build:css
bundle exec jekyll serve --port 4000 --livereload --config _config.yml,_config_development.yml

http://127.0.0.1:4000/