tadyuh76/slide-deck

Presentación

Un deck aquí es un pequeño proyecto React que renderiza diapositivas de 1920×1080, más un pipeline que las convierte en un PowerPoint nativo (texto editable, notas del orador), un PDF y un guión del orador. starter/ es un deck completo funcional (12 diapositivas de ejemplo en vietnamita, tema azul, un ejemplo de cada composición). Cópialo, reemplaza el contenido, mantén el sistema.

Lee el brief para tres cosas antes que nada: quién está en la sala (asume que no tienen conocimientos previos a menos que se indique lo contrario), cuánto dura el segmento y cuál es el propio esquema del orador. El esquema del orador define el orden y el contenido. Tu trabajo es claridad y apariencia, no nuevas afirmaciones.

1. Inicio

cp -R "<ruta de este skill>/starter" "<proyecto>/<nombre-del-deck>"
cd "<proyecto>/<nombre-del-deck>/deck" && npm install && npx playwright install chromium
npx vite                                                # servidor de desarrollo, puerto en vite.config.ts

Luego establece los nombres: tools/deck-name.txt (nombre del archivo PPTX y PDF), el título en deck/index.html, el encabezado en deck/script-doc.mjs, los nombres de las secciones en deck/src/deck/types.ts (ACTS), y el texto del pie de página y los logotipos en Chrome (deck/src/deck/Deck.tsx). Elige un puerto libre en deck/vite.config.ts si hay otro deck ejecutándose.

Estructura del proyecto:

