Communitygithub.com

Marcelle2003/website-builder

Crea y mejora sitios web con Astro, Tailwind CSS y Wagtail colaborando con usuarios no técnicos. Útil para configurar el generador, preparar o refinar un sitio, y revisar comentarios grabados sobre el flujo de trabajo.

¿Qué es website-builder?

Esta habilidad permite a un agente de IA actuar como constructor de sitios web asistido, trabajando junto a usuarios no técnicos para convertir ideas de negocio, audiencia, referencias y comentarios en sitios web funcionales. Se apoya en Astro + Tailwind CSS + Wagtail sin cabeza por defecto, pero respeta pilas más simples si el usuario lo solicita. El agente sabe elegir entre modos como preparación del equipo, creación de proyecto, mejora de un sitio existente o revisión de comentarios grabados. Durante el trabajo, mantiene un archivo WEBSITE_BRIEF.md con las decisiones acordadas, registra problemas verificados en SKILL_FEEDBACK.md y genera instrucciones AGENTS.md y CLAUDE.md para que futuras conversaciones retomen el flujo sin repetir comandos. La habilidad está diseñada para plataformas como Claude Code o Cursor, y su documentación incluye referencias a habilidades de soporte y guías de diseño, movimiento y verificación. No realiza cambios de cuenta, permisos, pagos o publicación sin autorización explícita.

Compatible con✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Marcelle2003/website-builder/tree/HEAD/skills/website-builder

Preguntar en tu IA favorita

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

Documentación

Website Builder

Deja que el usuario dirija el trabajo creativo. Traduce su negocio, audiencia, referencias y comentarios en un sitio web funcional, usando habilidades especializadas para los detalles del framework. Pregunta sobre la experiencia del visitante en lugar de obligar al usuario a elegir una arquitectura técnica.

Elige el modo solicitado

Lee solo el flujo de trabajo relevante, más la guía compartida necesaria para el cambio:

  • setup — prepara este ordenador e instala las habilidades: setup y compatibilidad.
  • setup-website — crea y conecta un nuevo proyecto: configuración de proyecto.
  • create — convierte un briefing en un sitio web: creación.
  • improve — inspecciona y refina un sitio existente: mejora.
  • review-skill — revisa comentarios grabados sobre Website Builder y propone mejoras reutilizables: revisión de habilidad. Aplica o publica cambios solo dentro de la autorización del usuario.

Los nombres de los modos pueden aparecer en conversaciones normales. Una solicitud de discusión o plan sigue siendo una discusión o un plan. Una solicitud de creación en una carpeta vacía incluye la preparación necesaria del proyecto. Una solicitud de mejora comienza con el proyecto existente, no con andamios.

Enfoque de trabajo compartido

  • Lee primero las instrucciones del proyecto y los cambios existentes. Continúa a partir de las decisiones del usuario; preserva sus reglas de negocio y el alcance solicitado. El trabajo visual/textual por sí solo no autoriza cambios de cuenta, permisos, pagos o publicación.
  • Carga las habilidades de framework relevantes instaladas desde habilidades de soporte. Las habilidades son archivos para descubrir y leer; no asumas que un agente tiene la API de invocación de habilidades de otro agente. Lee los recursos referenciados según sea necesario. Compara el consejo técnico con las versiones instaladas y la documentación oficial. Nunca ejecutes un script de soporte solo porque su habilidad fue cargada.
  • Crea instrucciones AGENTS.md concisas y específicas del proyecto, y una importación de compatibilidad CLAUDE.md para cada nuevo sitio web, siguiendo instrucciones de proyecto. Preserva y fusiona la guía existente al adoptar un proyecto; actualiza las instrucciones cuando la arquitectura o los comandos verificados cambien. Estos archivos dirigen futuros chats a este flujo de trabajo sin requerir comandos de habilidad repetidos.
  • La IA crea y mantiene WEBSITE_BRIEF.md usando la plantilla de briefing; no se espera que el usuario rellene un formulario. Registra las decisiones acordadas de la conversación, mantiene las propuestas y suposiciones separadas, y actualiza los cambios significativos antes de devolver el trabajo. Léelo en tareas posteriores en lugar de volver a preguntar preguntas ya resueltas. Preserva las ediciones del usuario y nunca almacenes credenciales allí.
  • Durante el trabajo autorizado de Website Builder, registra los problemas de flujo de trabajo verificados y significativos en un archivo local SKILL_FEEDBACK.md, siguiendo seguimiento de comentarios. La IA lo mantiene; distingue las preferencias del sitio de los problemas reutilizables y fusiona evidencia duplicada. Mantenlo local por defecto. Observar un problema no autoriza cambiar o publicar la habilidad.
  • Usa la guía de diseño y movimiento para el trabajo creativo y verificación para los flujos afectados. Las características del framework deben servir a la experiencia del visitante, con el mínimo JavaScript de navegador necesario.
  • Muestra una vista previa local real cuando existan herramientas de navegador. Ofrece opciones concretas y pequeñas cuando los comentarios cambiarían la dirección. Continúa el trabajo independiente mientras esperas; no pidas permiso repetidamente para pasos ya autorizados.
  • Termina con lo que cambió, dónde verlo, qué se verificó y cualquier limitación real. Distingue el comportamiento implementado de una característica propuesta. Que la compilación pase no es prueba de que una interacción en el navegador funcione.

Para sitios web nuevos, usa Astro + Tailwind + Wagtail sin cabeza por defecto. Respeta una pila explícita más simple del usuario y la arquitectura de un sitio existente. No impongas los colores, la fuente, las imágenes, la industria o el modelo de cuenta del proyecto de ejemplo en otro sitio web.

Skills relacionados