Preparar componentes AEM con HTL y Tailwind
Guiar la implementación de componentes Adobe Experience Manager con plantillas HTL, Sling Models, ClientLibs y diálogos, usando BEM, Tailwind y tokens del proyecto; incluye una ruta opcional desde Figma.
Ficha elaborada por peopleofthe.ai con asistencia de IA. Consulta el criterio editorial y los límites de las pruebas.
Revisión documental del original completo, MIT, frontmatter, requisitos y comandos, reutilizando la caché fijada. Perfil y LICENSE coinciden en bytes, SHA256 y Git blob SHA con inventario y árbol no truncado de GitHub en la revisión indicada; ZIP determinista verificado. Sin instalación, activación, Maven, despliegue, acceso a AEM/Figma, llamadas a modelos o ensayo de código. No se garantizan cumplimiento WCAG, rendimiento, fidelidad visual, seguridad, compatibilidad ni código listo para producción; las afirmaciones de pericia del personaje son parte del original.
Antes de empezar
Comprueba que tienes lo necesario para usar este recurso.
- Visual Studio Code con GitHub Copilot o anfitrión que interprete perfiles .agent.md. Fija model: GPT-4.1; su disponibilidad, acceso gratuito y carga nativa no se han comprobado. El original está en inglés.
- Declara codebase, edit/editFiles, web/fetch, githubRepo y figma-dev-mode-mcp-server. La resolución de estos alias depende del anfitrión; no se ha instalado ni conectado ninguna herramienta.
- Proyecto Adobe Experience Manager y acceso autorizado a sus entornos, código y licencias aplicables; Core Components, Sling Models, ClientLibs y diálogos según el componente. El archivo no incluye el producto ni un proyecto AEM ejecutable.
- El original usa HTL, Tailwind CSS v4, BEM y PostCSS. main.pcss, clases de tokens, CardModel/HeroModel y recursos Core Components deben existir o adaptarse en el proyecto. No fija versiones de AEM/JDK/Maven ni una configuración frontend completa; verificar la toolchain del proyecto antes de compilar.
- Figma MCP figura declarado y el flujo Figma se describe como opcional. Si se usa, hacen falta diseño y acceso autorizados y comprobar las llamadas get_code, get_variable_defs y get_image del original; no se ha validado su disponibilidad actual.
- Incluye mvn clean install -PautoInstallSinglePackage: puede instalar/desplegar en AEM según el perfil del proyecto. No se ha ejecutado; revisar destino, permisos y efectos antes de usarlo.
- Contenido gratuito bajo MIT; AEM, el modelo/Copilot, acceso al diseño, infraestructura y herramientas pueden tener cuotas, licencias o costes propios. No se ha comprobado una ejecución íntegramente gratuita.
Compatibilidad declarada
Según la documentación de origen. La presencia en esta lista no implica una prueba de ejecución en cada entorno.
Una forma de empezar
EJEMPLO ILUSTRATIVOUna solicitud para adaptar a tu contexto y usar con el recurso.
Caso ficticio: en un proyecto AEM autorizado necesito una tarjeta con imagen, título y CTA. Aporto propiedades del Sling Model y tokens del proyecto. Prepara una propuesta HTL y una lista de integración, sin compilar ni desplegar.
Posible entrega: plantilla HTL con condiciones para los datos, clases BEM/Tailwind y referencia al componente de imagen adecuado; lista de pendientes para resolver el Sling Model real, diálogo, ClientLib y tokens. La propuesta incluiría verificaciones de author/publish, teclado y tamaños de pantalla, todas pendientes hasta ejecutarlas en ese proyecto.
Ejemplo editorial ilustrativo, redactado para explicar el uso. No procede de una ejecución del agente ni contiene un componente AEM comprobado; no acredita compilación, despliegue, fidelidad, WCAG o rendimiento. Este ejemplo no es una salida observada de una prueba del recurso.
La fuente, a la vista
- Recurso original
- AEM Front-End Specialist
- Autor
- GitHub Awesome Copilot y sus contribuidores; copyright del repositorio: GitHub, Inc.
- Versión o revisión
- 613efc8c21d9b3ce642dff361d17006cd9967e28
- Licencia
- MIT
Conservar Copyright GitHub, Inc. y el permiso MIT completo en las copias o porciones sustanciales. El ZIP conserva el perfil original y LICENSE intactos y añade atribución, procedencia y nota editorial. No incluye AEM, SDK, activos o herramientas externos.
Ver fuente original