• deck/src/slides/*.tsx: un archivo por diapositiva o grupo, orden en index.ts. Cada uno exporta un SlideDef (id, título, acto, minutos, notas, Componente).
• deck/src/ui/atoms.tsx: piezas compartidas: Bg, Header, HaloArt/Art, Feature (el panel destacado), IconTile, Stat, Source, LogoTile, AppIcon. Links.tsx dibuja líneas conectoras con puntos que se mueven lentamente. World.tsx es un mapa mundial punteado a partir de formas reales de países.
• deck/src/index.css: contiene los tokens de color. Cambia el tema modificando --accent, --accent-ink, los valores de fondo y los tintes rgba, no añadiendo un segundo tema.
• tools/: generación de arte, compilación, publicación.

2. Reglas de contenido (lo que el propietario corrigió, en orden de frecuencia)

1. Sigue el documento del orador. El orden de las secciones, la redacción de las definiciones y cada número provienen de él. Cuando el esquema solo tenga un encabezado, añade el mínimo de una fuente primaria, enlázalo en Source e informa al propietario qué diapositivas has completado. Nunca presentes un recuento que la lista no respalde (una lista anunciada como 30 nombres que contiene 28: muestra la lista, omite el número, repórtalo).
2. Los titulares son muy fáciles. Un titular nombra la diapositiva con palabras que el público ya usa: "5 cách thu thập dữ liệu xuyên biên giới", "Yêu cầu trong tình huống khẩn cấp". Las líneas ingeniosas o comprimidas son rechazadas. Una línea, hasta unos 40 caracteres a 66 px; la segunda mitad en el color de acento.
3. Texto mínimo, lenguaje sencillo. Una idea por tarjeta, unas pocas líneas cortas. Los términos comunes en inglés van entre corchetes o como una pequeña segunda línea ("service provider"). Dígitos, no palabras numéricas. Sin etiqueta pequeña sobre un titular, sin dos puntos o puntos medios como decoración, sin redacción promocional.
4. Traduce todo desde un deck fuente al idioma del público; conserva los nombres propios y el término inglés donde los funcionarios lo encontrarán.
5. Las notas del orador contienen el texto completo. La diapositiva mantiene la forma corta; las notas contienen las oraciones completas del orador del esquema, para que no se pierda nada. Suma los minutes contra el segmento e informa si hay exceso.
6. Logotipos reales para organizaciones reales (archivos oficiales, nunca un parecido generado); registra de dónde vino cada uno en assets/logos-src/SOURCES.md. Los logotipos de organizaciones que el propietario solicite van en cada diapositiva en Chrome, grandes en la diapositiva de título y cierre.
7. Verificación de hechos en segundo plano. Envía un agente de investigación para los hechos que estás añadiendo (fechas, números de artículos, números de leyes, recuentos) y escribe el resultado en docs/facts.md con una URL por elemento. Cuando la propia cifra del orador difiere de las fuentes públicas, mantén la suya e informa la diferencia.

3. Gráficos

Cada diapositiva de contenido tiene ilustración. Las diapositivas solo con iconos fueron calificadas de aburridas. Los pequeños iconos de Lucide están bien como marcadores de fila solo cuando la diapositiva también tiene arte.

• Una familia: objetos pseudo-3D compactos a partir de planos de color planos, sin degradados ni brillo, una sola familia de colores más un pequeño marcador amarillo. Las hojas de referencia de estilo son assets/ref/blue-indicators.png y green-indicators.png. Cada baldosa de una hoja debe ser plana: una baldosa brillante atrae nuevas imágenes hacia los degradados. Para otro color, vuelve a colorear una hoja para comenzar (tools/blue_ref.py), cambia la línea de paleta en tools/art.mjs, genera un primer lote, luego reconstruye la hoja a partir de 16 de tus mejores resultados y úsala a partir de entonces (la hoja azul se hizo así).
• Añade una línea por imagen a tools/art-list.tsv (nombre<TAB>concepto). Un concepto es un objeto claro con como máximo dos detalles de apoyo y sin texto: "un sobre sellado con un candado en su solapa y una pequeña insignia de ojo tachado".
• P=4 bash tools/art-batch.sh genera lo que falta con la herramienta de imagen de Codex CLI (unos 80 s cada una; necesita codex instalado y con sesión iniciada, modelo establecido en tools/art.mjs). Ejecútalo en segundo plano y sigue escribiendo las diapositivas. Algunas ejecuciones fallan silenciosamente: cuando termine, verifica que todos los nombres existan y vuelve a ejecutarlo para los que falten.
• docker build -q -t deck-pack -f tools/Dockerfile tools && docker run --rm -v "$PWD":/w -w /w deck-pack python tools/art_finish.py las recorta en deck/public/art/*.webp. Úsalas con <HaloArt name="..." size={...} />.
• Los temas sensibles (daño a niños, suicidio, terrorismo) reciben símbolos protectores: un paraguas, un escudo, un salvavidas, una señal de advertencia.
• Los mapas provienen de World.tsx (formas reales), nunca de un modelo de imagen. Los diagramas (Venn, flujos, centros) son SVG en la diapositiva.

4. Composición: no dos vecinos iguales

Un deck donde cada diapositiva es una fila de tarjetas iguales fue devuelto ("cada diapositiva tiene un diseño muy similar"). Dale a cada diapositiva la forma que tiene su contenido. El starter tiene un ejemplo trabajado de cada una:

Contenido	Composición	Diapositiva del starter
Algunas partes en orden	Pasos que suben por un camino, grandes números tenues	s02-agenda.tsx
Una idea general más otras varias	Bento: una baldosa alta destacada y una 2×2	Terms en s03-terms.tsx
Un proceso	Pipeline: estaciones numeradas en una línea, fluyendo hacia un panel de resultados	s05-preserve.tsx
Varias formas de llegar a una cosa	Centro y radios	s06-channels.tsx
Tipos paralelos con los mismos atributos	Filas de ancho completo: imagen, pregunta, nombre, contenidos	DataTypes en s03-terms.tsx
Opciones con una advertencia	Cuadrícula de baldosas más un panel Feature	Emergency en s08-requests.tsx
Una cadena de traspasos	Flujo de nodos con flechas (Link de ui/Links.tsx)	ninguna en el starter
Dos alternativas	Dos paneles anchos	ninguna en el starter
Áreas superpuestas con un núcleo compartido	Venn, etiquetas en líneas de referencia	Directorate en s11-venn.tsx
Lugares	Mapa punteado con pines o países iluminados, lista al lado	s17b-map-list.tsx
Un centro con cuatro funciones	Disco en el medio, elementos en las esquinas	AspDesk en s14-corners-bridge.tsx
Dos lados y lo que pasa entre ellos	Puente: dos orillas, carriles entre ellas	Gateway en s14-corners-bridge.tsx
Números que prueban un punto	Panel Feature con Stat	ninguna en el starter

Cuando la diapositiva del propio orador tenga una idea de diagrama (un Venn, una lista junto a un mapa), conserva la intención y el contenido y redibújalo; no conserves su estilo.

5. Arte del texto (cada uno de estos fue una captura de pantalla rechazada)

• Nada salta. En un conjunto de tarjetas, el mismo elemento comienza a la misma altura en cada tarjeta. Haz que los títulos tengan el mismo número de líneas (reformula o da a cada título dos líneas), luego apila el resto directamente debajo. Sin espacios vacíos ni agujeros margin-top: auto entre un título y su texto.
• Divide las líneas por significado. .slide tiene white-space: pre-line; escribe \n al final de una frase: "Chuỗi bảo quản\nchứng cứ", nunca "Chuỗi bảo\nquản chứng cứ". Mantén cada línea establecida a mano lo suficientemente corta para que el navegador nunca la vuelva a envolver; si se envuelve, acorta la línea o ensancha la caja. Las listas de nombres también obtienen líneas establecidas a mano (los espacios de no separación rompieron el PowerPoint).
• Un tamaño por línea. Un número grande y su unidad son dos bloques (Stat); una palabra de acento que encabeza una descripción es su propia línea.
• Márgenes. El contenido permanece dentro de 120 px a izquierda y derecha y fuera de la franja del logotipo (parte superior de 30 a 98 px). Comprueba las etiquetas en mapas y diagramas contra el borde derecho.
• Las diapositivas se abren completas. Sin animación de entrada; como máximo una revelación por clic, solo cuando la revelación es el punto. El movimiento ambiental (puntos que fluyen, el fondo del título) está bien.
• Sin widgets de progreso o número de sección en las diapositivas a menos que se solicite; la barra de pie de página es suficiente.

6. Compilación y verificación

zsh tools/release.sh     # unos 5 minutos: release/ obtiene Deck/ (web), .pptx, .pdf, Kich-ban-trinh-bay.pdf

La publicación vuelve a guardar el archivo a través de Microsoft PowerPoint para que las fuentes estén incrustadas. Primero cierra PowerPoint: verifica que no haya nada sin guardar abierto, y toma una carpeta de bloqueo en /tmp para que dos sesiones nunca vuelvan a guardar al mismo tiempo. Sin PowerPoint en una Mac, salta ese paso en tools/release.sh; el deck aún se abre, con fuentes que deben estar instaladas en la máquina de presentación.

La verificación es parte del trabajo, cada ronda:

1. cd deck && npx vite build && node export.mjs ../tmp/export renderiza cada diapositiva a tmp/export/sNN.png.
2. Mira cada diapositiva a tamaño completo, una imagen a la vez (reduce a 1600 px de ancho). Las hojas de contacto ocultan líneas envueltas, texto que toca los bordes y filas desalineadas. Busca: líneas que se envolvieron donde no las rompiste, texto cerca o sobre un borde, titulares que tocan los logotipos, comienzos desiguales entre tarjetas, imágenes faltantes (un cuadrado vacío delineado), etiquetas superpuestas.
3. Después de la publicación, mira tmp/lo/p-NN.png (el PowerPoint diseñado por LibreOffice) para las diapositivas que cambiaste. Aquí es donde aparecen los cuadros de texto desbordados. LibreOffice renderiza el tipo ligeramente más ancho que PowerPoint, por lo que un casi fallo allí es un riesgo real.
4. Corrige, recompila, mira de nuevo. Di claramente lo que miraste y lo que no.

Luego copia release/ a una carpeta con nombre en el escritorio, sirve release/Deck en localhost (docker run -d -p 127.0.0.1:<puerto>:80 -v "$PWD/release/Deck":/usr/share/nginx/html:ro nginx:alpine), y abre la carpeta cuando te lo pidan.

7. Informe

Comienza con lo que está listo y dónde. Luego enumera las decisiones que son del propietario o del orador: cualquier cosa que hayas añadido más allá del esquema, cualquier cifra que hayas mantenido y que las fuentes contradigan, cualquier recuento que no cuadre, el tiempo de ejecución frente al segmento. Palabras sencillas, sin nombres de archivos o funciones.