Estándares de codificación CSS, JavaScript y HTML para temas Shopify Liquid. Cubre nomenclatura BEM dentro de etiquetas de hoja de estilos, tokens de diseño, propiedades personalizadas CSS, componentes web para temas, CSS defensivo y mejora progresiva. Útil al escribir CSS/JS/HTML en archivos .liquid o archivos de activos del tema.
Este conjunto de estándares de codificación proporciona una guía completa para desarrolladores que trabajan con temas Shopify Liquid, estableciendo prácticas recomendadas para CSS, JavaScript y HTML. Su utilidad principal radica en garantizar consistencia, mantenibilidad y rendimiento en proyectos de e-commerce. Los estándares cubren áreas clave como la nomenclatura BEM para clases CSS dentro de etiquetas `<style>`, el uso de tokens de diseño y propiedades personalizadas CSS para temas personalizables, la implementación segura de Web Components específicos para temas, y principios de CSS defensivo y mejora progresiva para compatibilidad entre navegadores. Es compatible con cualquier entorno que utilice archivos .liquid o activos de tema de Shopify, y se aplica directamente al escribir código en estos contextos. Funciona estableciendo reglas claras para la estructura de estilos, la modularidad de scripts y la semántica HTML, ayudando a evitar conflictos y facilitando la escalabilidad de los temas.
npx skills add https://github.com/benjaminsehl/liquid-skills/tree/main/skills/liquid-theme-standardsEstándares de codificación CSS, JavaScript y HTML para temas Shopify Liquid. Cubre nomenclatura BEM dentro de etiquetas de hoja de estilos, tokens de diseño, propiedades personalizadas CSS, componentes web para temas, CSS defensivo y mejora progresiva. Útil al escribir CSS/JS/HTML en archivos .liquid o archivos de activos del tema.
This repo contains 2 individual skills — each has its own dedicated page.
Implement WCAG 2.2 accessibility patterns in Shopify Liquid themes. Covers e-commerce-specific components including product cards, carousels, cart drawers, price display, forms, filters, and modals. Use when building accessible theme components, fixing accessibility issues, or reviewing ARIA patterns in .liquid files.
Generate Shopify Liquid theme code (sections, blocks, snippets) with correct schema JSON, LiquidDoc headers, translation keys, and CSS/JS patterns. Use when creating or editing .liquid files for Shopify themes, working with schema, doc, stylesheet, javascript tags, or Shopify Liquid objects/filters/tags.
ElevenLabs text-to-speech with mac-style say UX.
Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.
Capture and automate macOS UI with the Peekaboo CLI.
Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".
Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.
Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".